HTML tables are built using rows and cells. Understanding table structure helps you create clear and readable data layouts.
Each table row can contain header cells or data cells depending on the purpose.
The <tr> Tag (Table Row)
The <tr> tag is used to define a row in an HTML table. Each row contains one or more cells.
The <th> Tag (Table Header)
The <th> tag is used to define header cells. Header cells describe the content of a column or row.
Text inside <th> is bold and centered by default.
In this example:
- <th> is used for table headings
- <td> is used for table data cells
- Each <tr> creates a new row
The <td> Tag (Table Data)
The <td> tag defines standard data cells. These cells hold the actual table content such as text, numbers, or images.
Why Use Table Headers
Table headers improve readability and accessibility.
Screen readers use <th> elements to help users understand table relationships.
Common Table Structure Mistakes
- Using <td> instead of <th> for headers
- Missing table headers
- Inconsistent number of columns
Best Practices for Table Structure
- Always use <th> for headers
- Keep table structure consistent
- Use clear and meaningful header names
Why Table Structure Matters for Jobs
Professional applications rely on clean, accessible tables.
Employers expect developers to write tables that are readable, accessible, and easy to maintain.
Practice Task
Create a table with column headers for Product Name, Price, and Quantity. Add at least three rows of data.
What You Will Learn Next
In the next lesson, you will learn about table attributes and best practices for professional tables.