HTML Tables can be used to arrange content on a web page. In the past, using tables was the only practical way to achieve a custom page layout. In today’s web page development, you have alternatives such as using div elements and CSS.
However, many web developers still prefer to use tables for customizing the layout of their pages. Tables may seem difficult at first, but after working through this tutorial and some practice, you will quickly become familiarized with them.
The table Element
A table is divided into rows (<tr> element), and each row is divided into cells (<td> element). The <td> element is used to store “table data”.
A <td> element can contain text and other HTML elements such as links, images, and even other tables. Here is an example of a basic table.
<table>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
</tr>
</table>Table Headers
Table headers can be used if you want to specify that a row in the table should be treated as a header. Header information in a table is defined with the <th> element.
Modern browsers apply different formatting to your header elements. Alternatively, you can use CSS to apply your own custom settings.
<table>
<tr>
<th>Col A</th>
<th>Col B</th>
</tr>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
</tr>
</table>Spanning rows and cells
Just as you would with a spreadsheet document, there will be instances where you need to span multiple rows or cells.
You can do so by using the rowspan and colspan attributes in the <td> element. Here is an example.
<table>
<tr>
<th>Col A</th>
<th>Col B</th>
<th>Col C</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>Padding and Spacing
You can use the cellpadding and cellspacing attributes to adjust the white space on your tables. Although using CSS is the preferred method.
Spacing will affect the distance between the cells, while padding affects the distance between cell borders and the content within the cell.
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
</tr>
</table>Table Captions
The <caption> element defines a table caption. This element must be inserted immediately after the starting <table> tag. You can specify only one caption per table. By default, the table caption will be center-aligned above a table.
However, you can use the CSS properties text-align and caption-side can be used to align and place the caption. Table captions are supported by all modern browsers. Here is an example.
<table>
<caption>Table #1</caption>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
</tr>
</table>Grouping Columns Together
The <colgroup> and <col> elements can be used to group columns in a table for formatting. This is helpful when you need to format one or more columns rather than applying a style for each cell in each row. Here is an example.
<table>
<colgroup style="background-color:yellow;"></colgroup>
<colgroup span="2" style="background-color:green;"></colgroup>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
<td>Cell 1C</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
<td>Cell 2C</td>
</tr>
</table> <table>
<colgroup>
<col style="background-color:yellow;" />
<col span="2" style="background-color:green;"/>
</colgroup>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
<td>Cell 1C</td>
</tr>
<tr>
<td>Cell 2A</td>
<td>Cell 2B</td>
<td>Cell 2C</td>
</tr>
</table>Table Headers, Body, and Footer
The <thead>, <tbody>, and <tfoot> elements can be used to group rows within a table, much like the colgroup and col elements. These elements establish a header, body, and footer section in your table.
Browsers can use these elements to treat each of these sections independently. Using these elements is also very helpful when formatting rows. Here is an example of its use.
<table>
<thead style="color:red;background-color:yellow;">
<tr>
<td>Product</td>
<td>Cost</td>
</tr>
</thead>
<tbody style="color:blue;">
<tr>
<td>Book</td>
<td>$20.00</td>
</tr>
<tr>
<td>Magazine</td>
<td>$5.00</td>
</tr>
</tbody>
<tfoot style="color:green;">
<tr>
<td>Total</td>
<td>$25.00</td>
</tr>
</tfoot>
</table> Tables appear to be a bit complicated when compared to other HTML elements. However, they are still very useful when you need to display data in an organized fashion.
