📚 Table Basics
HTML tables are used to display data in rows and columns. They consist of several key elements that work together to create structured, readable data presentations. Tables are essential for displaying tabular data like spreadsheets, databases, and comparison charts.
Essential Table Tags
| Tag | Purpose | Description |
|---|---|---|
| <table> | Container | Defines the entire table structure |
| <tr> | Table Row | Creates a horizontal row in the table |
| <td> | Table Data | Contains actual data in a cell |
| <th> | Table Header | Defines header cells (bold and centered by default) |
Basic Table Example
| Product | Price | Stock |
|---|---|---|
| Laptop | ₹45,000 | 15 |
| Mobile | ₹25,000 | 32 |
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>₹45,000</td>
<td>15</td>
</tr>
<tr>
<td>Mobile</td>
<td>₹25,000</td>
<td>32</td>
</tr>
</table>
🏗️ Table Structure Elements
Modern HTML tables use semantic elements to improve structure, accessibility, and styling. These elements help screen readers and search engines understand your table better.
| Element | Purpose | Usage |
|---|---|---|
| <thead> | Table Head | Groups header content |
| <tbody> | Table Body | Groups main table content |
| <tfoot> | Table Footer | Groups footer content (totals, summaries) |
| <caption> | Table Caption | Provides table title/description |
| <colgroup> | Column Group | Groups columns for styling |
| <col> | Column | Defines column properties |
Structured Table Example
| Month | Sales | Profit |
|---|---|---|
| January | ₹1,50,000 | ₹30,000 |
| February | ₹1,80,000 | ₹36,000 |
| Total | ₹3,30,000 | ₹66,000 |
⚙️ Important Table Attributes
Table attributes control appearance, behavior, and accessibility. While many styling attributes are deprecated in favor of CSS, some remain important for functionality and accessibility.
Common Table Attributes
| Attribute | Element | Description | Example |
|---|---|---|---|
| border | <table> | Sets border width (deprecated, use CSS) | border="1" |
| cellpadding | <table> | Space inside cells (deprecated, use CSS) | cellpadding="10" |
| cellspacing | <table> | Space between cells (deprecated, use CSS) | cellspacing="5" |
| width | <table>, <td>, <th> | Sets width (deprecated, use CSS) | width="100%" |
| scope | <th> | Defines header scope for accessibility | scope="col" |
| headers | <td> | Associates cell with headers | headers="h1 h2" |
🔗 Colspan and Rowspan
colspan allows a cell to span multiple columns, while rowspan allows a cell to span multiple rows. These attributes are essential for creating complex table layouts.
Employee Schedule (Colspan Example)
| Employee | Work Schedule | Total Hours | ||
|---|---|---|---|---|
| Rahul Sharma | Mon-Wed | Thu-Fri | Weekend | 40 hrs |
| Priya Singh | Mon-Tue | Wed-Thu | Friday | 35 hrs |
<th colspan="3">Work Schedule</th>
Project Timeline (Rowspan Example)
| Project | Phase | Duration | Status |
|---|---|---|---|
| Website Development | Planning | 2 weeks | ✅ Complete |
| Development | 6 weeks | 🔄 In Progress | |
| Testing | 2 weeks | ⏳ Pending |
<td rowspan="3">Website Development</td>
Complex Table (Combining Both)
| Department | Q1 Performance | Q2 Performance | ||
|---|---|---|---|---|
| Target | Achieved | Target | Achieved | |
| Sales | ₹10L | ₹12L | ₹15L | ₹14L |
| Marketing | ₹5L | ₹4.5L | ₹6L | ₹6.2L |
🎯 Semantic Table Best Practices
Semantic HTML makes tables more accessible and meaningful. Use proper structure, captions, and scope attributes to create tables that work well for all users, including those using screen readers.
Well-Structured Data Table
| Student Name | Mathematics | Physics | Computer Science | Total |
|---|---|---|---|---|
| Arjun Patel | 85 | 92 | 88 | 265 |
| Sneha Gupta | 90 | 87 | 95 | 272 |
| Class Average | 87.5 | 89.5 | 91.5 | 268.5 |
<th scope="col" id="student">Student Name</th>
<td headers="student math">85</td>
♿ Table Accessibility
Accessible tables ensure that all users, including those using assistive technologies, can understand and navigate your data effectively.
Accessibility Checklist
| Feature | Implementation | Benefit |
|---|---|---|
| Caption | <caption>Table description</caption> | Provides table context |
| Scope | scope="col" or scope="row" | Defines header relationships |
| Headers | headers="id1 id2" | Associates cells with headers |
| Summary | Add summary in caption or aria-describedby | Explains complex table structure |
🌟 Real-World Examples
1. E-commerce Product Comparison
| Feature | iPhone 15 | Samsung S24 | OnePlus 12 |
|---|---|---|---|
| Price | ₹79,900 | ₹74,999 | ₹64,999 |
| Display | 6.1" OLED | 6.2" AMOLED | 6.82" AMOLED |
| Camera | 48MP + 12MP | 50MP + 12MP + 10MP | 50MP + 64MP + 48MP |
| Battery | 3349 mAh | 4000 mAh | 5400 mAh |
2. Financial Report
| Quarter | Revenue | Expenses | Net Profit | ||
|---|---|---|---|---|---|
| Domestic | International | Operational | Marketing | ||
| Q1 2024 | 150 | 75 | 120 | 30 | 75 |
| Q2 2024 | 180 | 90 | 140 | 35 | 95 |
| Total | 330 | 165 | 260 | 65 | 170 |
3. Class Schedule
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 9:00-10:00 | Data Structures | Mathematics | Data Structures | Web Development | Database Systems |
| 10:00-11:00 | Web Development | Database Systems | Mathematics | Data Structures | Project Work |
| 11:00-12:00 | Break Time | ||||
| 12:00-1:00 | Lab Session | Theory Class | Lab Session | Theory Class | Seminar |