{Quality Online Education Since 2009}
 


HTML 5 Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Tables may seem difficult at first, but after working through this, you'll see how they aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take some getting used to. Here's how to make a table.

Example:
<table border="1">

<tr>
    <td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr>

</table>
Output:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Example:
<table border="1"> 

<tr>
    <td>Row 1, cell 1</td><td>Row 1, cell 2</td>
</tr>

</table>

Headings in a Table

Headings in a table are defined with the <th> tag. Example:

<table border="1">  

<tr>  
    <th>Heading</th> 
    <th>Another Heading</th> 
</tr>  
<tr>
    <td>row 1, cell 1</td><td>row 1, cell 2</td> 
</tr> 
<tr>
    <td>row 2, cell 1</td><td>row 2, cell 2</td> 
</tr> 

</table>
Output:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers. Example:

<table border="1"> 
 
<tr>
    <td>row 1, cell 1</td><td>row 1, cell 2</td> 
</tr>  
<tr>
    <td>row 2, cell 1</td><td></td>  
</tr> 

</table>
Output:
row 1, cell 1 row 1, cell 2
row 2, cell 1

Note:

That the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).


« Previous Chapter
HTML Links
Next Chapter »
HTML Lists