html table tags feature Image

Understanding HTML Table Tags: Complete Beginners to Advanced Guide

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:

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.

table output with html tags
				
					<!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!

Share your Experience on Social Networks

2 Comments

    • Arya

      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!

Leave a Reply

Your email address will not be published. Required fields are marked *