<< .. Go to : : Home : : Exercise 7 : : Demo 7A : : Demo 7B : : Demo 7C : : Demo 7D : : Demo 7E : : TAGS : : All Class Demos .. >>

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>

    This is a Caption

    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 6.

Go back to the Exercise 7 page.

© Claudia Faulk. Updated 6.18