Table Structure
HTML tables organize data into rows and columns.
Basic Table Structure
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 people</td>
</tr>
</tfoot>
</table>
Table Elements
| Element | Purpose |
|---|---|
<table> |
Table container |
<thead> |
Table header group |
<tbody> |
Table body group |
<tfoot> |
Table footer group |
<tr> |
Table row |
<th> |
Table header cell |
<td> |
Table data cell |
Spanning Cells
<table>
<tr>
<th>Name</th>
<th colspan="2">Contact Info</th> <!-- Spans 2 columns -->
</tr>
<tr>
<td>Alice</td>
<td>alice@email.com</td>
<td>555-1234</td>
</tr>
<tr>
<th rowspan="2">Bob</th> <!-- Spans 2 rows -->
<td>bob@email.com</td>
<td>555-5678</td>
</tr>
<tr>
<td>bob@example.com</td>
<td>555-9012</td>
</tr>
</table>
Table Styling
/* Basic table styling */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
/* Zebra striping */
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Hover effect */
tr:hover {
background-color: #f5f5f5;
}
/* Responsive table */
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}
Accessible Tables
Making tables accessible ensures screen readers can properly interpret the data.
Accessibility Basics
<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Sales</th>
<th scope="col">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$12,000</td>
<td>$2,500</td>
</tr>
</tbody>
</table>
Key Accessibility Features
| Feature | Purpose |
|---|---|
<caption> |
Describes the table |
scope="col" |
Header is for column |
scope="row" |
Header is for row |
<th> in <thead> |
Column headers |
<th> in row |
Row headers |
Complex Tables
<table>
<caption>Employee Information</caption>
<colgroup>
<col span="1" style="background-color: #f0f0f0">
<col span="2">
</colgroup>
<thead>
<tr>
<th id="name" scope="col">Name</th>
<th id="email" scope="col">Email</th>
<th id="phone" scope="col">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th id="alice" headers="name">Alice</th>
<td headers="alice email">alice@example.com</td>
<td headers="alice phone">555-1234</td>
</tr>
</tbody>
</table>
When NOT to Use Tables
<!-- ❌ Don't use tables for layout -->
<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>Sidebar</td>
<td>Content</td>
</tr>
</table>
<!-- ✅ Use CSS Grid/Flexbox for layout -->
<div class="layout">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
</div>
<!-- ✅ Use tables for tabular data -->
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
Practice Problems
Create a reusable React component implementing HTML Tables. Include proper state management and accessibility.
Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where neededWrite unit and integration tests for HTML Tables using React Testing Library.
Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility testsOptimize HTML Tables for performance. Consider memoization, code splitting, and bundle size.
Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysisQuiz
1. When should you use HTML tables?
2. What does the scope attribute do?
3. What is the purpose of the <caption> element?
4. What does colspan="2" do?
Flashcards
Question
What are the main table elements?
Click to reveal answer
Answer
table (container), thead/tbody/tfoot (groups), tr (row), th (header cell), td (data cell).
Question
What is the scope attribute?
Click to reveal answer
Answer
Indicates if a th is for a column (scope="col") or row (scope="row"). Helps screen readers.
Question
When should you NOT use tables?
Click to reveal answer
Answer
For page layout. Use CSS Grid or Flexbox instead. Tables are only for tabular data.
Question
What is HTML Tables?
Click to reveal answer
Answer
HTML Tables is a key concept in frontend development.
Question
When to use HTML Tables?
Click to reveal answer
Answer
Use HTML Tables when building production systems that require reliability, scalability, and maintainability.
Revision Notes
Key Takeaways
- 1.Tables are for tabular data, not layout
- 2.Use thead, tbody, tfoot for structure
- 3.Add scope attributes for accessibility
- 4.Use caption to describe the table
- 5.Use CSS for styling, not table attributes
Interview Tips
- •Know when to use tables vs CSS layout
- •Understand how to make tables accessible
- •Be familiar with colspan and rowspan
- •Know the difference between th and td
Cheat Sheet
HTML Tables Cheat Sheet
Structure:
: Container
- //: Groups
: Row : Header cell : Data cell Spanning:
- colspan: Span columns
- rowspan: Span rows
Accessibility:
: Table title - scope="col"/"row": Header type
- Use
for headers When to Use:
- Tabular data only
- Not for layout
- Use CSS Grid/Flexbox for layout
- //: Groups