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.
Name
Age
City
Arya
25
New York
Ajay
30
London
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:
Employee List
Name
Position
Mark
Manager
Grouping Table Sections
To organize a table, use <thead>
, <tbody>
, and <tfoot>
.
Product
Price
Phone
$500
Total
$500
Merging Cells
You can merge multiple cells using colspan
(columns) and rowspan
(rows).
Full Name
First Name
Last Name
Using <colgroup>
for Column Styling
The <colgroup>
tag helps style specific columns.
Example:
Name
Score
Emma
95
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.
Creating Table with HTML
E Commerce Product List
Product Name
Price
Discount
Stock
Noise N1 Pro Buds
1499
10%
23
Boat Wired Ear Phones
299
5%
43
Nike Shoes
4000
using coloumn span not counting/displaying discount and stock here
Total Stock
66
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!