Tables are used to display information in rows and columns. They help organize data in a structured format, making it easier for users to read and compare information.

You can see tables on many websites, such as:

• Product comparison pages
• School timetables
• Employee directories
• Pricing plans
• Reports and statistics

HTML provides special elements that allow you to create tables quickly and efficiently.

What Are HTML Tables?

An HTML table is a way of displaying data in a grid format using rows and columns.

For example:

In HTML, this structure is created using table elements.

Basic Table Structure

A table starts with the table element.

Inside a table:

• tr creates a row.
• th creates a header cell.
• td creates a data cell.

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

    <tr>
        <td>John</td>
        <td>25</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>30</td>
    </tr>
</table>

This creates a simple table with two columns and two data rows.

Understanding Table Elements

The <table> Element

The table element acts as the container for the entire table.

<table>
    ...
</table>

Everything related to the table is placed inside it.

The <tr> Element

The tr element creates a table row.

<tr>
    <td>John</td>
    <td>25</td>
</tr>

Each row can contain multiple cells.

The <th> Element

The th element defines a table heading.

<th>Name</th>

Browsers usually display header cells in bold text.

The <td> Element

The td element contains table data.

<td>John</td>

This is where the actual information is stored.

Adding Table Borders

By default, tables may not show visible borders.

For learning purposes, you can use:

<table border="1">

Example:

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

    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

In modern websites, CSS is usually used instead of the border attribute.

Best Practices

When creating tables:

• Use tables only for tabular data.
• Use th for headings.
• Keep tables simple and readable.
• Avoid using tables for webpage layouts.
• Use meaningful column names.

Good uses:

• Product lists
• Schedules
• Reports
• Statistics

Poor uses:

• Positioning page content
• Building website layouts

Key Takeaways

• Tables is an important topic to understand.
• Start with small examples and practice one step at a time.
• Use the idea in simple projects so it becomes easier to remember.