115A T6: HTML Tables

Introduction

HTML tables are used to represent data in a tabular format. Because HTML is a free flowing language, meaning that it will place all of your elements wherever it can fit them, in the past, Web page designers wanting to specify exactly how things are laid out on a page, would use HTML tables for this purpose. This positioning technique is now frowned upon, in fact it is pretty much forbidden. It is now recommended that you only use tables for displaying tabular data and not to position or align specific elements on a page. The technique of positioning or aligning elements on a page using tables, especially by nesting tables, is not recommended because it causes the page to load slower in a Web browser than if you used CSS positioning to accomplish the same task.

⇑ Table of Contents

Basic Table Elements

An HTML table is like a spreadsheet or a table in a database. That is, it consists of rows and columns. Lets take a look at a simple table.

<table>
    <tr>
        <td>Dorothy</td> <td>Judy Garland </td>
    </tr>
    <tr>
        <td>Scarecrow</td> <td>Ray Bolger </td>
    </tr>
    <tr>
        <td>The Tin Man</td> <td>Jack Haley </td>
    </tr>
    <tr>
        <td>Cowardly Lion</td> <td>Bert Lahr </td>
    </tr>
</table>

Click here to see the code run!

The above table uses the basic three tags that all tables consist of

<table> creates the table.
<tr> (Table Row) defines each row of the table.
<td> (Table Data) defines each cell (column) of the table.

Notice how the table data is encapsulated in the <td> tags (the table cells) and each cell is encapsulated in a <tr> tag (the table rows) and the table rows are encapsulated by the <table> tag.

⇑ Table of Contents

Table Borders

In legacy tables, a border attribute was used to add borders to the table and its cells. In HTML 5 the border attribute has been deprecated and borders are added using the CSS border property as shown below.

<table style="border:2px solid black;">
    <tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
    <tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
    <tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
    <tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

You can set the border to be any width, style, or color that you would like. If you want the table cells to have borders then you would have to add border styling to the <td> elements.

<table style="border: 2px solid black;">
    <tr>
        <td style="border:2px solid black;">Dorothy</td>
        <td style="border:2px solid black;">Judy Garland </td>
    </tr>
    <tr>
        <td style="border:2px solid black;">Scarecrow</td>
        <td style="border:2px solid black;">Ray Bolger </td>
    </tr>
    <tr>
        <td style="border: 2px solid black;">The Tin Man</td>
        <td style="border: 2px solid black;">Jack Haley </td>
    </tr>
    <tr>
        <td style="border: 2px solid black;">Cowardly Lion</td>
        <td style="border: 2px solid black;">Bert Lahr </td>
    </tr>
    </table>

Click here to see the code run!

Of course you don't have to use inline styles to style your table elements, you can also embed style rules in the <head> section of the HTML document containing the table(s) or in an external style sheet linked to the HTML document.

<head>
    <style>
        table, td {border: 2px solid black;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="border: 2px solid black;">Dorothy</td>
            <td style="border: 2px solid black;">Judy Garland </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">Scarecrow</td>
            <td style="border: 2px solid black;">Ray Bolger </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">The Tin Man</td>
            <td style="border: 2px solid black;">Jack Haley </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">Cowardly Lion</td>
            <td style="border: 2px solid black;">Bert Lahr </td>
        </tr>
    </table>
</body>

border-collapse

You may have noticed, in the last two examples, that adding the border property to both the <table> element and the cells, creates what appears to be a double border around the table cells. To fix this issue, you can add a border-collapse property to the CSS for the table element.

<head>
    <style>
         table, td {
            border: 2px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="border: 2px solid black;">Dorothy</td>
            <td style="border: 2px solid black;">Judy Garland </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">Scarecrow</td>
            <td style="border: 2px solid black;">Ray Bolger </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">The Tin Man</td>
            <td style="border: 2px solid black;">Jack Haley </td>
        </tr>
        <tr>
            <td style="border: 2px solid black;">Cowardly Lion</td>
            <td style="border: 2px solid black;">Bert Lahr </td>
        </tr>
    </table>
</body>

Click here to see the code run!

⇑ Table of Contents

Header Cells

There may be times when you want to put a heading above a row or a column. The example so far just seems like a list, it doesn't tell us anything about the data. We can fix this by adding a header. This can be accomplished using the <th> tag.

<table>
    <tr><th>OZ Characters</th><th>Cast</th></tr>
    <tr><td>Dorothy</td><td>Judy Garland</td></tr>
    <tr><td>Scarecrow</td><td>Ray Bolger</td></tr>
    <tr><td>The Tin Man</td><td>Jack Haley</td></tr>
    <tr><td>Cowardly Lion</td><td>Bert Lahr</td></tr>
</table>

Click here to see the code run!

<th> can be used to create headers for either rows or columns, or both.

<table>
    <tr>
        <td>Day/Time</td>
        <th>10 am - noon</th>
        <th>noon - 2 pm</th>
        <th>2 pm - 4 pm</th>
    </tr>
    <tr>
        <th>Monday</th>
        <td>CSIS 113A </td>
        <td>CSIS 116A </td>
        <td>CSIS 101 </td>
    </tr>
    <tr>
        <th>Wednesday</th>
        <td>CSIS 113A </td>
        <td>CSIS 116A </td>
        <td>CSIS 101.</td>
    </tr>
    <tr>
        <th>Friday</th>
        <td>CSIS 115Ac</td>
        <td>CAPP 060</td>
        <td>ENGR 153 </td>
    </tr>
</table>

creates a table which uses <th...> to head both rows and columns

Click here to see the code run!

⇑ Table of Contents

border-spacing

By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use border-spacing and padding

Lets add border-spacing so that you can see the affect.

<head>
    <style>
    table th, td {border:1px solid black;}
    table {border-collapse:separate; border-spacing:50px;}
    </style> 
</head>
<body> 
    <table>      
        <tr><th>OZ Characters</th> <th>Cast</th></tr>
        <tr><td>Dorothy</td> <td>Judy Garland</td> </tr>
        <tr><td>Scarecrow</td> <td>Ray Bolger</td> </tr>
        <tr><td>The Tin Man</td> <td>Jack Haley</td> </tr>
        <tr><td>Cowardly Lion</td> <td>Bert Lahr</td> </tr>
        </table>
</body>

Click here to see the code run!

Here is another example of border-spacing, this time assigning two values, the first setting the horizontal spacing to 10px and the second assigning 50px to the vertical spacing.

<head>
    <style>
    table th, td {border:1px solid black;}
    table {border-collapse:separate; border-spacing:10px 50px;}
    </style> 
</head>
<body> 
    <table>      
        <tr><th>OZ Characters</th> <th>Cast</th>></tr>
        <tr><td>Dorothy</td> <td>Judy Garland</td> </tr>
        <tr><td>Scarecrow</td> <td>Ray Bolger</td> </tr>
        <tr><td>The Tin Man</td> <td>Jack Haley</td> </tr>
        <tr><td>Cowardly Lion</td> <td>Bert Lahr</td> </tr>
        </table>
</body>

Click here to see the code run!

Cell Padding

In order to implement space between the contents of the cell and the cell wall, you need to assign a padding value to your cell elements.

<head>
    <style>
    table th, td {border:1px solid black;}
    th, td {padding:50px;}
    </style> 
</head>
<body> 
    <table>      
        <tr><th>OZ Characters</th> <th>Cast</th> </tr>
        <tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
        <tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
        <tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
        <tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
        </table>
</body>

Click here to see the code run!

colspan

Table cells can span across more than one column or row. The attributes colspan ("how many across") and rowspan ("how many down") indicate how many columns or rows a cell should take up.

For example, we might want to put a title across our table. We could simply do it with a colspan attribute

<table border=2 cellpadding=4 cellspacing=4 >
      <tr bgcolor="#99ccff" ><th colspan = 2>Wizard Of OZ Cast</th> </tr>
      <tr> <th>OZ Characters</th> <th>Cast</th> </tr>
      <tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
      <tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
      <tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
      <tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
    </table>

Click here to see the code run!

In the above example, we use the th tag so that the text will center in the column but the colspan tag can be directly added to the tr tag.

⇑ Table of Contents

rowspan

rowspan sets how many rows a cell spans. rowspan can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders.

<table border=2 cellpadding=4>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Cast</th>
<td>Dorothy</td> <td>Judy Garland</td>
</tr>
<tr>
<td>Scarecrow</td> <td>Ray Bolger</td> 
</tr>
<tr>
<td>The Tin Man</td> <td>Jack Haley</td>
</tr>
<tr>
<td>Cowardly Lion</td> <td>Bert Lahr</td>
</tr>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Crew</th>
<td>George Bassman</td> <td>Vocal Arrangements</td>
</tr>
<tr>
<td>Pop Arnold</td> <td>Key Grip</td>
</tr>
<tr>
<td>Stafford Campbell</td> <td>Stand-in Scarecrow</td>
</tr>
<tr>
<td>Charles Chic</td> <td>Negative Cutter</td>
</tr>
</table>

Click here to see the code run!

Lets put it all together using both rowspan and colspan

<table border=2 cellpadding=4>
<tr bgcolor="#ff3333"><TH colspan = 3>OZ Cast And Crew</th></tr>
<tr>
<th rowspan=4 BGCOLOR="#99CCFF">Cast</th>
<td>Dorothy</td> <td>Judy Garland</td>
</tr>
<tr>
<td>Scarecrow</td> <td>Ray Bolger</td> 
</tr>
<tr>
<td>The Tin Man</td> <td>Jack Haley</td>
</tr>
<tr>
<td>Cowardly Lion</td> <td>Bert Lahr</td>
</tr>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Crew</th>
<td>George Bassman</td> <td>Vocal Arrangements</td>
</tr>
<tr>
<td>Pop Arnold</td> <td>Key Grip</td>
</tr>
<tr>
<td>Stafford Campbell</td> <td>Stand-in Scarecrow</td>
</tr>
<tr>
<td>Charles Chic</td> <td>Negative Cutter</td>
</tr>
</table>

Click here to see the code run!

⇑ Table of Contents

Table Sections

Table sections can be used to group table content.

thead

The thead element is to group header content in an HTML table.thead is used in conjunction with the tbody and tfoot elements to specify each part of a table (header, body, footer).

tbody

Table sections can be used to group table content.

tfoot

Table sections can be used to group table content.

⇑ Table of Contents

Adding a Caption

Table sections can be used to group table content.

⇑ Table of Contents

colgroup

Table sections can be used to group table content.

Tutorial 6: HTML Tables

Introduction

Basic Table Elements

Table Borders

border-collapse

Header Cells

border-spacing

Cell Padding

colspan

rowspan

Table Sections

thead

tbody

tfoot

Adding a Caption

colgroup