« Previous Next »

Tables

HTML tables use various tags to structure and format tabular data. Here's a quick overview of the most important tags used in HTML tables:

Table Tags

Tag Short Meaning
<table> Main table container
<tr> Table Row
<th> Table Header (bold & centered)
<td> Table Data cell
<caption> Table Title (top of table)
<colgroup> Group of columns for styling
<col> Style individual columns
<thead> Header section of table
<tbody> Main content rows
<tfoot> Footer (bottom summary)

Basic Table Example

Output :

Table Data

Output :

Table Header

Output :

Practice Exercises

Task 1: How to create a company employee table with borders?

Goal: Build a clean table displaying employee IDs, designations, and department info using essential HTML table tags.
💡 Hint: Use <table border="1"> along with <tr>, <th>, and <td>.
💡 Show Solution 
<html>
  <body>
    <table border="1">
      <tr>
        <th>Emp ID</th>
        <th>Role</th>
        <th>Department</th>
      </tr>
      <tr>
        <td>101</td>
        <td>UI Designer</td>
        <td>Design Team</td>
      </tr>
    </table>
  </body>
</html>
Output :
Emp ID Role Department
101 UI Designer Design Team
Explanation: <table border="1"> adds standard borders around cells, while <th> creates bold headers for data columns.
Task 2: How to create a full-width tech training catalog?

Goal: Create a responsive full-width table listing modern technology tracks, course duration, and certification status.
💡 Hint: Set width="100%" in the <table> tag and organize multiple data rows.
💡 Show Solution 
<html>
  <body>
    <h2>Tech Training Tracks 2026</h2>

    <table border="1" width="100%">
      <tr>
        <th>Technology Track</th>
        <th>Program Duration</th>
        <th>Certification Level</th>
      </tr>
      <tr>
        <td>Full Stack Web Dev</td>
        <td>6 Months</td>
        <td>Advanced Professional</td>
      </tr>
      <tr>
        <td>Cloud Infrastructure</td>
        <td>3 Months</td>
        <td>Associate Engineer</td>
      </tr>
    </table>

    <p>Note: All tracks include practical lab sessions and real-world project submissions.</p>
  </body>
</html>
Output :

Tech Training Tracks 2026

Technology Track Program Duration Certification Level
Full Stack Web Dev 6 Months Advanced Professional
Cloud Infrastructure 3 Months Associate Engineer

Note: All tracks include practical lab sessions and real-world project submissions.

Explanation: Using width="100%" forces the table to stretch completely across its container screen for an expansive data presentation.
« Previous Next »