Create a table in web pages using the HTML table tag. A table contains rows and columns and content in each cell. The table header is the top part of the table to show the heading for the table.
Syntax
|
1 2 3 4 5 6 7 |
<table> <tr> <td></td> .... </tr> .... </table> |
Example
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> |
Output
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
List of Table Tags
| Sr. No. | Tagname | Description |
|---|---|---|
| 1 | <table> | Use it to create a table. |
| 2 | <tr> | Used to create rows in a table. |
| 3 | <th> | Used to create header cells in a table. |
| 4 | <td> | Used to create a cells in each rows of a table. |
| 5 | <tbody> | Used to group the body content of a table |
| 6 | <thead> | Used to group the header content of a table |
| 7 | <tfooter> | Used to group the footer content of a table |
HTML Table Heading Tag
Table heading tag is defined using <th> tag. This tag can be use to show the table heading.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <th>heading1</th> <th>heading2</th> </tr> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
HTML Header, Body and Footer
As of websites, A table also contains header, body and footer parts. Header part contains the heading of the table, bodyu part contains the content part and foot contains the footer part of the table.
These three parts can be defined by using the below table tags
| Sr. No. | Tagname | Description |
|---|---|---|
| 1 | <thead> | Use to show the header part of table. |
| 2 | <tbody> | Use to show the main content of the table. |
| 3 | <tfoot> | Use to show the footer part of the table. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table> <thead> <tr> <th>heading1</th> <th>heading2</th> </tr> </thead> <tbody> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </tbody> <tfoot> <tr> <td>foot cell 1 of table</td> <td>foot cell 2 of table</td> </tr> </tfoot> </table> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
| foot cell 1 of table | foot cell 2 of table |
HTML table rowspan
If you want to merge two rows, you have to use rowspan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <tr> <th>heading 1</th> <th>heading 2</th> </tr> <tr> <td rowspan="2">row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column2</td> </tr> </table> |
Output
| heading 1 | heading 2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column2 |
HTML table colspan
If you want to merge two columns, you have to use colspan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <thead> <tr> <th>heading1</th> <th>heading2</th> </tr> </thead> <tbody> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td colspan="2">row2 with merged columns</td> </tr> </tbody> </table> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2 with merged columns | |
Table Attributes Cellspacing and Cellpadding
Cellspacing and cellpadding attributes are used to adjust white spaces inside a table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>heading1</th> <th>heading2</th> </tr> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
Cellspacing and cellpadding attributes are used to adjust white spaces inside a table.