HTML tables are used to display data in a structured format using rows and columns.
Tables are commonly used for displaying reports, pricing details, schedules, comparison charts, and admin panel data.
The <table> Tag
HTML tables are created using the <table> tag. A table is made up of rows, and each row contains cells.
The table structure helps browsers display data in an organized and readable format.
In this example:
- <table> defines the table
- <tr> defines a table row
- <td> defines a table cell
Each row contains data displayed in columns.
How Browsers Display Tables
Browsers automatically align table data into rows and columns based on the structure.
The border attribute is used here only for visibility. In real projects, table styling is handled using CSS.
When to Use HTML Tables
Use tables only when displaying tabular data such as:
- Reports
- Comparisons
- Schedules
- Lists of records
Do not use tables for page layout.
Common Beginner Mistakes with Tables
- Using tables for layout design
- Writing rows without consistent columns
- Forgetting to close table tags
Why Tables Matter for Jobs
Tables are widely used in dashboards, admin panels, and data-driven applications.
Understanding tables is essential for frontend developers and full-stack developers working with real-world data.
Practice Task
Create a table showing student details such as Name, Course, and Marks using at least three rows.
What You Will Learn Next
In the next lesson, you will learn about table rows, headers, and cells to create more structured and readable tables.