introductory tutorial 8 creating data tables. xp objectives contrast data tables with layout tables...

INTRODUCTORY

Tutorial 8

Creating Data Tables

XPXPObjectives• Contrast data tables with layout tables• Create a table to display and organize data• Provide a table caption• Merge table columns or rows

New Perspectives on Blended HTML, XHTML, and CSS 2

XPXPObjectives• Create styles for the table element• Format columns of data• Stripe table rows• Position a text block


XPXPCreating a Table to Display and Organize Data• A data table is a table used to align Web content

in columns and rows–A cell is the intersection of a column and row

• A layout table is a table in which the code is used for page layout

• Frames present documents in multiple views as either independent windows or subwindows– Legacy code


XPXPCreating a Table to Display and Organize Data• To create a table, enter the following code:

<table title="tabletitle">

</table>

where <table> is the start table tag, title is the title attribute,

tabletitle is a brief description of the table to be used as a ScreenTip, and </table> is the end table tag.


XPXPCreating a Table to Display and Organize Data• A caption is a brief description of a table• To create a table caption, enter the following

code:<caption>captiontext</

caption>

where <caption> is the start caption tag, captiontext is the text in the caption, and

</caption> is the end caption tag.


XPXPCreating a Table to Display and Organize Data• The table row element is used to create table

rows• To create table rows, enter the following code:<tr>

<td>tabledata</td>

</tr>

where <tr> is the start table row tag, <td> is the start table data tag, tabledata is the data for the cell, </td> is the end table data tag, and </tr> is the end table row tag.


XPXPCreating a Table to Display and Organize Data• The table data element is used for entering cell

content• The table header element formats the first row

of a table• The scope attribute determines which adjacent

cells are associated with a particular cell


XPXPCreating a Table to Display and Organize Data


XPXPCreating a Table to Display and Organize Data• Table borders are the horizontal and vertical lines that

surround the table• Gridlines are the horizontal and vertical lines that

appear within the table• To create external borders, enter the following CSS

code:table {

border: value;

}

where table is the table element, border is the border property, and value is any CSS unit measurement


XPXPCreating a Table to Display and Organize Data• To create gridlines, enter the following CSS code:th, td {

border: value;

}

where th, td are the table header and table data selectors, border is the border property, and value is any CSS unit measurement.


XPXPCreating a Table to Display and Organize Data• The colspan attribute is used to merge cells across

columns• The rowspan attribute is used to merge cells across rows• To span a cell across columns, enter the following code:<td colspan="value">

where colspan is the colspan attribute and value is the number of columns that will be spanned. The colspan attribute and its value must be placed in the cell in which the column merge should begin. All empty spanned table data cells should be deleted.


XPXPCreating a Table to Display and Organize Data• The border-collapse property is used to change

the appearance of the table gridlines


XPXPUsing CSS to Format Tables• To set the table width, enter the following CSS

styles code:table {

width: value;

}

where table is the table element selector, width is the width property, and value is a value for the table width expressed in any of the CSS units of measurement.


XPXPUsing CSS to Format Tables


XPXPUsing CSS to Format Tables• Row striping alternates the background color of the

rows in a table• To create row striping, enter the following code:

tr.stripe {

styles

}

where tr is the table row element, stripe is a dependent class name, and styles are the styles to change the appearance of an alternate row of the table

• Within the start <tr> tag, apply the stripe class to each alternate row in the table


XPXPUsing CSS to Format Tables• The column element is used to format one or more

columns• To format table columns, enter the following code

below the table caption code:<col />

where col is the column element. Enter a <col /> element for each column in the table. If the <col/> element will format more than one column, enter span="n", where span is the span attribute and n is the number of columns to be spanned. Delete the col element for each column to be spanned.


introductory tutorial 8 creating data tables. xp objectives contrast data tables with layout tables...

Documents