A Complete Guide - HTML Creating Tables with the table Tag

Last Updated: 03 Jul, 2025

YOU NEED ANY HELP? THEN SELECT ANY TEXT.

HTML Creating Tables with the `<table>` Tag

Basic Structure of an HTML Table

An HTML table is constructed using a series of nested tags that define its structure. Here’s the basic structure:

<table>: This tag encloses the entire table.
- <thead>: (Optional) Encloses the header section of the table.
  - <tr>: Encloses a row of header cells.
    - <th>: Defines a header cell in a table.
- <tbody>: (Optional) Encloses the body section of the table.
  - <tr>: Encloses a row of data cells.
    - <td>: Defines a standard data cell.
- <tfoot>: (Optional) Encloses the footer section of the table.
  - <tr>: Encloses a row of footer cells.
    - <td> or <th>: Usually, footer cells are defined as data or header cells.

Example:

<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> </tbody>
</table>

Key Attributes and Tags

border: Although not recommended for modern web design (instead, CSS should be used), this attribute defines the width of the table border in pixels.
cellpadding: Defines the space between cell content and cell borders.
cellspacing: Defines the space between each cell.
colspan and rowspan:
- colspan specifies the number of columns a cell should span.
- rowspan specifies the number of rows a cell should span.

Example:

<table> <tr> <th colspan="2">Header 1 & 2</th> <th>Header 3</th> </tr> <tr> <td rowspan="2">Row 1 & 2, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr>
</table>

Styling Tables with CSS

CSS is the preferred method for styling tables to ensure a clean separation between content and presentation.

Basic Styling:

table { width: 100%; border-collapse: collapse; /* Removes spaces between cells */
} th, td { padding: 10px; border: 1px solid black; text-align: left; /* Default alignment for data cells */
} th { background-color: #f2f2f2;
}

Hover Effects:

tr:hover { background-color: #f1f1f1;
}

Zebra Striping:

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

Accessibility Considerations

To ensure your tables are accessible, keep the following guidelines in mind:

Use logical table structure.
Avoid using tables for layout purposes.
Use <caption> to provide a summary of the table.
Use <scope> attribute for better association between headers and data cells (e.g., <th scope="col"> or <th scope="row">).

Example with Caption and Scoping:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement HTML Creating Tables with the table Tag

Example 1: Basic HTML Table

Step 1: Start with a basic HTML document structure.

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

Step 2: Inside the <body> tag, add the <table> element.

<table>
</table>

Step 3: To create rows within the table, use <tr> (table row) elements.

<table> <tr> </tr> <tr> </tr>
</table>

Step 4: Within each <tr>, add <th> (table header) or <td> (table data) elements to define the cells. Use <th> for headers and <td> for regular data.

<table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr>
</table>

Complete code for Example 1:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic HTML Table</title>
</head>
<body> <table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr>
</table> </body>
</html>

Example 2: Adding Borders and Styling

Step 1: Start with a basic table as in Example 1.

<table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr>
</table>

Step 2: Add the border attribute to the <table> tag to make the borders visible.

<table border="1">

Step 3: You can style the table further using CSS within a <style> block or an external stylesheet. Here’s an example using internal CSS.

<style> table { width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }
</style>

Complete code for Example 2:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styled HTML Table</title> <style> table { width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>
</head>
<body> <table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr>
</table> </body>
</html>

Example 3: Spanning Multiple Columns and Rows

Step 1: Start with a basic table again.

<table> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr>
</table>

Step 2: Make the first row header span across all columns to create a title row. Use the colspan attribute.

<tr> <th colspan="3">Person Information</th>
</tr>

Step 3: For multiple rows, you can use the rowspan attribute. Add another row where the "Name" spans two rows.

<tr> <td rowspan="2">John Doe</td> <td>30</td> <td>New York</td>
</tr>
<tr> <!-- Name cell is empty because it's spanned --> <td>Jane Smith</td> <td>Los Angeles</td>
</tr>

Complete code for Example 3:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spanning HTML Table</title> <style> table { width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>
</head>
<body> <table> <tr> <th colspan="3">Person Information</th> </tr> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td rowspan="2">John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <!-- Name cell is empty because it's spanned --> <td>Jane Smith</td> <td>Los Angeles</td> </tr>
</table> </body>
</html>

Example 4: Caption and Group Headers

Step 1: Add a caption using the <caption> tag inside the <table>.

<table> <caption>List of Employees</caption>
</table>

Step 2: Group table headers into sections using <thead>, <tbody>, and <tfoot>.

<table> <caption>List of Employees</caption> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr> </tbody>
</table>

Step 3: Add a footer section using the <tfoot> tag. This could be used to summarize the table data or provide additional information.

<table> <caption>List of Employees</caption> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>30</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> <td>Los Angeles</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>55</td> <td>-</td> </tr> </tfoot>
</table>

Complete code for Example 4: