5.0 Tables
Another core HTML element, tables are very useful tools for organising and displaying tabular data: in other words, data that is presented in rows and columns.
There are four basic tags involved (which incidentally are displayed here using a table):
| Tag | Purpose |
|---|---|
| <table> | To open and close a table |
| <tr> | To open and close a table row |
| <th> | To open and close a table header cell |
| <td> | To open and close a table data cell |
Header cells contains header information whereas data cells contain standard data. By default, text in a th element is bold and centered and text in a td element is regular and left-aligned, and take note that it isn't always necessary to use th. Take a look at the simple example below to see how a basic table is laid out:
<table> <tr> <th>Cell 1</th> <th>Cell 2</th> <th>Cell 3</th> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table>
Table headers and table data elements are entered between table rows. The content for the cells are entered between the th and td tags. This table would look like this in a browser:
| Cell 1 | Cell 2 | Cell 3 |
|---|---|---|
| Cell 4 | Cell 5 | Cell 6 |
Like when starting with most elements in HTML, this looks pretty basic right now but stick with it. Tables can be improved and styled using attributes, which will be dealt with shortly.