Exercise 7 Demo: Part A : Tables
The Basics of Tables
There are three basic elements which make up a table : the table itself, table rows - which run horizontally; and table data cells, which split the rows into individual units. The tags for these are:
Table: |
<table></table> |
Table Row: |
<tr></tr> |
Table Data: |
<td></td>
|
There also two other useful tags that are part of the 5 most common table elements. There is the Table Header element, which makes the text bold within a data cell and the Caption tag, which add a caption to your table - either above or below.
Table Header: |
<th></th> |
Caption: |
<caption></caption> |
Let's start with a simple table with two Table Rows that each have two Table Data Cells in it.
Here's the code:<table border="1">
<tr>
<td>
Data 1</td>
<td>
Data 2</td>
</tr>
<tr>
<td>
Data 3</td>
<td>
Data 4</td>
</tr>
</table>
This is what it looks like:
Data 1 | Data 2 |
Data 3 | Data 4 |
As you can see the first Table Row holds Table Data cells 1 and 2. The 2nd Table Row holds Table Data cells 3 and 4. Table rows always run horizontally. Columns, which run vertically, are created by stacking Table Rows.
Notice the border
attribute in the table tag. A value of "1" turns the border on. A value of "0" or eliminating this attribute turns the border off. The width of the border is specified in pixels.
Lets add some table headers and a caption to our table:
Here's the code:
<table border="1">
<caption>
This is a Caption</caption>
<tr>
<th>
Table Head 1</th>
<th>
Table Head 2</th>
</tr>
<tr>
<td>
Data 1</td>
<td>
Data 2</td>
</tr>
<tr>
<td>
Data 3</td>
<td>
Data 4</td>
</tr>
</table>
Table Head 1 | Table Head 2 |
---|---|
Data 1 | Data 2 |
Data 3 | Data 4 |
What do you think? Ready for more? Part B of Demo 7.
Go back to the Exercise 7 page.
© Claudia Faulk. Updated 7.20