HTML Tables – Structure, Rows, Columns and More

by

Tables in HTML are used to display data in a structured way, organized into rows and columns. They are especially useful for presenting tabular information like schedules, product listings, or comparison charts. In this tutorial, we will explore the basics of HTML tables step by step.

Basic HTML Table Structure

An HTML table is created using the <table> element. Inside it, you define rows with <tr> (table row), and within each row, you add cells using <td> (table data).

Example:

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

📌 Output: A table with 2 rows and 2 columns.

Table Headings

To add headings to your table, use the <th> (table header) element instead of <td>. These are usually bold and centered by default.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>16</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>15</td>
    <td>Pune</td>
  </tr>
</table>

Table Attributes

  • border -> Adds a border around the table.
  • cellpadding -> Adds space inside the cell.
  • cellspacing -> Adds space between cells.
  • width -> Defines table width.

⚠️ Note: These attributes are old-fashioned. Today, we use CSS for styling.

Adding Captions

You can describe your table using the <caption> element.

Example:

<table border="1">
  <caption>Student Information</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>14</td>
  </tr>
</table>

Advanced Table Features

1. Merging Cells (colspan & rowspan)

Example:

<table border="1">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <td rowspan="2">Ravi</td>
    <td>Maths</td>
  </tr>
  <tr>
    <td>Science</td>
  </tr>
</table>

Explanation:

  • colspan -> Merges columns.
  • rowspan -> Merges rows.

2. Styling with CSS

In this example we have demonstrated inline CSS, although you can style the table and its rows and columns using external CSS too.

Example:

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid black; padding: 8px;">Name</th>
    <th style="border: 1px solid black; padding: 8px;">Marks</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Anita</td>
    <td style="border: 1px solid black; padding: 8px;">85</td>
  </tr>
</table>

Best Practices for HTML Tables

  • Use tables only for tabular data, not for layouts.
  • Always use <th> for headings.
  • Add captions for clarity.
  • Style tables with CSS instead of HTML attributes.
  • Keep accessibility in mind: use <thead>, <tbody>, and <tfoot> for better structure.

Example with thead, tbody, and tfoot:

<table border="1" style="border-collapse: collapse; width: 60%;">
  <caption>Monthly Sales Report</caption>
  
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th>Month</th>
      <th>Sales</th>
      <th>Profit</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>January</td>
      <td>$5,000</td>
      <td>$1,200</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$6,500</td>
      <td>$1,500</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$7,200</td>
      <td>$1,800</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr style="font-weight: bold; background-color: #e0e0e0;">
      <td>Total</td>
      <td>$18,700</td>
      <td>$4,500</td>
    </tr>
  </tfoot>
</table>

Explanation:

  • <thead> -> Contains the table header (column titles).
  • <tbody> -> Contains the main data rows.
  • <tfoot> -> Contains summary rows (totals, notes, etc.).

With this knowledge, you can now create neat, structured tables in HTML.

Summary

Tag / AttributeDescription
<table>Creates a table
<tr>Defines a row
<td>Defines a data cell
<th>Defines a header cell (bold + centered by default)
<caption>Adds a title to the table
colspanMerges multiple columns
rowspanMerges multiple rows
<thead>Groups header content
<tbody>Groups main body content
<tfoot>Groups footer (summary) content

Practice Challenge

  • Create a table showing 5 students names, subjects, and marks.
  • Add a caption, use <thead>, <tbody>, and include a <tfoot> row showing the average marks.
  • Style the table with CSS to make it look clean.

Sharing Is Caring: