Tables in HTML help organize and display data in a structured way. They are useful for showing information like schedules, price lists, and reports. In this blog post, we will cover the essential HTML table tags with simple explanations and examples.
Topics covering in this article are:
- Basic Table Structure
- Adding Captions
- Grouping Table Sections
- Merging Cells
- Using
<colgroup>for Column Styling - Practicing HTML Table Tags
- Conclusion
Hey there, Before diving into HTML table tags, it’s essential to have a basic understanding of HTML structure and commonly used tags. If you’re new to HTML, check out my previous blog on Basics of HTML Tags to build a strong foundation.
Basic Table Structure
An HTML table is created using the <table> tag. Inside the table, rows are defined using <tr>, while columns are structured using <td> for data cells and <th> for header cells, ensuring organized content presentation.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Arya</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Ajay</td>
<td>30</td>
<td>London</td>
</tr>
</table>
Explanation:
- <table>: Defines the table.
- <tr>: Defines a row.
- <th>: Defines a header cell (bold text by default).
- <td>: Defines a regular data cell.
Adding Captions
The <caption> tag provides a title for the table.
Example:
<table border="1">
<caption>Employee List</caption>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Mark</td>
<td>Manager</td>
</tr>
</table>
Grouping Table Sections
To organize a table, use <thead>, <tbody>, and <tfoot>.
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Phone</td>
<td>$500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$500</td>
</tr>
</tfoot>
</table>
Merging Cells
You can merge multiple cells using colspan (columns) and rowspan (rows).
<table border="1">
<tr>
<th colspan="2">Full Name</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
Using <colgroup> for Column Styling
The <colgroup> tag helps style specific columns.
Example:
<table border="1">
<colgroup>
<col style="background-color:lightgray;">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Emma</td>
<td>95</td>
</tr>
</table>
Practicing HTML Table Tags
The most effective way to master HTML tables is through hands-on practice. Below is a simple project demonstrating how to structure and format tables using essential tags such as <table>, <tr>, <th>, and <td>. By coding and experimenting with different attributes, you will gain a deeper understanding of table layouts, data organization, and styling. Applying these concepts in real-world scenarios will enhance your HTML skills and improve your ability to create well-structured, accessible tables for various web applications.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Table with HTML</title>
</head>
<body>
<table border "1">
<caption>E Commerce Product List</caption>
<colgroup>
<col>
<col>
<col span="2">
</colgroup>
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Discount</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Noise N1 Pro Buds</td>
<td>1499</td>
<td>10%</td>
<td>23</td>
</tr>
<tr>
<td>Boat Wired Ear Phones</td>
<td>299</td>
<td>5%</td>
<td>43</td>
</tr>
<tr>
<td>Nike Shoes</td>
<td>4000</td>
<td colspan="2">using coloumn span not counting/displaying discount and stock here</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Stock</td>
<td>66</td>
</tr>
</tfoot>
</table>
</body>
</html>
We created a table with pure HTML5 table tags we can style with CSS – Will learn styling tables in our next articles
Conclusion
HTML tables provide an efficient way to organize and display data in a structured format. Using essential tags like <table>, <tr>, <th>, and <td>, you can create well-structured and accessible tables that improve both user experience and SEO. Exploring table attributes such as colspan, rowspan, and border will enhance your ability to customize tables effectively.
For continuous learning, refer to MDN Web Docs, upskillinghub, and W3Schools which provide up-to-date information on HTML tags, best practices, and the latest web standards.
Do you have any questions about HTML tables? Let us know in the comments!
Thank you for the good writeup. It in fact was a amusement account it.
Look advanced to far added agreeable from you!
By the way, how could we communicate?
Thank you so much — I’m glad you enjoyed the write-up! 😊 I truly appreciate your encouraging words. If you’d like to connect or have any questions, feel free to reach out through the Contact page — happy to help anytime!