Tables

Tables are a very common and are used quite often. Tables are a great way to display information, which is their general purpose. Tables are also used for creating a layout for a web page, and can be an easy way of obtaining a certain appearance. Tables by default will vertically center / align the elements contained within. Tables are also 'block' elements and will create line breaks before / after itself. A table uses multiple tags to make up itself.

How to Use Tables

Tables are always defined with <table> and closed with </table>. Within these tags, are other tags making up the table rows and cells. <tr> defines a table row, and <td> defines a table cell. Below is a simple example of a table.

<table border="1" cellpadding="5">
<tr>
<td><b>name</b></td>
<td><b>age</b></td>
</tr>
<tr>
<td>dave</td>
<td>20</td>
</tr>
</table>

Notice that in the example we used two attributes, which will be explained later. For now we will focus on the elements. Tables generally should have the same amount of cells in each row. The table above only has two rows, you could specify as many as you need, as well as cells per row. Also note that a table cell can contain its own unique XHTML or HTML code, in the example we used the bold tag, but you could potentially use almost any element.

Other Table Tags

In the previous example we used the bold element to create the appearance of a header, there is a tag that could be included in a table in place of what we have done. This example will show the use of the <th> or 'Table Header' tag.

<table border="1" cellpadding="5">
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>dave</td>
<td>20</td>
</tr>
</table>

The results of both previous examples should be almost identical in most browswers. Tables do have three more tags that can be optionally used. These tags are <thead>, <tbody>, and <tfoot>. If you decide to use one of these tags you must use them all. Note that Internet Explorer has been known not handel these tags very well.

<table border="1" cellpadding="5">
<thead>
<tr>
<td colspan="2">Our Table Header</td>
</tr>
</thead>
<tbody>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>dave</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Our Table Footer</td>
</tr>
</tfoot>
</table>

Notice in this last example our use of the colspan attribute. In a table, there is an invisible number of columns created, which will be equal to the number of data cells you create in each table row. If you create more data cells in one row and less in another, the table will have the same amount of columns as the row with the largest amount of data cells. This can be modified using the colspan attribute, making a datacell span more than one column. By default, any table cell will span one column.

Attributes by Tag

<table>

<tr>

<td> & <th>

<thead>, <tbody> & <tfoot>