HTML Table
An HTML Table is used to display data in rows and columns. Tables are created using <table>, with rows defined by <tr>, data cells by <td>, and header cells by <th>.
What is an HTML Table?
- A table organizes information into rows and columns.
- Use
<table>as the wrapper,<tr>for rows. - Use
<th>for headers and<td>for data cells. - Group structure with
<thead>,<tbody>,<tfoot>.
Why Use Tables?
Tabular Data
Perfect for displaying structured numeric and statistical data.
Comparison
Side-by-side comparison of products or features.
Schedules
Timetables, calendars and event lists fit naturally in tables.
Pricing
Display pricing plans with rows of features.
Reports
Summarize data in clear tabular reports.
Accessibility
Proper headers help screen readers describe data.
Table Syntax
<table>– defines the table<tr>– defines a row<th>– defines a header cell<td>– defines a data cell<thead>,<tbody>,<tfoot>– semantic groups<caption>– describes the table content
HTML Table Example
<!DOCTYPE html>
<html>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
<th>Fees</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aman</td>
<td>HTML</td>
<td>₹2000</td>
</tr>
<tr>
<td>Riya</td>
<td>CSS</td>
<td>₹2500</td>
</tr>
</tbody>
</table>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <table> | Wraps the entire table structure. |
| border | Adds a border around the table cells. |
| <thead> | Groups header rows. |
| <tbody> | Groups data rows. |
| <tr> | Defines a single row. |
| <th> / <td> | Defines header / data cells. |
Table Tags
Use Cases
- Reports: Display sales or attendance data in tables.
- Pricing Plans: Compare service tiers row-by-row.
- Timetables: School and class schedules.
- Score Boards: Sports scores and rankings.
Practice Questions
- Build a 4-row, 3-column table for student marks.
- Add a
<caption>to a table. - Style a table with CSS borders and zebra stripes.
- Use
thead,tbodyandtfootin one table.
Frequently Asked Questions
What is the difference between th and td?
th defines a header cell (bold, centered by default); td defines a normal data cell.
How do I add a border to a table?
Use the border attribute or CSS border properties.
Can I merge cells?
Yes, use colspan and rowspan attributes.
Should I use tables for page layout?
No. Use CSS Flexbox or Grid for layout; tables are only for data.
Conclusion
HTML Tables are the standard way to display structured data. Use proper semantic tags like thead, tbody and tfoot, and avoid using tables for page layout in modern HTML.
Additional Tips
- Use thead/tbody: Improves accessibility and styling.
- Don't use tables for layout: Use CSS Grid instead.
- Add scope attribute: Helps screen readers understand th cells.
- Responsive tables: Wrap in a div with overflow:auto.