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.
The syntax for table is
1 2 3 4 5 6 7 | <table> <tr> <td></td> .... </tr> .... </table> |
For Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>Table rows and colums</title> </head> <body> <table> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> </body> </html> |
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 tag Rows and Columns
Table rows can be display by using start tag <tr> and end tag </tr>. Inside it we use start cell tag <td> and end cell </td> to display cells of each rows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>HTML Table rows and colums</title> </head> <body> <table> <tr> <td>row1, column1</td> <td>row1, column2</td> </tr> <tr> <td>row2, column1</td> <td>row2, column2</td> </tr> </table> </body> </html> |
Output
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
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 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <title>HTML Table rows and colums</title> </head> <body> <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> </body> </html> |
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 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title>HTML Table heading, body and footer</title> </head> <body> <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> </body> </html> |
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 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <title>HTML Table rows and colums</title> </head> <body> <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> </body> </html> |
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 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>HTML Table rows and colums</title> </head> <body> <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> </body> </html> |
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 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <title>HTML Table rows and colums</title> </head> <body> <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> </body> </html> |
Output
| heading1 | heading2 |
|---|---|
| row1, column1 | row1, column2 |
| row2, column1 | row2, column2 |
Cellspacing and cellpadding attributes are used to adjust white spaces inside a table.