HTML 11 💻 tables
Tables in HTML are used to display structured, tabular data in rows and columns. They are ideal for presenting information like product lists, schedules, pricing tables, and more.
Basic Table Structure
A table consists of rows (<tr>), which contain cells (<td> or <th>). The <th> elements define headers, and <td> elements contain data.
Basic Syntax:
<table>
<caption>Product list</caption>
<tr>
<th colspan="2">Product Name</th>
<th>Price</th>
</tr>
<tr>
<td>Product A</td>
<td>Product A</td>
<td>$10.99</td>
</tr>
<tr>
<td>Product B</td>
<td>Product B</td>
<td>$25.49</td>
</tr>
</table>Table Elements
| Element | Purpose | Example |
|---|---|---|
<table> | Defines a table | <table>...</table> |
<caption> | Adds a title to the table | <caption>Product List</caption> |
<tr> | Defines a table row | <tr>...</tr> |
<th> | Defines a header cell | <th>Name</th> |
<td> | Defines a data cell | <td>John</td> |
<colspan> | Merges columns horizontally | colspan="2" |
<rowspan> | Merges rows vertically | rowspan="3" |
Table Headers <th>
Header cells can be horizontal (top row) or vertical (first column).
Horizontal Headers (Default):
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</table>Vertical Headers:
<table>
<tr>
<th>Name</th>
<td>Alice</td>
<td>Bob</td>
</tr>
<tr>
<th>Age</th>
<td>25</td>
<td>30</td>
</tr>
<tr>
<th>City</th>
<td>New York</td>
<td>London</td>
</tr>
</table>Merging Cells
Colspan (Merge Columns):
<table>
<tr>
<th colspan="3">Employee Information</th>
</tr>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>IT</td>
<td>$60,000</td>
</tr>
</table>Rowspan (Merge Rows):
<table>
<tr>
<th>Name</th>
<td>John</td>
</tr>
<tr>
<th rowspan="2">Contact</th>
<td>john@example.com</td>
</tr>
<tr>
<td>+1 234-567-890</td>
</tr>
</table>Combined Colspan and Rowspan:
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact Details</th>
</tr>
<tr>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Alice</td>
<td>alice@email.com</td>
<td>555-1234</td>
</tr>
</table>Complete Table Examples
Example 1: Product Catalog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #007bff;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
caption {
font-size: 1.5em;
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML Tables</h1>
<!-- ====== EXAMPLE 1: BASIC PRODUCT TABLE ====== -->
<h2>1. Product Catalog</h2>
<table>
<caption>Product Catalog 2024</caption>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>P001</td>
<td>Wireless Mouse</td>
<td>Electronics</td>
<td>$29.99</td>
<td>45</td>
</tr>
<tr>
<td>P002</td>
<td>USB-C Cable</td>
<td>Accessories</td>
<td>$12.99</td>
<td>120</td>
</tr>
<tr>
<td>P003</td>
<td>Bluetooth Speaker</td>
<td>Electronics</td>
<td>$49.99</td>
<td>18</td>
</tr>
<tr>
<td>P004</td>
<td>Notebook Set</td>
<td>Stationery</td>
<td>$8.50</td>
<td>200</td>
</tr>
</table>
<br>
<!-- ====== EXAMPLE 2: EMPLOYEE DATA ====== -->
<h2>2. Employee Directory</h2>
<table>
<caption>Employee Directory</caption>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>E101</td>
<td>Sarah Johnson</td>
<td>Marketing</td>
<td>Manager</td>
<td>$75,000</td>
</tr>
<tr>
<td>E102</td>
<td>Mike Davis</td>
<td>IT</td>
<td>Developer</td>
<td>$68,000</td>
</tr>
<tr>
<td>E103</td>
<td>Emily Clark</td>
<td>HR</td>
<td>Recruiter</td>
<td>$55,000</td>
</tr>
</table>
<br>
<!-- ====== EXAMPLE 3: MERGING CELLS ====== -->
<h2>3. Merging Cells (Colspan & Rowspan)</h2>
<table>
<caption>Student Course Schedule</caption>
<tr>
<th colspan="4">Spring 2025 Semester</th>
</tr>
<tr>
<th>Student Name</th>
<th>Course</th>
<th>Instructor</th>
<th>Credits</th>
</tr>
<tr>
<td rowspan="3">Alice Smith</td>
<td>Mathematics 101</td>
<td>Dr. Brown</td>
<td>3</td>
</tr>
<tr>
<td>Physics 201</td>
<td>Prof. Wilson</td>
<td>4</td>
</tr>
<tr>
<td>Computer Science 101</td>
<td>Dr. Lee</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">Bob Johnson</td>
<td>English 101</td>
<td>Prof. Taylor</td>
<td>3</td>
</tr>
<tr>
<td>History 201</td>
<td>Dr. Adams</td>
<td>3</td>
</tr>
</table>
<br>
<!-- ====== EXAMPLE 4: VERTICAL HEADERS ====== -->
<h2>4. Vertical Headers</h2>
<table>
<caption>Weekly Weather Forecast</caption>
<tr>
<th>Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>Temperature (°F)</th>
<td>72°</td>
<td>68°</td>
<td>75°</td>
<td>70°</td>
<td>73°</td>
</tr>
<tr>
<th>Conditions</th>
<td>☀️ Sunny</td>
<td>⛅ Cloudy</td>
<td>☀️ Sunny</td>
<td>🌧️ Rainy</td>
<td>☀️ Sunny</td>
</tr>
<tr>
<th>Humidity</th>
<td>45%</td>
<td>60%</td>
<td>40%</td>
<td>80%</td>
<td>50%</td>
</tr>
</table>
<br>
<!-- ====== EXAMPLE 5: COMPLEX TABLE ====== -->
<h2>5. Complex Table (Monthly Sales Report)</h2>
<table>
<caption>Monthly Sales Report - Q1 2024</caption>
<tr>
<th rowspan="2">Product</th>
<th colspan="3">January</th>
<th colspan="3">February</th>
<th colspan="3">March</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Units</th>
<th>Revenue</th>
<th>Profit</th>
<th>Units</th>
<th>Revenue</th>
<th>Profit</th>
<th>Units</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
<tr>
<td>Product A</td>
<td>150</td>
<td>$4,500</td>
<td>$900</td>
<td>180</td>
<td>$5,400</td>
<td>$1,080</td>
<td>200</td>
<td>$6,000</td>
<td>$1,200</td>
<td>$15,900</td>
</tr>
<tr>
<td>Product B</td>
<td>80</td>
<td>$3,200</td>
<td>$640</td>
<td>90</td>
<td>$3,600</td>
<td>$720</td>
<td>100</td>
<td>$4,000</td>
<td>$800</td>
<td>$10,800</td>
</tr>
<tr>
<td>Product C</td>
<td>50</td>
<td>$1,500</td>
<td>$300</td>
<td>60</td>
<td>$1,800</td>
<td>$360</td>
<td>75</td>
<td>$2,250</td>
<td>$450</td>
<td>$5,550</td>
</tr>
<tr>
<th>Total</th>
<th>280</th>
<th>$9,200</th>
<th>$1,840</th>
<th>330</th>
<th>$10,800</th>
<th>$2,160</th>
<th>375</th>
<th>$12,250</th>
<th>$2,450</th>
<th>$32,250</th>
</tr>
</table>
<br>
<!-- ====== EXAMPLE 6: CALENDAR ====== -->
<h2>6. Calendar</h2>
<table>
<caption>March 2025</caption>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>Quick Reference
| Element | Purpose | Example |
|---|---|---|
<table> | Table container | <table> |
<caption> | Table title | <caption>Prices</caption> |
<tr> | Table row | <tr> |
<th> | Header cell (bold, centered) | <th>Name</th> |
<td> | Data cell | <td>John</td> |
colspan | Merge columns | colspan="2" |
rowspan | Merge rows | rowspan="3" |
Best Practices
✅ Do This:
<!-- Use <th> for headers -->
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<!-- Use <caption> for accessibility -->
<caption>Employee List</caption>
<!-- Use proper structure -->
<table>
<caption>Data</caption>
<tr>...</tr>
</table>❌ Don’t Do This:
<!-- Don't use <td> for headers -->
<tr>
<td><strong>Name</strong></td>
<td><strong>Age</strong></td>
</tr>
<!-- Don't use tables for layout -->
<table>
<tr>
<td>Header</td>
</tr>
</table>Pro Tip: Use the <thead>, <tbody>, and <tfoot> elements to structure complex tables for better readability and accessibility. These elements group header, body, and footer rows.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
