HTML Tutorial: HTML Tables
Learn how to create tables, add rows, columns, headers, and style them with colors
Tables organize data in rows and columns. HTML uses <table>, <tr>, <th>, and <td> tags.
1️⃣ Basic Table
INPUT:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
OUTPUT:
Name Age City Alice 25 London Bob 30 New York
✔️ <th> defines header cells
✔️ <td> defines table data
✔️ Rows created using <tr>
2️⃣ Table with Styled Borders
INPUT:
<table style="border:2px solid #0077cc; border-collapse:collapse; width:60%;">
...
</table>
OUTPUT:
Name Age City Alice 25 London Bob 30 New York
✔️ CSS styles can enhance table borders and spacing
✔️ border-collapse:collapse removes double borders
3️⃣ Table with Alternate Row Colors
INPUT:
<tr style="background-color:#f0f7ff;"> ... </tr>
<tr style="background-color:#ffffff;"> ... </tr>
OUTPUT:
Name Age City Alice 25 London Bob 30 New York
✔️ Alternating row colors improve readability
✔️ Use style="background-color:#HEX;" in <tr>
4️⃣ Table with Colspan and Rowspan
INPUT:
<table border="1">
<tr>
<th colspan="2">Full Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>Johnson</td>
<td>25</td>
</tr>
</table>
OUTPUT:
Full Name Age Alice Smith 25 Johnson 25
✔️ colspan merges columns
✔️ rowspan merges rows
✔️ Useful for complex table layouts
🎯 Best Practices
- Use headers (
<th>) for better readability - Alternate row colors for clarity
- Use
colspanandrowspanfor complex tables - Keep tables responsive using CSS if needed
- Always include borders for clarity in educational examples
🚀 What’s Next?
👉 HTML Lists
Next lesson will cover:
- Ordered (
<ol>) and unordered (<ul>) lists - List items (
<li>) and nesting - Styling lists with colors and icons
Tables help structure information clearly and improve user readability on websites.
Tags
HTML Tutorial