HTML Tables - Web4learners

HTML tables allow you to organize and display data in rows and columns on a web page. They are commonly used to present student marks, employee details, product prices, schedules, financial reports, and other structured information.

HTML provides several elements to create tables, including <table>, <tr>, <th>, and <td>. You can also use CSS to customize table borders, spacing, colors, alignment, and responsive behavior.

In this tutorial, you will learn how to create HTML tables, add rows and columns, style table headers and cells, merge cells, and build responsive tables with practical examples.

What Is an HTML Table?

An HTML table is a structured arrangement of data displayed in rows and columns. Each row contains individual cells that hold headings or data.

For example, you can use an HTML table to display the details of students in a school.

Student Name	Age	Course
Rahul	21	HTML
Priya	22	CSS
Arjun	20	JavaScript

HTML tables are useful when information needs to be compared or understood easily. However, they should be used for tabular data rather than designing the overall layout of a webpage.

HTML Table Syntax

To create an HTML table, use the <table> element. Inside it, add rows using <tr>, headings using <th>, and regular data cells using <td>.

The basic syntax is shown below.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>Hyderabad</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>22</td>
    <td>Vijayawada</td>
  </tr>
</table>

In this example, the table contains three columns and three rows. The first row displays the column headings, while the remaining rows contain student information.

HTML Table Example

Let’s create a complete HTML document that displays a table containing employee details.

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

  <h1>Employee Details</h1>

  <table>
    <tr>
      <th>Employee ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Rahul</td>
      <td>IT</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Priya</td>
      <td>HR</td>
    </tr>
    <tr>
      <td>103</td>
      <td>Arjun</td>
      <td>Finance</td>
    </tr>
  </table>

</body>
</html>

The example creates a webpage with an employee table. The <h1> element provides the page heading, and the table displays the employee ID, name, and department.

Without CSS, browsers generally display table data without visible borders. You can add CSS to make the table easier to read.

HTML Table Elements

HTML provides different elements to structure table data correctly.

Element	Description
`<table>`	Defines a table
`<tr>`	Defines a table row
`<th>`	Defines a header cell
`<td>`	Defines a standard data cell
`<caption>`	Adds a title to a table
`<thead>`	Groups header rows
`<tbody>`	Groups the main data rows
`<tfoot>`	Groups footer rows
`<colgroup>`	Groups table columns for styling
`<col>`	Specifies properties for one or more columns

These elements help you build organized tables that are easier to maintain and understand.

HTML Table Rows

The <tr> element defines a row inside an HTML table. Each row can contain one or more header cells or data cells.

<table>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>React</td>
  </tr>
</table>

In this example, the table contains two rows, and each row contains two data cells.

You can add more <tr> elements whenever you need additional rows.

Learn more about HTML Table Rows.

HTML Table Headers

The <th> element defines a header cell that describes the information in a row or column. Browsers usually display header text in bold and center it by default.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>₹400</td>
  </tr>
</table>

In this example, Product and Price are column headings. The remaining cells contain the corresponding product details.

For better accessibility, use the scope attribute when appropriate.

<th scope="col">Product</th>
<th scope="col">Price</th>

The scope="col" attribute identifies each header as applying to its column.

Learn more about HTML Table Headers.

HTML Table Data Cells

The <td> element defines a standard data cell inside a table row. It can contain text, numbers, links, images, and other HTML elements.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>₹100</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>₹60</td>
  </tr>
</table>

Here, the <td> elements display the fruit names and their prices.

Learn more about HTML Table Cells.

HTML Table Borders

Borders help separate rows and columns, making table data easier to read. You can add borders using CSS instead of relying on the older HTML border attribute.

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

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

<table>
  <tr>
    <th>Name</th>
    <th>Course</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>HTML</td>
  </tr>
</table>

The border property adds a visible border around each cell. The border-collapse: collapse declaration combines adjacent borders into a single border.

Learn more about HTML Table Borders.

HTML Table Padding

Padding is the space between the content of a table cell and its border. Proper padding makes table data easier to read.

<style>
  th, td {
    border: 1px solid #ccc;
    padding: 12px;
  }
</style>

The padding: 12px declaration adds space inside every table header and data cell.

You can increase or decrease the padding depending on your design requirements.

HTML Table Spacing

CSS allows you to control the spacing between table cells. The border-spacing property sets the distance between adjacent cells when the table uses separate borders.

<style>
  table {
    border-spacing: 10px;
  }

  th, td {
    border: 1px solid #333;
    padding: 8px;
  }
</style>

The border-spacing: 10px declaration creates a 10-pixel gap between neighboring cells.

Remember that border-spacing does not create gaps when border-collapse: collapse is applied.

HTML Table Colspan

The colspan attribute allows a table cell to extend across multiple columns. It is useful for headings or information that covers several columns.

<table>
  <tr>
    <th colspan="3">Student Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Course</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>HTML</td>
  </tr>
</table>

The colspan="3" attribute makes the Student Information heading span three columns.

Learn more about HTML Table Colspan.

HTML Table Rowspan

The rowspan attribute allows a table cell to extend across multiple rows. It is useful when the same information applies to several related rows.

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Rahul</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

The rowspan="2" attribute makes the Rahul cell occupy two rows. The second row therefore needs only one additional data cell.

Learn more about HTML Table Rowspan.

HTML Table Captions

The <caption> element adds a descriptive title to a table. It should be placed immediately after the opening <table> tag.

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>₹25,000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>₹30,000</td>
  </tr>
</table>

The caption explains the purpose of the table before users read its contents. It is especially helpful for people using assistive technologies.

Learn more about HTML Table Captions.

HTML Table Head, Body, and Footer

HTML provides <thead>, <tbody>, and <tfoot> elements to divide a table into meaningful sections.

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

  <tbody>
    <tr>
      <td>Keyboard</td>
      <td>₹800</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>₹400</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Total</th>
      <td>₹1,200</td>
    </tr>
  </tfoot>
</table>

The <thead> element contains the table headings, <tbody> contains the main data, and <tfoot> contains summary information.

These elements improve the organization of your HTML and allow you to style each section separately.

HTML Table Styling with CSS

CSS can change the appearance of an HTML table by adding colors, borders, alternating row backgrounds, and hover effects.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

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

  th {
    background-color: #0878d1;
    color: white;
  }

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

  tbody tr:hover {
    background-color: #e0efff;
  }
</style>

In this example, the table has a blue header, alternating backgrounds for even-numbered rows, and a hover effect. These styles improve readability and create a more professional appearance.

For more information, explore HTML Table Styling.

HTML Responsive Tables

A responsive table adapts to different screen sizes. Tables with many columns may overflow on smaller mobile screens, so horizontal scrolling can be a practical solution.

<style>
  .table-container {
    width: 100%;
    overflow-x: auto;
  }

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

  th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
  }
</style>

<div class="table-container">
  <table>
    <tr>
      <th>Name</th>
      <th>Course</th>
      <th>Email</th>
      <th>Location</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>HTML</td>
      <td>rahul@example.com</td>
      <td>Hyderabad</td>
    </tr>
  </table>
</div>

The overflow-x: auto property allows users to scroll horizontally when the table is wider than its container. This prevents the table from unnecessarily expanding the page width on mobile devices.

Learn more about HTML Responsive Tables.

Common HTML Table Mistakes

Avoid these common mistakes when creating tables:

Using <td> for column headings instead of <th> when the cells are intended to identify columns.
Forgetting to close table elements or placing rows outside the table structure.
Using HTML tables to arrange the entire webpage instead of using CSS layout techniques.
Adding too much content to cells without considering readability on mobile screens.
Using colspan or rowspan values that do not match the intended table structure.
Using outdated presentation attributes instead of CSS for borders, colors, and spacing.
Creating tables without meaningful headers, making the data difficult to understand.

Following correct HTML structure and using semantic elements will make your tables easier to maintain and more accessible.

HTML Tables Best Practices

Use these best practices to create clear, accessible tables:

Use <th> for meaningful row and column headings.
Add a <caption> when a table needs a descriptive title.
Use scope="col" and scope="row" to clarify header relationships when appropriate.
Use <thead>, <tbody>, and <tfoot> to organize complex tables.
Apply CSS for styling rather than outdated HTML attributes.
Use responsive techniques for tables containing many columns.
Keep table content concise and avoid unnecessary merged cells.
Use tables only when the information represents data with meaningful row and column relationships.

HTML Tables Exercises

Practice the following exercises to improve your understanding of HTML tables.

Exercise 1: Create a table containing three columns: Name, Age, and City. Add details for three students.

Exercise 2: Create a product table with Product Name, Quantity, and Price. Add a header row and at least three products.

Exercise 3: Create a table with a caption named Student Marks. Include columns for Name, English, and Mathematics.

Exercise 4: Use colspan to create a heading that covers three columns.

Exercise 5: Use CSS to add borders, padding, a colored header, and alternating row backgrounds to a table.

Frequently Asked Questions

What is an HTML table?

An HTML table displays structured information in rows and columns using elements such as <table>, <tr>, <th>, and <td>.

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

The <th> element defines a header cell, while the <td> element defines a standard data cell.

How do you add borders to an HTML table?

Use CSS properties such as border and border-collapse to create and control table borders.

What is the purpose of `colspan` in HTML?

The colspan attribute allows a table cell to span multiple columns.

What is the purpose of `rowspan` in HTML?

The rowspan attribute allows a table cell to span multiple rows.

How can you make an HTML table responsive?

Place the table inside a container with overflow-x: auto to allow horizontal scrolling when the table exceeds the available width.

Can an HTML table contain images and links?

Yes. Table cells can contain images, links, buttons, and other HTML elements when appropriate.

Conclusion

HTML tables are an important part of web development because they help organize structured information into rows and columns. By understanding table rows, headers, data cells, borders, padding, spacing, captions, colspan, and rowspan, you can create useful tables for many types of websites.

Combining semantic HTML with CSS makes tables more readable, accessible, and responsive. Practice the examples in this tutorial to strengthen your HTML skills before moving on to more advanced table features.

What to Learn Next

Continue your HTML learning journey with these related tutorials: