A table in HTML is a structured layout used to display data in rows and columns. It works just like an Excel sheet where each cell holds a value or information.
HTML tables tag are useful for presenting data like, Student marksheets, Product prices, Employee records, Timetables, Comparison charts.
To create a table, HTML uses special tags such as <table>, <tr>, <th>, and <td>.
Basic Structure of an HTML Table
Every HTML table starts with a <table> element, and inside it, we define rows (<tr>) and cells (<th> for header, <td> for data).
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>The <th> (table header) text is bold and center-aligned by default, while <td> (table data) contains normal text.
1. Table Borders
By default, tables have no visible border. To make them visible, you can use the border attribute or CSS styling.
Using HTML Attribute:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>22</td>
</tr>
</table>Note: The border attribute is old HTML style. Modern practice is to use CSS.
Using CSS:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>💡Tip: border-collapse: collapse; removes double borders between cells for a clean look.
2. Table Sizes
You can control the table width and height using the width and height attributes or CSS.
Example:
<table border="1" width="70%" height="150">
<tr>
<th>Language</th>
<th>Popularity</th>
</tr>
<tr>
<td>HTML</td>
<td>High</td>
</tr>
</table>Table width covers 70% of the page.
Using CSS
Example:
<style>
table {
width: 80%;
height: auto;
}
</style>💡 Tip: Use percentage-based width for responsive tables (mobile-friendly design).
3. Table Headers
The header cells are created using the <th> tag. They define titles for each column and make data easier to understand.
Example:
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$800</td>
<td>Available</td>
</tr>
</table>💡 SEO Tip: Table headers (<th>) help search engines understand your data more effectively improving accessibility and ranking.
4. Padding and Spacing
To make table content more readable, you can add padding and spacing.
- cellpadding – Adds space inside a cell (between text and border)
- cellspacing – Adds space between cells
Example:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Riya</td>
<td>Ahmedabad</td>
</tr>
</table>More spacing inside and between table cells.
Using CSS:
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
th, td {
padding: 8px;
}
</style>💡 Tip: Prefer CSS (padding, border-spacing) for modern browsers.
5. Colspan and Rowspan
These attributes help merge multiple cells either horizontally (colspan) or vertically (rowspan).
Colspan (merge columns):
<table border="1">
<tr>
<th colspan="2">Employee Info</th>
</tr>
<tr>
<td>Name</td>
<td>Raj</td>
</tr>
</table>Rowspan (merge rows):
<table border="1">
<tr>
<th rowspan="2">Department</th>
<td>HR</td>
</tr>
<tr>
<td>Finance</td>
</tr>
</table>💡 Use Case: Timetables, reports, or grouped data layouts.
6. Table Styling
You can make your tables look more beautiful using CSS styles. Modern websites always style tables using colors, padding, and hover effects.
Example:
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px 0;
}
th, td {
border: 1px solid #888;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
<table>
<tr>
<th>City</th>
<th>Population</th>
</tr>
<tr>
<td>Delhi</td>
<td>19M</td>
</tr>
<tr>
<td>Mumbai</td>
<td>21M</td>
</tr>
</table>💡 Pro Tip: Add hover effects (tr:hover) to make tables interactive and professional.
7. Table Colgroup and Col
When you want to apply styles to specific columns, use <colgroup> and <col> tags. This is very useful for highlighting entire columns.
Example:
<table border="1">
<colgroup>
<col style="background-color:#f2f2f2;">
<col style="background-color:#d1f7d1;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ravi</td>
<td>92</td>
</tr>
<tr>
<td>Priya</td>
<td>89</td>
</tr>
</table>💡 Use Case: Highlight marks, costs, or status columns easily.
8. Table Caption
A caption gives a short title or description for your table. It helps users (and search engines) understand what data the table shows.
Example:
<table border="1">
<caption>Employee List</caption>
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>Rohan</td>
<td>IT</td>
</tr>
</table>💡 Tip: Place <caption> immediately after the <table> tag.
9. Full HTML Table Example (All Features Combined)
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables – Full Example</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
caption {
caption-side: top;
font-weight: bold;
padding: 10px;
}
th, td {
border: 1px solid #777;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h2 style="text-align:center;">HTML Tables – Complete Example</h2>
<table>
<caption>Student Report Card</caption>
<colgroup>
<col style="background-color:#fff;">
<col style="background-color:#eaf0ff;">
<col style="background-color:#eaffea;">
</colgroup>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Rahul</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Priya</td>
<td>Science</td>
<td>89</td>
</tr>
<tr>
<td>Arjun</td>
<td>English</td>
<td>92</td>
</tr>
</table>
</body>
</html>A beautiful, professional-looking table with borders, alternating colors, hover effects, caption, and column styling.
- <table> – Defines a table
- <tr> – Table row
- <th> – Header cell (bold)
- <td> – Data cell
- <caption> – Table title
- <colgroup> – Styles columns
- colspan – Merges columns
- rowspan – Merges rows