HTML Table Tags
HTML Table tag is used to display tabular data.
Lets start with the basic syntax for tables.
Example
<table border="1"> <tr> <td>Row1,Column1</td> <td>Row1,Column2</td> </tr> <tr> <td>Row2,Column1</td> <td>Row2,Column2</td> </tr> </table>
Preview
The border attribute of the <table> tag draws a border around the table, without the border attribute only the data will be displayed.
The tags of table is explained below using table.
I used CSS to style the table below, the table in the above example will be displayed normally.
| Opening Tag | Closing Tag | Description |
| <table> | </table> | Marks the start and end of the table |
| <tr> | </tr> | Marks the start and end of the table row |
| <td> | </td> | Marks the start and end of a single cell |
Table Tags
Example
<table border="1"> <caption>Table Tags</caption> <thead> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> </tr> </thead> <tr> <th>Row2-Column1</th> <th>Row2-Column2</th> <th>Row2-Column3</th> </tr> <tr> <td>Row3,Column1</td> <td>Row3,Column2</td> <td>Row3,Column3</td> </tr> <tr> <td>Row4,Column1</td> <td colspan="2">Row4,Column2</td> </tr> <tr> <td rowspan="2">Row5,Column1</td> <td>Row5,Column2</td> <td>Row5,Column3</td> </tr> <tr> <td>Row6,Column2</td> <td>Row6,Column3</td> </tr> <tfoot> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> </tr> </tfoot> </table>
Preview
The tags of table is explained below using table.
| Opening Tag | Closing Tag | Description |
| <caption> | </caption> | It defines the caption of the table and should be specified right after <table> tag. The value will appear above the table in the browser as default. |
| <thead> | </thead> | It is the table header, it will appear as the first row no matter where you write this code inside the <table> </table> tags. |
| <tfoot> | </tfoot> | It is the table footer, it will appear as the last row no matter where you write this code inside the <table> </table> tags. |
| <th> | </th> | It is also the table header, the difference is that it will appear wherever you want and will appear in bold. |
Colspan Attribute: It is same as combining two or more columns together, try the code for practical experience.
Rowspan Attribute: It is same as combining two or more rows together, try the code for practical experience. If you need more table tag attributes, click this link HTML Table Attribute
