HTML tables help organize data into rows and columns, making information easy to read and compare. They are useful for displaying schedules, price lists, product details, and more.
<table>, <tr>, <th>, and <td>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Luca</td>
<td>Rossi</td>
<td>24</td>
</tr>
<tr>
<td>Sophie</td>
<td>Dubois</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
<table> tag.<tr> defines a table row.<th> defines a table header cell (usually bold and centered).<td> defines a table data cell that holds actual content.<tr> represents one row containing <th> or <td> cells.Here is the list of all the tags used in table formation in HTML.
| Tag | Description |
|---|---|
<table> |
Defines the structure for organizing data in rows and columns within a web page. |
<tr> |
Represents a row within an HTML table containing individual cells. |
<th> |
Shows a table header cell that typically holds titles or headings. |
<td> |
Represents a standard data cell, holding content or data. |
<caption> |
Provides a title or description for the entire table. |
<thead> |
Defines the header section of a table, often containing column labels. |
<tbody> |
Represents the main content area of a table, separating it from the header or footer. |
<tfoot> |
Specifies the footer section of a table, typically holding summaries or totals. |
<col> |
Defines attributes for table columns that can be applied to multiple columns simultaneously. |
<colgroup> |
Groups together a set of columns in a table to which you can apply formatting or properties collectively. |
We use CSS (Cascading Style Sheets) to add styles such as borders, background colors, text alignments, and much more. Here are some basic styles to make your table look neater and more professional:
A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
font-size: 17px;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Lucas</td>
<td>Rossi</td>
<td>24</td>
</tr>
</table>
</body>
</html>
For borders to collapse into one clean border (rather than appearing double), add the CSS border-collapse property.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
font-size: 17px;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Sophie</td>
<td>Dubois</td>
</tr>
</table>
</body>
</html>
Cell padding specifies the space between the cell content and its borders. If we do not specify padding, the table cells will be displayed squished together.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
font-size: 17px;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
</tr>
</table>
</body>
</html>
By default, the table headings are bold and centered. To left-align the table headings, use the CSS text-align property.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td { padding: 20px; }
th {
text-align: left;
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
font-size: 17px;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Book Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Historical Fiction</td>
</tr>
</table>
</body>
</html>
Border spacing specifies the space between the cells. To set the border-spacing for a table, use the CSS border-spacing property (make sure border-collapse is NOT set to collapse).
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
font-size: 17px;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Book Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Fantasy</td>
</tr>
</table>
</body>
</html>
colspan)To make a cell span more than one column, use the colspan attribute.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Lucas Rossi</td>
<td>555-1234</td>
<td>555-5678</td>
</tr>
</table>
</body>
</html>
rowspan)To make a cell span more than one row, use the rowspan attribute.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
th {
font-family: 'Segoe UI', Verdana, sans-serif;
font-weight: normal;
}
td {
font-family: 'Segoe UI', Verdana, sans-serif;
line-height: 1.5;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Lucas Rossi</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-5678</td>
</tr>
</table>
</body>
</html>
To add a caption to a table, use the <caption> tag immediately after opening the <table> tag.
<table style="width:100%; border-collapse: collapse;">
<caption style="font-size: 13px; font-family: 'Segoe UI', Verdana, sans-serif; padding: 10px; font-weight: 500;">
Employee Details
</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Sophie</td>
<td>Dubois</td>
</tr>
</table>
A color can be added as a background in an HTML table using the CSS background-color property.
<table style="width:100%; background-color: #f2f2d1; border-collapse: collapse;">
<tr>
<th style="font-family: 'Segoe UI', Verdana, sans-serif; font-weight: normal; font-size: 17px; padding: 8px; border: 1px solid #ccc;">Firstname</th>
<th style="font-family: 'Segoe UI', Verdana, sans-serif; font-weight: normal; font-size: 17px; padding: 8px; border: 1px solid #ccc;">Lastname</th>
</tr>
<tr>
<td style="font-family: 'Segoe UI', Verdana, sans-serif; font-size: 16px; line-height: 1.5; padding: 8px; border: 1px solid #ccc;">Lucas</td>
<td style="font-family: 'Segoe UI', Verdana, sans-serif; font-size: 16px; line-height: 1.5; padding: 8px; border: 1px solid #ccc;">Rossi</td>
</tr>
</table>
Nesting tables simply means making a table inside another table. Nesting tables can lead to complex table layouts, which are visually interesting but have the potential of introducing HTML errors if tags are poorly structured.
<table border="1" bordercolor="black" style="font-family: 'Segoe UI', Verdana, sans-serif; font-size: 16px;">
<tr>
<td> First Column of Outer Table </td>
<td>
<table border="1" bordercolor="grey">
<tr><td> First row of Inner Table </td></tr>
<tr><td> Second row of Inner Table </td></tr>
</table>
</td>
</tr>
</table>
Which HTML tag is used to define a table header cell?