Web developers can put data into rows and columns using HTML tables.
Table in HTML
The HTML table tag shows data in a table format (row by column). A row can have more than one column.
With the help of the tr>, td>, and th> elements, we can use the table> element to make a table that shows data in a table format.
In each table, the tr> tag defines the table row, the th> tag defines the table header, and the td> tag defines the table data.
HTML tables are used to control the layout of a page, such as the header, navigation bar, main content, footer, etc. But you should use a div tag instead of a table to control how the page looks.
HTML Table Tags
<table>
What a table is.
<th>
Describes a table’s header cell.
<tr>
Explains what a table row is.
<td>
Explains what a table cell is.
<caption>
shows what a table caption is.
<colgroup>
Sets the style for a group of one or more columns in a table.
<col>
Sets the column properties for each column in a colgroup> element.
<thead>
Table header content is grouped.
<tbody>
Makes a table with the body content
<tfoot>
Puts the content of the footer in a table.
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <tr> | Defines a row in a table |
| <th> | Defines a header cell in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines the table caption. |
| <colgroup> | Specifies a group of one or more columns in a table for formatting. |
| <col> | col is used with <colgroup> element to specify column properties for each column. |
| <tbody> | Used to group the body content in a table. |
| <thead> | Used to group the header content in a table. |
| <tfooter> | Used to group the footer content in a table. |
Table in HTML with a Border
There are two ways to tell HTML tables what kind of border to use.
- By the table’s border attribute in HTML
- By using the CSS border property
Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body><h2>HTML table basic example</h2>
<table style=”width:100%”>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>Germany</td>
</tr>
<tr>
<td>1</td>
<td>Shyam</td>
<td>Mexico</td>
</tr>
</table><p>To make the example better, we have added borders to the table.</p>
</body>
</html>
Output
HTML Table with with cell padding
There are two ways to set the padding for a table header and table data:
- By using the cellpadding attribute of an HTML table
- By using the CSS padding property
The HTML table tag’s cellpadding attribute is no longer used. The best thing to do is to use CSS. So, let’s look at CSS’s code.
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><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>
Output
Table width in HTML:
The CSS width property lets us set the width of an HTML table. It can be given as a number of pixels or a percentage.
We can adjust our table width as per our requirement. Here’s an example of how to show a table with its width.
Example
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 3px solid orange;
padding: 15px;
}</style>
</head>
<body>
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>2 one</td>
<td>2 two</td>
<td>2 three</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
Output
Using colspan in an HTML table
You can use the colspan attribute to make a cell cover more than one column.
It will split one cell/row into more than one column, with the number of columns depending on the value of the colspan attribute.
Let’s look at the example that goes across both columns.
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″>Education</th>
</tr>
<tr>
<td>Ram</td>
<td>B.tech</td>
<td>M.tech</td>
</tr>
</table>
</body>
</html>
Output
Adding rowspan to an HTML table
You can use the rowspan attribute to make a cell cover more than one row.
It splits a cell into more than one row. rowspan values determine how many rows will be split.
Let’s look at the one that goes across two rows.
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>Ram</td></tr>
<tr><th rowspan=”2″>Education</th><td>B.tech</td></tr>
<tr><td>M.tech</td></tr>
</table>
</body>
</html>
Output
Table in HTML with caption
Above the table, the HTML caption is shown. It can only be used after the table tag.
Example
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Student Sheet</caption>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>
Output
How to style even and odd cells in an HTML table
Using different CSS properties in your table, you can also make different kinds of tables.
Example
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #ddd;
}
table#alter tr:nth-child(odd) {
background-color: #f1f1f1;
}
table#alter th {
color: white;
background-color: black;
}
</style>
</head>
<body>
<table id=”alter”>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>
Output
