HTML Tables: Tags, Attributes, Examples & Complete Guide

HTML Tables

HTML tables are used to organize and display data in rows and columns on a web page. They are useful when information needs to be compared or read in a structured format. Examples include product lists, student marks, employee records, price lists, schedules, financial data, and comparison charts.

An HTML table is created with the <table> element. Inside the table, developers commonly use <tr> for rows, <th> for headings, and <td> for data cells.

A simple HTML table looks like this:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>23</td>
    <td>Mumbai</td>
  </tr>
</table>

This creates a table with three columns: Name, Age, and City.

What Is an HTML Table?

An HTML table is a structured collection of data presented in a grid-like format. It consists of rows and columns, similar to a spreadsheet.

HTML provides several elements specifically for creating tables. These elements describe the structure of the table so browsers and assistive technologies can understand the data.

For example:

<table>
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>English</td>
    <td>85</td>
  </tr>
</table>

Here:

• <table> creates the table.
• <tr> creates a table row.
• <th> creates a header cell.
• <td> creates a normal data cell.

Why Are HTML Tables Used?

Tables are useful when data has a natural relationship between rows and columns.

Common examples include:

• Student examination results
• Employee information
• Product comparisons
• Pricing tables
• Monthly sales reports
• Financial statements
• Sports statistics
• Class timetables
• Travel schedules
• Inventory records
• Country statistics
• Technical specifications

Tables make complex information easier to scan and compare.

However, tables should generally not be used to design the overall layout of a web page. Modern websites use CSS layout systems such as Flexbox and Grid for page structure.

Basic Structure of an HTML Table

A basic table follows this structure:

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

The structure can be understood as:

<table>
   └── <tr> Table row
        ├── <th> Heading
        └── <th> Heading

   └── <tr> Table row
        ├── <td> Data
        └── <td> Data

A table can contain many rows and columns.

The <table> Element

The <table> element is the main container for an HTML table.

Example:

<table>
  ...
</table>

Everything belonging to the table is normally placed inside this element.

The <table> element itself does not automatically make a visually attractive table. CSS is normally used to control borders, spacing, alignment, colors, fonts, and responsive behavior.

The <tr> Element

<tr> stands for Table Row.

It creates a horizontal row in a table.

Example:

<table>
  <tr>
    <td>Apple</td>
    <td>Fruit</td>
  </tr>
</table>

The table above contains one row with two cells.

Multiple rows can be added:

<table>
  <tr>
    <td>Apple</td>
    <td>Fruit</td>
  </tr>
  <tr>
    <td>Carrot</td>
    <td>Vegetable</td>
  </tr>
</table>

The <th> Element

<th> stands for Table Header.

It represents a heading for a column or row.

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
</table>

Browsers generally display <th> text in bold and centered by default, although CSS can change its appearance.

Using <th> instead of <td> for headings is important because it gives the table better semantic meaning and improves accessibility.

The <td> Element

<td> stands for Table Data.

It represents an ordinary data cell.

Example:

<table>
  <tr>
    <td>Ravi</td>
    <td>28</td>
    <td>India</td>
  </tr>
</table>

Each <td> normally represents one piece of data.

Creating Rows and Columns

Consider this table:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>₹50,000</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>₹25,000</td>
    <td>20</td>
  </tr>
</table>

It contains:

• 3 columns
• 3 rows
• 1 header row
• 2 data rows

HTML Table Caption

The <caption> element provides a title or description for a table.

Example:

<table>
  <caption>Student Examination Results</caption>

  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>

  <tr>
    <td>Ravi</td>
    <td>85</td>
  </tr>
</table>

A caption helps users understand what the table represents.

It is especially useful for accessibility and is preferable to simply placing a heading above a table when the text is specifically the table’s title.

Table Header, Body, and Footer

HTML provides semantic elements for dividing a table into sections:

• <thead> — table header
• <tbody> — table body
• <tfoot> — table footer

Example:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Laptop</td>
      <td>₹50,000</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>₹25,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹75,000</td>
    </tr>
  </tfoot>
</table>

These elements make the structure clearer and can be useful when styling or processing tables with JavaScript.

What Is <thead>?

<thead> contains the header rows of a table.

Example:

<thead>
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
</thead>

It is commonly used for column headings.

What Is <tbody>?

<tbody> contains the main data rows.

Example:

<tbody>
  <tr>
    <td>Rahul</td>
    <td>Sales</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>Marketing</td>
  </tr>
</tbody>

A table can have one or more <tbody> sections.

What Is <tfoot>?

<tfoot> contains summary or footer information.

For example:

<tfoot>
  <tr>
    <td>Total</td>
    <td>150</td>
  </tr>
</tfoot>

It is useful for totals, summaries, or other information related to the table.

Adding a Border to an HTML Table

HTML tables do not need to depend on obsolete presentation attributes for styling. CSS is the recommended approach.

Example:

<style>
  table, th, td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>25</td>
  </tr>
</table>

This adds borders around the table and its cells.

Using border-collapse

By default, borders can appear separated. CSS’s border-collapse property can make them appear as a single border.

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #333;
}

This is one of the most common styles used for simple data tables.

Adding Cell Padding

Padding creates space between the cell content and its border.

th, td {
  padding: 10px;
}

Without sufficient padding, table content can look crowded.

Aligning Table Content

CSS can be used to control alignment.

th {
  text-align: left;
}

td {
  text-align: center;
}

You can use:

• left
• center
• right

depending on the type of information.

For example, names may be left-aligned, while numbers are often right-aligned.

Spanning Multiple Columns

The colspan attribute allows one cell to occupy multiple columns.

Example:

<table>
  <tr>
    <th colspan="3">Student Details</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>15</td>
    <td>10</td>
  </tr>
</table>

Here, the first header cell spans three columns.

Spanning Multiple Rows

The rowspan attribute allows a cell to occupy multiple rows.

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Ravi</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Mathematics</td>
  </tr>
</table>

The Ravi cell spans two rows.

Using scope for Accessible Tables

The scope attribute helps identify what a header applies to.

For column headings:

<th scope="col">Name</th>
<th scope="col">Age</th>

For row headings:

<th scope="row">Ravi</th>

A more accessible table can look like this:

<table>
  <caption>Student Results</caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">English</th>
      <th scope="col">Math</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Ravi</th>
      <td>85</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

This gives assistive technologies additional information about the relationship between headers and data.

Using <colgroup> and <col>

The <colgroup> element can group columns, while <col> represents individual columns or groups of columns.

Example:

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>

  <tr>
    <td>Ravi</td>
    <td>25</td>
    <td>Bhubaneswar</td>
  </tr>
</table>

These elements can be useful when applying styles or defining properties for groups of columns.

Styling Alternate Rows

CSS can make large tables easier to read by styling alternating rows.

Example:

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

This technique is often called zebra striping.

It improves visual scanning, especially when a table contains many rows.

Hover Effects

A hover effect can help users identify the row they are currently viewing.

tbody tr:hover {
  background-color: #eee;
}

This is particularly useful for tables containing many columns.

Responsive HTML Tables

Large tables can be difficult to display on mobile screens. One common solution is to allow horizontal scrolling.

Example:

<div class="table-container">
  <table>
    ...
  </table>
</div>

CSS:

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

This allows users to scroll horizontally when the table is wider than the available screen.

Responsive table design is important because many visitors access websites using smartphones and tablets.

Complete HTML Table Example

Here is a practical example combining several important table features:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Results</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    caption {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 10px;
    }

    th,
    td {
      border: 1px solid #333;
      padding: 10px;
      text-align: left;
    }

    thead {
      background: #eee;
    }

    tbody tr:nth-child(even) {
      background: #f7f7f7;
    }

    tbody tr:hover {
      background: #eaeaea;
    }
  </style>
</head>

<body>

  <table>
    <caption>Student Examination Results</caption>

    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">English</th>
        <th scope="col">Mathematics</th>
        <th scope="col">Science</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">Ravi</th>
        <td>85</td>
        <td>92</td>
        <td>88</td>
      </tr>

      <tr>
        <th scope="row">Anita</th>
        <td>90</td>
        <td>86</td>
        <td>94</td>
      </tr>

      <tr>
        <th scope="row">Priya</th>
        <td>88</td>
        <td>91</td>
        <td>89</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

This example demonstrates semantic table sections, captions, header scopes, CSS styling, responsive-friendly width, and alternating row styles.

HTML Table Attributes

HTML tables can use various attributes depending on the element and purpose.

Some important ones include:

Modern HTML generally uses CSS instead of old presentation attributes for things such as borders, colors, widths, and alignment.

The headers Attribute

For complex tables, the headers attribute can explicitly connect data cells to header cells.

Example:

<table>
  <tr>
    <th id="name">Name</th>
    <th id="score">Score</th>
  </tr>

  <tr>
    <td headers="name">Ravi</td>
    <td headers="score">90</td>
  </tr>
</table>

This can be helpful when a table has complex header relationships.

Simple Tables vs. Complex Tables

A simple table might look like this:

Name     Age     City
Ravi     25      Delhi
Anita    23      Mumbai

A complex table may contain:

• Multiple header levels
• Row groups
• Column groups
• Spanning cells
• Totals
• Subtotals
• Different relationships between headers and data

Complex tables require more careful semantic markup to remain understandable and accessible.

HTML Tables and Accessibility

Accessibility is an important part of table design.

A good table should make sense to people using:

• Screen readers
• Keyboard navigation
• Mobile devices
• Other assistive technologies

Some useful practices include:

1. Use <th> for headers.
2. Add a meaningful <caption> when appropriate.
3. Use scope for clear header relationships.
4. Use semantic <thead>, <tbody>, and <tfoot> sections.
5. Avoid unnecessarily complicated table structures.
6. Keep headings descriptive.
7. Do not use tables simply to position page elements.
8. Make wide tables usable on small screens.

HTML Tables vs. CSS Grid

HTML tables and CSS Grid serve different purposes.

HTML tables are designed for tabular data.

CSS Grid is designed primarily for arranging page elements and creating layouts.

For example, a student marksheet is appropriate for a table:

<table>
  ...
</table>

A website’s header, sidebar, main content, and footer should generally be arranged with CSS rather than an HTML table.

HTML Tables vs. Lists

A table is useful when users need to compare values across rows and columns.

A list is better when information is simply a sequence of related items.

For example, this is suitable for a table:

Product     Price      Stock
Laptop      ₹50,000    10
Phone       ₹25,000    20
Tablet      ₹30,000    15

But a list may be more appropriate for:

- Laptop
- Phone
- Tablet

The structure should match the meaning of the information.

Common Mistakes When Creating HTML Tables

Using Tables for Website Layout

Older websites often used tables to create complete page layouts. This approach is outdated and can make websites harder to maintain and less accessible.

Use CSS Flexbox or Grid for page layouts.

Using <td> for Headers

Avoid:

<td>Name</td>

when the cell is actually a heading.

Use:

<th scope="col">Name</th>

instead.

Creating Very Wide Tables

A table with too many columns can become difficult to use, especially on smartphones.

Consider:

• Reducing unnecessary columns
• Shortening headings
• Allowing horizontal scrolling
• Designing a mobile-friendly presentation

Using Too Many Merged Cells

rowspan and colspan are useful, but excessive merging can make tables difficult to understand.

Use them only when they accurately represent the relationship between the data.

Putting Unrelated Information in One Table

A table should represent a logical collection of related data. Combining unrelated information into one large table can reduce clarity.

HTML Tables and SEO

Tables themselves are not a shortcut to better search rankings. Their main purpose is to present structured information clearly.

However, well-structured tables can improve the usefulness and readability of content. Search engines can also better understand properly marked-up page content when the HTML structure accurately represents the information.

For SEO-friendly tables:

• Use meaningful headings.
• Keep information accurate.
• Use descriptive surrounding content.
• Avoid keyword stuffing.
• Make tables readable on mobile devices.
• Use semantic HTML.
• Add a caption when useful.
• Keep the data genuinely useful to readers.

HTML Table Best Practices

For clean and maintainable tables, follow these practices:

Use semantic HTML:
Use <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> according to their intended meanings.

Use CSS for presentation:
Keep colors, borders, spacing, typography, and layout in CSS.

Use meaningful headings:
A reader should understand a column without guessing what it represents.

Consider accessibility:
Use <th>, scope, captions, and appropriate header relationships.

Think about mobile users:
Test wide tables on smaller screens.

Avoid unnecessary complexity:
Simple tables are usually easier to read and maintain.

Do not use tables for layout:
Use modern CSS layout techniques instead.

Advantages of HTML Tables

HTML tables have several advantages:

• They organize structured data clearly.
• They make row-by-row comparisons easy.
• They have built-in semantic meaning.
• They work across modern web browsers.
• They can be styled extensively with CSS.
• They support accessibility features.
• They are useful for reports and statistical information.
• They can be made responsive with appropriate design techniques.

Disadvantages of HTML Tables

Tables are not ideal for every type of information.

Some disadvantages include:

• Large tables can be difficult to read.
• Wide tables can create problems on small screens.
• Complex tables can be challenging for accessibility.
• Tables are not suitable for general page layout.
• Excessive use of merged cells can make the structure confusing.
• Poorly designed tables can become difficult to maintain.

Frequently Asked Questions About HTML Tables

What is an HTML table?

An HTML table is a structure used to display related information in rows and columns on a web page.

Which tag is used to create a table in HTML?

The <table> element is used to create an HTML table.

Which tag creates a table row?

The <tr> element creates a table row.

Which tag creates a table heading?

The <th> element creates a table header cell.

Which tag creates a table data cell?

The <td> element creates a normal table data cell.

What is colspan in HTML?

colspan allows a table cell to span across two or more columns.

What is rowspan in HTML?

rowspan allows a table cell to span across two or more rows.

What is the purpose of <thead>?

<thead> identifies the header section of a table.

What is the purpose of <tbody>?

<tbody> identifies the main body of table data.

What is the purpose of <tfoot>?

<tfoot> identifies the footer or summary section of a table.

Can CSS be used with HTML tables?

Yes. CSS is commonly used to control table borders, spacing, alignment, colors, typography, widths, and responsive behavior.

Should HTML tables be used for website layouts?

Generally, no. Tables should be used for tabular data, while CSS Flexbox and Grid are better choices for page layouts.

How can I make an HTML table mobile-friendly?

One common approach is to place the table inside a container with horizontal scrolling:

.table-container {
  overflow-x: auto;
}

What is the difference between <th> and <td>?

<th> represents a header cell, while <td> represents an ordinary data cell.

Conclusion

HTML tables provide a reliable and semantic way to present information in rows and columns. The basic elements—<table>, <tr>, <th>, and <td>—are enough to create a simple table, while elements such as <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, and attributes such as colspan, rowspan, and scope allow developers to create more meaningful and accessible tables.

The most important rule is simple: use HTML tables for tabular data, not for designing the overall webpage layout. Combine semantic HTML with CSS, accessibility practices, and responsive design to create tables that are clear, useful, and easy to use on both desktop and mobile devices.