 |
| HTML can be used to structure tabular data |
Building tables in HTML works in a similar way to lists although at first they may seem more complicated. However if you take it step by step it is actually strictly logical - just like everything else in HTML. Tables use three main elements, <table> for table, <tr> for table row and <td> for table data
- The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
- <tr> stands for "table row" and starts and ends horizontal rows. Still logical.
- <th> stands for "table header" and is used within the first table row to set the table headings. Still logical.
- <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.
See the example below.
| Heading 1 | Heading 2 |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
This is a very basic example, but tables can be made more interesting by using attributes. For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.
| Heading 1 | Heading 2 |
|---|---|
| Cell 1 | Cell 2 |
| Info 3 | Info 4 |
Other attributes such as 'height', 'width', 'bgcolor', 'align' and 'valign' can also be used to edit the appearance of your table.
| Heading 1 | Heading 2 |
|---|---|
| Cell 1 | Cell 2 |
| Info 3 | Info 4 |
Try it yourself and experiment with different attributes to see what kinds of tables you can create using HTML.
