Chapter 8: Table Markup


TOP

Reference Sample

  
Your Content Here
A common header for two subheads Header 3
Header 1 Header 2
Thing A data A1 data A2 data A3
Thing B data B1 data B2 data B3
Thing C data C1 data C2 data C3
This is a footnote for the table.

Table Tags

<table>
Use and notes related to the table tag.
<caption>
Use and notes related to the table tag.
<colgroup>
Use and notes related to the table tag.
<col>
Use and notes related to the table tag.
<thead>
Use and notes related to the table tag.
<tbody>
Use and notes related to the table tag.
<tfoot>
Use and notes related to the table tag.
<tr>
Use and notes related to the table tag.
<th>
Use and notes related to the table tag.
<td>
Use and notes related to the table tag.

Table Property Attributes

rowspan="number"
Use and notes related to the table tag.
colspan="number"
Use and notes related to the table tag.
scope="colgroup, rowgroup, col, or row"
Use and notes related to the table tag.
headers="one or more header ids"
Use and notes related to the table tag.

Exercise 8-1: Making a simple table

Album Release Years
Album Year
Rubber Soul 1965
Revolver 1966
Sgt. Pepper's 1967
The White Album 1968
Abbey Road 1969

Exercise 8-2: Column spans

Show Times
7:00pm 7:30pm 8:00pm
The Sunday Night Movie
Perry Mason Candid Camera What's My Line?
Bonanza The Wackiest Ship in the Army

Exercise 8-3: Row spans

Fruit
apples oranges pears
bananas pineapple
lychees

Exercise 8-4: The table challenge

Your Content Here
A common header for two subheads Header 3
Header 1 Header 2
Thing A data A1 data A2 data A3
Thing B data B1 data B2 data B3
Thing C data C1 data C2 data C3
This is a footnote for the table.

Menu Items
Options
Burgers Grass-fed Beef Black Bean Veggie
Fries Hand-cut Idaho potato Seasoned sweet potato