HTML Table Tag
The HTML table tag is used in tabular form (row * column) for displaying the data. A row can contain many columns.
With the help of < t >, < td >, and <th> elements, a table can be created to display the data in a tabular form.
In each table, the row of the table is defined by the < t > tag, the header of the table is defined by < th >, and the data of the table is defined by the < td > tag.
HTML tables are used for page layout manage, e.g. header section, navigation bar, body text, footer section, etc.
But div tag over table is recommended to manage page layout.
HTML Table Tags
| Tag | Description |
| <table> | It defines a table. |
| <tr> | Defines a row in the table. |
| <th> | Defines the header cell in tha table. |
| <td> | Defines the cell in tha table. |
| <caption> | Defines the caption of the table. |
| <col> | Use the < colgroup > element to specify the properties of the column for each column. |
| <colgroup> | In the formatting table, specifies the group of one or more columns. |
| <tbody> | It is used to group body content into a table. |
| <thead> | It is used to group the content of the header in a table. |
| <tfooter> | It is used to group the contents of the header into a table. |
HTML Table Example
Let's look at the table tag example in HTML. Output is displayed above.
<table> <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr> <tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr> <tr><td>Gunjan</td><td>Garg</td><td>22</td></tr> <tr><td>Swati</td><td>Sironi</td><td>25</td></tr> <tr><td>Chetna</td><td>Singh</td><td>26</td></tr> </table>
Code
<!DOCTYPE> <html> <body> <table> <table> <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr> <tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr> <tr><td>Gunjan</td><td>Garg</td><td>22</td></tr> <tr><td>Swati</td><td>Sironi</td><td>25</td></tr> <tr><td>Chetna</td><td>Singh</td><td>26</td></tr> </table> </body> </html>
Output
The html table above gives 5 rows and 3 columns = 5 * 3 = 15 values.
HTML Table with Border
There are two ways to set HTML tables border.
- By border attitude of table in HTML
- By border property in CSS
HMTL Border attribute
In HTML you can use the table tag border attribute to specify the boundary. But, it's not recommended now.
<!DOCTYPE> <html> <body> <table> <table> <table border ="1"><tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr> <tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr> <tr><td>Gunjan</td><td>Garg</td><td>22</td></tr> <tr><td>Swati</td><td>Sironi</td><td>25</td></tr> <tr><td>Chetna</td><td>Singh</td><td>26</td></tr> </table> </body> </html>
Output
CSS Border property
Now it's recommended that you use the CSS border property to specify the table border.
<!DOCTYPE>
<html>
<head>
<style> table, th, td { border: 1px solid black; } </style>
</head>
<body>
<table>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>
<tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr>
<tr><td>Gunjan</td><td>Garg</td><td>22</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>25</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>26</td></tr>
</table>
</body>
</html>
Output
In one border, you can break all borders with border-collapse properties. The border will collapse into one.
<!DOCTYPE>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style>
</head>
<body>
<table> <table> <table border ="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>
<tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr>
<tr><td>Gunjan</td><td>Garg</td><td>22</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>25</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>26</td></tr>
</table>
</body>
</html>
Output
HTML Table with cell padding
You can specify the padding for the table header and table data in two ways:
- The cellpadding attribute of the table in HTML
- By padding property in CSS
The HTML table tag cellpadding attribute is now obsolete. It's recommended that you use the CSS. So let's look at the CSS code.
<!DOCTYPE>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } </style>
</head>
<body>
<table>
<table>
<table border ="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>
<tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr>
<tr><td>Gunjan</td><td>Garg</td><td>22</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>25</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>26</td></tr>
</table>
</body>
</html>
Output
HTML Table width
You can use the CSS width property to specify the width of the HTML table. It can be defined in percentages or in pixels.
We can adjust the width of our table according to our requirements. The following example is the table with width to be displayed.
table{ width: 100%; }
Example
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style> table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; }
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr>
<tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr>
</table>
</body>
</html>
Output
HTML Table with colspan
If you want to make more than one column of a cell span, you can use the colspan attribute.
It divides one cell / row into multiple columns, and the number of columns depends on the value of the colspan attribute.
Let's see the two columns span the example.
CSS Code
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style>
HTML Code
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Mobile No.</th> </tr> <tr> <td>Vinod Sharma</td> <td>7656432112</td> <td>9555879135</td> </t> </table>
Example
<!DOCTYPE>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style>
</head>
<body>
<table style="width:100%">
<tr> <th>Name</th> <th colspan="2">Mobile No.</th> </tr>
<tr> <td>Vinod Sharma</td> <td>7656432112</td> <td>9555879135</td> </tr> </table>
</body>
</html>
Output
HTML Table with rowspan
You can use the rowspan attribute if you wish to make a cell span more than one row.
It breaks up a cell into multiple sections. The number of split rows will depend on the values in rowspan.
Let's take a look at the example that spans two rows.
CSS Code
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; }
</style>
HTML Code
<table> <tr><th>Name</th><td>Vinod Sharma</td></tr> <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table>
Example
<!DOCTYPE>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } </style>
</head>
<body>
<table>
<tr><th>Name</th><td>Vinod Sharma</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>
</body>
</html>
Output
HTML table with caption
The HTML caption is shown above the table. It must only be used after the table tag.
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Student
Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>30</td></tr>
<tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr>
<tr><td>Gunjan</td><td>Garg</td><td>22</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>25</td></tr>
</table>
</body>
</html>
Output
Styling HTML table even and odd cells
CSS Code
<!DOCTYPE>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#altertr:nth-child(even) { background-color: #eee; } table#altertr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } </style>
</head>
<body>
<table id="alter">
<tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>30</td></tr> <tr><td>Swati</td><td>Sironi</td><td>25</td></tr> <tr><td>Shivani</td><td>Agrawal</td><td>21</td></tr> <tr><td>Aman</td><td>Jain</td><td>23</td></tr>
</table>
</body>
</html>
Output
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
| <table> | Yes | Yes | Yes | Yes | Yes |