HTML Tables

What are HTML Tables?

HTML tables are used to organize data into rows and columns. They are created using the <table> element and provide a structured way to display data such as pricing plans, schedules, or comparisons.

HTML tables consist of multiple elements, including:

• <table>: Defines the table.
• <tr>: Defines a table row.
• <td>: Defines a table cell (data).
• <th>: Defines a header cell.

How to Create a Simple HTML Table

To create a simple table, use the following basic structure:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

        

Output:

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Advanced HTML Table Features

HTML tables support advanced features like rowspan and colspan to merge cells, and attributes for enhanced styling and accessibility.

Merging Cells with rowspan and colspan

Use rowspan to span rows and colspan to span columns.

<table border="1">
    <tr>
        <th>Item</th>
        <th>Details</th>
    </tr>
    <tr>
        <td rowspan="2">Laptop</td>
        <td>Brand: Dell</td>
    </tr>
    <tr>
        <td>Price: $1000</td>
    </tr>
    <tr>
        <td colspan="2">Total Items: 5</td>
    </tr>
</table>

        

Output:

Styling HTML Tables

CSS can be used to style HTML tables for better appearance and usability. Example:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }
    th {
        background-color: #f4f4f4;
    }
</style>

        

HTML Table Tags

• <table>: Defines the table.
• <tr>: Defines a table row.
• <td>: Defines a table data cell.
• <th>: Defines a table header cell.
• <caption>: Adds a caption to the table.

Key HTML Table Tags and Their Uses

<table> Tag

The <table> tag is the container for all other table elements. It defines the table structure and includes rows, columns, and other elements.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

        

Output:

Attributes in HTML Table Tags

Border

The border attribute adds a border to the table.

Cellpadding and Cellspacing

Cellpadding: Controls the space between the cell content and its border.

Cellspacing: Defines the space between cells.

Examples of Advanced HTML Tables

Advanced examples like spanning rows and columns can be achieved with rowspan and colspan.

<table border="1">
    <tr>
        <th>Item</th>
        <th>Details</th>
    </tr>
    <tr>
        <td rowspan="2">Laptop</td>
        <td>Brand: Dell</td>
    </tr>
    <tr>
        <td>Price: $1000</td>
    </tr>
</table>

        

Best Practices for Using HTML Tables

• Use tables only for tabular data, not layout.
• Ensure tables are accessible with proper <caption> and <th> elements.
• Optimize for responsiveness using CSS media queries.

FAQs About HTML Tables

table {
    display: block;
    overflow-x: auto;
}