HTML Tables allow you to arrange data into rows and columns on a web page, making it easy to display information like schedules, statistics, or other structured data in a clear format.
1. What is an HTML Table
An HTML table is a way to organize and display data in rows and columns. It is created using the <table> element, which acts as a container for rows (<tr>), headers (<th>), and data cells (<td>). Tables are commonly used for displaying tabular data, such as schedules, pricing, or comparisons.
2. Tags Used in HTML Tables
Here are the key tags used to create and structure HTML tables:
<table>: The main container for the table.<tr>: Defines a table row.<th>: Defines a table header cell (bold and centered by default).<td>: Defines a table data cell.<caption>: Adds a title or description to the table.<thead>: Groups the header content of the table.<tbody>: Groups the body content of the table.<tfoot>: Groups the footer content of the table.<colgroup>: Specifies a group of columns for formatting.<col>: Specifies properties for individual columns within a<colgroup>.
3. Styling HTML Tables
Styling tables involves using CSS to enhance their appearance. Below are some common styling techniques with examples and outputs.
a. Adding a Border to an HTML Table
This example adds a border to the table and its cells.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Border</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table with Border</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
b. Adding Collapsed Borders in an HTML Table
This example merges adjacent borders into a single border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Collapsed Borders</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table with Collapsed Borders</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>c. Adding Cell Padding in an HTML Table
This example adds space inside the cells using the padding property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Cell Padding</title>
<style>
th, td {
padding: 10px;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table with Cell Padding</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>d. Adding Left Align Headings in an HTML Table
This example aligns the table headers to the left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Left-Aligned Headings</title>
<style>
th {
text-align: left;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table with Left-Aligned Headings</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>e. Adding Border Spacing in an HTML Table
This example adds space between cells using the border-spacing property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Border Spacing</title>
<style>
table {
border-spacing: 10px;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table with Border Spacing</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>f. Adding Cells that Span Many Columns in HTML Tables
This example uses the colspan attribute to make a cell span multiple columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Column Span</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table with Column Span</h2>
<table>
<tr>
<th colspan="2">Header Spanning 2 Columns</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>g. Adding Cells that Span Many Rows in HTML Tables
This example uses the rowspan attribute to make a cell span multiple rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Row Span</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table with Row Span</h2>
<table>
<tr>
<th rowspan="2">Header Spanning 2 Rows</th>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
</table>
</body>
</html>h. Adding a Caption in an HTML Table
This example adds a caption to the table using the <caption> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Caption</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table with Caption</h2>
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>i. Adding a Background Colour to the Table
This example adds a background color to the table and headers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Background Color</title>
<style>
table {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table with Background Color</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>j. Creating Nested Tables
This example demonstrates how to place a table inside another table cell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Nested Table</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>
<table>
<tr>
<td>Nested 1</td>
<td>Nested 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Conclusion
HTML tables are a powerful and versatile tool for organizing and displaying data in a structured, tabular format. By using the <table>, <tr>, <th>, and <td> tags, you can create tables that are both functional and visually appealing. Additionally, with the help of CSS, you can enhance the appearance of tables by adding borders, padding, alignment, background colors, and more.