Table Tags: Tables, Rows, and Cells

In HTML documents, the <table> element is a core component used to display structured data. Unlike unordered or ordered lists, tables can clearly present the row and column relationships of two-dimensional data, making them widely applicable in scenarios such as financial statements, timetables, and product comparisons. To build a fully functional HTML table, developers must accurately understand and correctly use three core tags: <table>, <tr>, and <td> (or <th>).
All table content must be wrapped within the <table> tag. This tag defines the overall boundaries of the table, and browsers automatically calculate its width, border style, and layout method based on its attributes. A standard HTML table requires at least one row of data, which is defined by a group of cells using the <tr> (Table Row) tag.

The <tr> tag serves as the fundamental container for building table rows. Whether the cells contain plain text or special headers, they must appear in pairs within the <table> element. Inserting line breaks directly into a <td> can cause table layout disruptions; therefore, the content of each row must be strictly encapsulated within the <tr> tag.

<table border="1">
  <tr>
    <td>Data Row 1</td>
    <td>Data Row 2</td>
  </tr>
  <tr>
    <td>Data Row 3</td>
    <td>Data Row 4</td>
  </tr>
</table>

Cell Tags: Content Carriage and Semantic Distinction

The core cells of a table are represented by the <td> and <th> tags, both located inside <tr> elements. Although they appear visually similar, there is a significant difference in their semantics, which directly impacts browser accessibility experiences and CSS styling control.

  • <td> represents Table Data and is used to store regular table content. It is the default choice for constructing the main body of table data and is suitable for displaying data in almost all scenarios.

    • Applicable Scenario: Storing specific values, dates, or descriptive text.
    • Characteristics: Does not automatically bold; typically treated as plain text.

  • <th> represents Table Header and is specifically used to define the header rows and column headers of a table. It not only clarifies data categorization but also assigns special semantic attributes to the cells.

    • Applicable Scenario: Defining the name of each row or the category of each column.
    • Characteristics: Default style is bold and centered, helping users quickly identify the table structure.

When writing code, adhere to the principle: "Use <th> for headers, use <td> for data." Mislabeling regular content as <th> and displaying it as a header leads to semantic confusion; conversely, marking true headers as <td> prevents screen readers from correctly identifying them.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Zhang San</td>
    <td>25</td>
    <td>Beijing</td>
  </tr>
  <tr>
    <td>Lisi</td>
    <td>30</td>
    <td>Shanghai</td>
  </tr>
</table>

Best Practices and Precautions

In actual development, besides using tags correctly, keep the following points in mind to ensure table robustness:

  1. Avoid Using <br> Tags: Try not to use line breaks or <br> tags inside cells. This not only disrupts the grid structure of the table but can also lead to incorrect column width calculations, causing misalignment across different devices. If multi-line display is required, it is recommended to use the CSS white-space: pre-wrap property or content overflow handling solutions.
  2. Prioritize Semantics: Always distinguish between <th> and <td>. This not only complies with W3C standards but is also a key step in improving website accessibility, ensuring that visually impaired users can understand table logic through assistive technologies.
  3. Control Borders and Spacing: While modern browsers have good support for the border attribute, to achieve finer control (such as padding and margins), it is recommended to render them using CSS style sheets rather than relying solely on the HTML border="1" attribute.

Mastering the correct usage of table tags is the foundation for building high-quality web content. By reasonably applying <table>, <tr>, <td>, and <th>, developers can not only achieve intuitive data presentation but also convey clear semantic structures, enhancing the user experience.