HTML - Working Code for Tables in HTML
HTML tables are one of the most essential components in web development. They allow developers to display
structured data in a grid layout using rows and columns. Whether creating data reports, dashboards, invoices,
pricing charts, comparison tables, or schedules, HTML tables are crucial for both beginners and advanced
developers. In this detailed 1500+ word guide, we explore how to create functional HTML tables,
table components, table styling, responsive table techniques, accessibility best practices, and multiple
working code examples with outputs.
To improve search reach and impressions, this document includes SEO-friendly keywords such as
HTML tables tutorial, working table code, table tags in HTML, creating rows and columns,
HTML table formatting, responsive tables, table header, table borders, table styling,
HTML table examples, table accessibility, rowspan, colspan, advanced table features.
Introduction to HTML Tables
HTML tables are created using the <table> element which contains multiple
rows (<tr>) and cells that can be table headers (<th>) or data cells (<td>).
Tables help organize information in a structured way and are widely used in admin dashboards,
documentation pages, product listings, financial reports, and academic result sheets.
Structure of an HTML Table
The basic structure includes:
- <table> – container for the table
- <tr> – defines a table row
- <th> – defines a table header cell
- <td> – defines a table data cell
HTML Table
| Name |
Age |
Country |
| John |
28 |
USA |
| Maria |
25 |
Canada |
Output
| Name |
Age |
Country |
| John |
28 |
USA |
| Maria |
25 |
Canada |
Table Tags and Attributes
HTML provides many tags and attributes to improve table structure,
readability, accessibility, and styling.
HTML Table Tags
- <thead> – groups header rows
- <tbody> – groups body rows
- <tfoot> – groups footer rows
- <caption> – adds a title for the table
- <colgroup> – applies formatting to columns
- <col> – defines column properties
Using thead, tbody, tfoot
Employee Details
| Name |
Department |
Salary |
| Alice |
IT |
$5000 |
| Bob |
HR |
$4500 |
| Data updated monthly |
Output
Employee Details
| Name |
Department |
Salary |
| Alice |
IT |
$5000 |
| Bob |
HR |
$4500 |
| Data updated monthly |
Rowspan and Colspan in HTML Tables
colspan merges cells horizontally, while rowspan merges cells vertically.
These properties help create complex layouts like calendars, schedules, and fee structures.
Using Colspan
| Student Report |
| Name |
Marks |
Grade |
| Rohit |
92 |
A+ |
Output
| Student Report |
| Name |
Marks |
Grade |
| Rohit |
92 |
A+ |
Using Rowspan
| Product |
Price |
Quantity |
| $20 |
5 |
Output
| Product |
Price |
Quantity |
| $20 |
5 |
Table with Borders
Output
Example: Styled Table with CSS
| ID |
Name |
Status |
| 1 |
Arun |
Active |
| 2 |
Neha |
Inactive |
Output
| ID |
Name |
Status |
| 1 |
Arun |
Active |
| 2 |
Neha |
Inactive |
Responsive Tables in HTML
Responsive tables adjust to different screen sizes.
On mobile screens, horizontal scrolling is commonly used.
Example: Responsive Table (Scrollable)
| Product |
Category |
Price |
Stock |
| Laptop |
Electronics |
$600 |
20 |
| Chair |
Furniture |
$80 |
50 |
Output
| Product |
Category |
Price |
Stock |
| Laptop |
Electronics |
$600 |
20 |
| Chair |
Furniture |
$80 |
50 |
HTML tables are powerful components that allow clear presentation of structured data.
With support for rowspan, colspan, custom styling, accessibility improvements, and responsive techniques,
tables play an important role in modern web design. Understanding how to build and style HTML tables
correctly helps developers create dashboards, comparison charts, data grids, academic reports, pricing tables,
and more. Mastering the table elements, attributes, and CSS styling covered in this document allows you to
implement highly functional and visually appealing HTML tables for any project.
