Table basics
A table is data (text and numbers) arranged in rows and columns.
All tables are defined by the <table> tag.
<table> <!-- table data goes here--> </table>In HTML tables are defined by rows which are stacked on top of each other. Table data is added left to right forming the columns.
Simple tables
A simple table can be created by defining each <tr> table row and then adding <td> table data for each cell. The first <td> table data will add a value in first column (left) and the last <td>table data will be added to the last column (right), each table row is closed using the </tr> table row closing tag.
<table> <tr> <td>Table data 1</td> <td>Table data 2</td> </tr> <tr> <td>Table data 3</td> <td>Table data 4</td> </tr></table>| Table data 1 | Table data 2 |
| Table data 3 | Table data 4 |
Table headers
Table header <th> defines a cell as header item.
Table headers are generally placed on the top row and side columns, but can be placed in any of the table cells.
<table><tr> <th>Table header 1</th> <th>Table header 2</th> <th>Table header 3</th></tr><tr><td>Table data 1</td><td>Table data 2</td><td>Table data 3</td></tr><tr><td>Table data 4</td><td>Table data 5</td><td>Table data 6</td></tr></table>| Table header 1 | Table header 2 | Table header 3 |
|---|---|---|
| Table data 1 | Table data 2 | Table data 3 |
| Table data 4 | Table data 5 | Table data 6 |
Table header, body and footer
Three areas of the table can be defined, table header <thead>, table body <tbody> and table footer <tfoot>.
Defining the table areas enables the browser to scroll the body of a table independently from the tables header and footer, which especially useful when tables have many rows of data.
| <thead> | defines the table header | |||
| <tbody> | defines the table body | |||
| <tfoot> | defines the table footer | |||
<table> <thead><tr><th>Table header 1</th><th>Table header 2</th><th>Table header 3</th></tr> </thead> <tbody><tr><tr><td>Table data 1</td><td>Table data 2</td><td>Table data 3</td></tr><tr><td>Table data 4</td><td>Table data 5</td><td>Table data 6</td></tr> </tbody> <tfoot><tr><td>Footer</td></tr> </foot></table>| Table header 1 | Table header 2 | Table header 3 |
|---|---|---|
| Table data 1 | Table data 2 | Table data 3 |
| Table data 4 | Table data 5 | Table data 6 |
| Footer |
Colspan and Rowspan
Column span <colspan> expands cells across multiple columns.
<table><thead><tr><th>Table header 1</th><th>Table header 2</th><th>Table header 3</th></tr></thead><tbody><tr><td colspan="2">This cell now spans 2 columns</td><td>Column 2</td></tr><tr><td>Column 1</td><td>Column 2</td><td>Column 3</td></tr></tbody></table>| Table header 1 | Table header 2 | Table header 3 |
|---|---|---|
| This cell now spans 2 columns | Column 2 | |
| Column 1 | Column 2 | Column 3 |
Row span <rowspan> expands cells across multiple rows.
<table><thead><tr><th>Table header 1</th><th>Table header 2</th><th>Table header 3</th></tr></thead><tbody><tr><td rowspan="2">This cell spans 2 rows</td><td>Column 2</td><td>Column 3</td></tr><tr><td>Column 1</td><td>Column 2</td></tr></tbody></table>| Table header 1 | Table header 2 | Table header 3 |
|---|---|---|
| This cell spans 2 rows | Column 2 | Column 3 |
| Column 1 | Column 2 |
Table captions
The table <caption> specifies the title or caption for the table and, if used, should be the first item added after the table tag.
<table> <caption>This is the table caption</caption><thead><tr><th>Table header 1</th><th>Table header 2</th></tr></thead><tbody><tr><tr><td>Table data 1</td><td>Table data 2</td></tr><tr><td>Table data 4</td><td>Table data 5</td></tr></tbody><tfoot><tr><td colspan="2"Footer</td></tr></foot></table>| Table header 1 | Table header 2 |
|---|---|
| Table data 1 | Table data 2 |
| Table data 4 | Table data 5 |
| Footer | |
Next step
HTML – 4 – Links