HTML

HTML Tables

HTML tables allow web developers to organize and present data in rows and columns, creating a structured and visually accessible format. Tables are ideal for displaying tabular data like schedules, comparisons, and statistics. They can contain text, images, links, and even nested tables, making them versatile for various data presentation needs.

Example

<table>
  <tr>
    <th>Course</th>
    <th>Topic</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>React JS Masterclass: Zero To Job Ready With 10 Projects</td>
    <td>34 hours 49 minutes</td>
  </tr>
  <tr>
    <td>Workflow</td>
    <td>
      A Complete Guide to Learning ChatGPT 4, Midjourney, DALL-E 2, and AI
    </td>
    <td>10 hours 38 minutes</td>
  </tr>
</table>

Output

Course	Topic	Duration
JavaScript	React JS Masterclass: Zero To Job Ready With 10 Projects	34 hours 49 minutes
Workflow	A Complete Guide to Learning ChatGPT 4, Midjourney, DALL-E 2, and AI	10 hours 38 minutes

HTML Table Components

Tag	Description
`<table>`	Defines the table container.
`<tr>`	Represents a table row.
`<td>`	Defines a standard data cell within the table.
`<th>`	Specifies a header cell, typically bolded and centered by default. Includes the `scope` attribute to clarify whether the header applies to a row, column, or group of cells.
`<caption>`	Provides a descriptive title for the table.
`<thead>`	Defines the table's header section, grouping the header rows.
`<tbody>`	Groups the main content rows of the table.
`<tfoot>`	Defines the footer section of the table, often used for summary or totals.

Table Cells

Table cells, defined using the <td> tag, are the basic building blocks of a table. They contain data such as text, images, or other HTML elements and are organized into rows and columns.

Example

<table>
  <tr>
    <td>Tutorials</td>
    <td>Topic</td>
  </tr>
</table>

Output

Tutorials

Topic

Table Headers

The <th> tag creates table headers to label columns or rows, usually displayed in bold and centered by default. Using the scope attribute with <th> improves readability and accessibility by specifying whether the header applies to a column, row, or group of cells. This helps users, including those relying on screen readers, understand the table's structure.

Example

<table>
  <tr>
    <th scope="col">Course Title</th>
    <th scope="col">Author</th>
    <th scope="col">Duration</th>
  </tr>
  <tr>
    <td>HTML Basics</td>
    <td>John Smith</td>
    <td>3 hours</td>
  </tr>
</table>

Output

Course Title	Author	Duration
HTML Basics	John Smith	3 hours

The scope="col" attribute ensures each <th> is explicitly associated with its respective column. For row headers, use scope="row" instead.

Table Rows

The <tr> tag defines a single row in a table. Rows consist of one or more <td> or <th> elements, representing the data or headers for each column.

Example

<table>
  <tr>
    <td>React JS Masterclass: Zero To Job Ready With 10 Projects</td>
    <td>Shubham Sarda</td>
    <td>34 hours 49 minutes</td>
  </tr>
  <tr>
    <td>Web Development Foundation: Learn HTML5, CSS3 & Bootstrap</td>
    <td>Shubham Sarda</td>
    <td>23 hours 28 minutes</td>
  </tr>
</table>

Output

React JS Masterclass: Zero To Job Ready With 10 Projects	Shubham Sarda	34 hours 49 minutes
Web Development Foundation: Learn HTML5, CSS3 & Bootstrap	Shubham Sarda	23 hours 28 minutes

Special Features in HTML Tables

Table Captions

The <caption> tag provides a title for the table, making it easier for users to understand the context or purpose of the data. This feature enhances accessibility and usability.

Example

<table>
  <caption>Top Web Development Courses</caption>
  <thead>
    <tr>
      <th>Course Title</th>
      <th>Author</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python A-Z: Learn Python By Building 15 Projects</td>
      <td>Shubham Sarda</td>
      <td>24 hours 59 minutes</td>
    </tr>
    <tr>
      <td>Git & GitHub Masterclass: The Practical Bootcamp</td>
      <td>Shubham Sarda</td>
      <td>7 hours 24 minutes</td>
    </tr>
  </tbody>
</table>

Output

Top Web Development Courses
Course Title	Author	Duration
Python A-Z: Learn Python By Building 15 Projects	Shubham Sarda	24 hours 59 minutes
Git & GitHub Masterclass: The Practical Bootcamp	Shubham Sarda	7 hours 24 minutes

The tag (Top Web Development Courses) helps users instantly understand what the table represents. It must be placed immediately after the

tag for proper semantic structure and accessibility, as recommended by HTML standards.

Nested Tables

HTML tables can include other tables within their <td> cells, enabling the display of hierarchical or complex data layouts.

Example

<table>
  <caption>Detailed Course Overview</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Frontend Development</td>
      <td>
        <table>
          <thead>
            <tr>
              <th>Course Title</th>
              <th>Duration</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Learn Fundamental Design Principles for Non-Designers</td>
              <td>1 hours 7 minutes</td>
            </tr>
            <tr>
              <td>Design & UX</td>
              <td>1 hours 7 minutes</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Output

Detailed Course Overview

FAQs on HTML Tables

What are HTML tables used for today?

HTML tables are primarily used today for displaying structured tabular data, ensuring clear row-and-column relationships and better accessibility. For web layouts, modern CSS techniques like flexbox and grid are preferred. However, HTML emails still rely heavily on table-based layouts due to inconsistent CSS support in many email clients.

How do I create a table with a header row?

Use the <th> tag inside a <tr> for the first row of the table.

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

Can HTML tables be styled with CSS?

Yes, you can use CSS to style borders, cell padding, background colors, text alignment, and more.

How can I make HTML tables accessible?

Ensure proper use of <thead>, <tbody>, <tfoot>, and attributes like scope and caption to improve readability for screen readers.

Previous Next