Tutorial 8
Creating Data Tables
INTRODUCTORY
Objectives
•
•
•
•
XP
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
Objectives
•
•
•
•
XP
Create styles for the table element
Format columns of data
Stripe table rows
Position a text block
New Perspectives on Blended HTML, XHTML, and CSS
3
Creating a Table to Display
and Organize Data
XP
• 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
New Perspectives on Blended HTML, XHTML, and CSS
4
Creating a Table to Display
and Organize Data
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
5
Creating a Table to Display
and Organize Data
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
6
Creating a Table to Display
and Organize Data
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
7
Creating a Table to Display
and Organize Data
XP
• 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
New Perspectives on Blended HTML, XHTML, and CSS
8
Creating a Table to Display
and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS
XP
9
Creating a Table to Display
and Organize Data
XP
• 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
New Perspectives on Blended HTML, XHTML, and CSS
10
Creating a Table to Display
and Organize Data
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
11
Creating a Table to Display
and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS
XP
12
Creating a Table to Display
and Organize Data
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
13
Creating a Table to Display
and Organize Data
New Perspectives on Blended HTML, XHTML, and CSS
XP
14
Creating a Table to Display
and Organize Data
XP
• The border-collapse property is used to change
the appearance of the table gridlines
New Perspectives on Blended HTML, XHTML, and CSS
15
Using CSS to Format Tables
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
16
Using CSS to Format Tables
New Perspectives on Blended HTML, XHTML, and CSS
XP
17
Using CSS to Format Tables
XP
• 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
New Perspectives on Blended HTML, XHTML, and CSS
18
Using CSS to Format Tables
New Perspectives on Blended HTML, XHTML, and CSS
XP
19
Using CSS to Format Tables
XP
• 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.
New Perspectives on Blended HTML, XHTML, and CSS
20
Using CSS to Format Tables
New Perspectives on Blended HTML, XHTML, and CSS
XP
21