Learn HTML – Part 31 – table Tag – Creating HTML Tables

The HTML table tag is used to display data in a structured format using rows and columns.

Tables are commonly used to organize information such as schedules, reports, pricing tables, and comparison charts.

What is the table Tag?

The table tag defines an HTML table. It acts as a container that holds rows and columns of data.

A table is usually built using the following elements:

• table – Defines the table
• tr – Defines a table row
• th – Defines a header cell
• td – Defines a data cell

Basic Syntax

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

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

Example – Simple HTML Table

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

   <tr>
      <td>Alice</td>
      <td>New York</td>
   </tr>

   <tr>
      <td>Bob</td>
      <td>London</td>
   </tr>
</table>

Output:

Structure of an HTML Table

An HTML table is structured using rows and cells.

Table
 ├── Table Row (tr)
 │      ├── Header Cell (th)
 │      └── Data Cell (td)

Common Use Cases

• Displaying product comparison tables
• Creating price tables
• Showing reports or statistics
• Displaying schedules or timetables

HTML tables are best used for displaying structured data in rows and columns.

Common Mistakes Beginners Make

• Using tables for page layout instead of data
• Forgetting to organize rows properly
• Using too many nested tables

Conclusion

The HTML table tag is used to display structured data in rows and columns.

It is an essential element for presenting tabular data clearly on a webpage.

What’s Next?

Now that you understand the table tag, the next step is learning about the tr tag, which is used to create rows inside an HTML table.

Next: Learn HTML – Part 32 – tr Tag – Table Rows →

Series: Learn HTML Series