Master HTML tables to display structured data clearly and accessibly
HTML tables are designed specifically for displaying tabular data - information that naturally fits into rows and columns. Think of spreadsheets, comparison charts, financial reports, or sports statistics. When used correctly, tables make complex data easy to understand and navigate.
However, tables should only be used for actual data, never for page layout. Modern CSS provides much better tools for positioning and layout. Focus on using tables for their intended purpose: presenting structured, relational data in a clear, accessible way.
HTML tables use a nested structure of specific elements:
Core Elements:
Optional but Important:
Basic Structure:
<table>
<caption>Table Description</caption>
<thead>
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>
Making tables accessible is crucial for users with screen readers:
Essential Attributes:
Caption and Summary:
Example:
<th scope="col" id="name">Name</th>
<th scope="col" id="sales">Sales</th>
<td headers="name">John Smith</td>
<td headers="sales">$50,000</td>
These features help screen readers understand table structure and relationships.
HTML tables support complex layouts and relationships:
Spanning Cells:
Example:
<td colspan="2">Spans two columns</td>
<td rowspan="3">Spans three rows</td>
Table Sections:
Column Groups:
These features enable complex data presentations while maintaining semantic structure.
Build a comprehensive business dashboard featuring various types of data tables with accessibility features and responsive design.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>TechCorp Analytics Dashboard - Q4 2024 Performance Report</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16 line-height: 1.6;
17 color: #333;
18 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19 min-height: 100vh;
20 }
21
22 .dashboard-container {
23 max-width: 1400px;
24 margin: 0 auto;
25 padding: 20px;
26 }
27
28 /* Header */
29 .dashboard-header {
30 background: white;
31 padding: 2rem;
32 border-radius: 12px;
33 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
34 margin-bottom: 2rem;
35 text-align: center;
36 }
37
38 .dashboard-header h1 {
39 font-size: 2.5rem;
40 color: #2c3e50;
41 margin-bottom: 0.5rem;
42 }
43
44 .dashboard-header p {
45 font-size: 1.2rem;
46 color: #7f8c8d;
47 }
48
49 .dashboard-date {
50 background: #3498db;
51 color: white;
52 padding: 0.5rem 1rem;
53 border-radius: 20px;
54 font-size: 0.9rem;
55 margin-top: 1rem;
56 display: inline-block;
57 }
58
59 /* Dashboard Grid */
60 .dashboard-grid {
61 display: grid;
62 grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
63 gap: 2rem;
64 margin-bottom: 2rem;
65 }
66
67 .dashboard-card {
68 background: white;
69 border-radius: 12px;
70 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
71 overflow: hidden;
72 transition: transform 0.3s ease, box-shadow 0.3s ease;
73 }
74
75 .dashboard-card:hover {
76 transform: translateY(-2px);
77 box-shadow: 0 8px 30px rgba(0,0,0,0.15);
78 }
79
80 .card-header {
81 padding: 1.5rem;
82 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
83 border-bottom: 1px solid #dee2e6;
84 }
85
86 .card-header h2 {
87 font-size: 1.3rem;
88 color: #2c3e50;
89 margin-bottom: 0.5rem;
90 }
91
92 .card-header p {
93 color: #6c757d;
94 font-size: 0.95rem;
95 }
96
97 /* Table Styles */
98 table {
99 width: 100%;
100 border-collapse: collapse;
101 background: white;
102 }
103
104 caption {
105 padding: 1rem;
106 font-size: 1.1rem;
107 font-weight: 600;
108 color: #2c3e50;
109 text-align: left;
110 background: #f8f9fa;
111 border-bottom: 2px solid #dee2e6;
112 }
113
114 thead {
115 background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
116 color: white;
117 }
118
119 th, td {
120 padding: 1rem;
121 text-align: left;
122 border-bottom: 1px solid #dee2e6;
123 }
124
125 th {
126 font-weight: 600;
127 font-size: 0.9rem;
128 text-transform: uppercase;
129 letter-spacing: 0.5px;
130 position: relative;
131 }
132
133 th[scope="col"]::after {
134 content: "📊";
135 position: absolute;
136 right: 8px;
137 top: 50%;
138 transform: translateY(-50%);
139 font-size: 0.8rem;
140 }
141
142 th[scope="row"] {
143 background: #ecf0f1;
144 color: #2c3e50;
145 font-weight: 700;
146 }
147
148 tbody tr:hover {
149 background: #f8f9fa;
150 }
151
152 tbody tr:nth-child(even) {
153 background: #fdfdfd;
154 }
155
156 tbody tr:nth-child(even):hover {
157 background: #f8f9fa;
158 }
159
160 /* Numeric data styling */
161 .number {
162 text-align: right;
163 font-family: 'Courier New', monospace;
164 font-weight: 600;
165 }
166
167 .positive {
168 color: #27ae60;
169 }
170
171 .negative {
172 color: #e74c3c;
173 }
174
175 .neutral {
176 color: #7f8c8d;
177 }
178
179 /* Status indicators */
180 .status {
181 padding: 0.3rem 0.8rem;
182 border-radius: 15px;
183 font-size: 0.8rem;
184 font-weight: 600;
185 text-align: center;
186 text-transform: uppercase;
187 }
188
189 .status-excellent {
190 background: #d5f4e6;
191 color: #27ae60;
192 }
193
194 .status-good {
195 background: #fef9e7;
196 color: #f39c12;
197 }
198
199 .status-poor {
200 background: #fadbd8;
201 color: #e74c3c;
202 }
203
204 /* Progress bars */
205 .progress-container {
206 background: #ecf0f1;
207 border-radius: 10px;
208 height: 20px;
209 overflow: hidden;
210 }
211
212 .progress-bar {
213 height: 100%;
214 border-radius: 10px;
215 transition: width 0.3s ease;
216 display: flex;
217 align-items: center;
218 justify-content: center;
219 font-size: 0.7rem;
220 font-weight: bold;
221 color: white;
222 text-shadow: 0 1px 2px rgba(0,0,0,0.2);
223 }
224
225 .progress-high {
226 background: linear-gradient(135deg, #27ae60, #2ecc71);
227 }
228
229 .progress-medium {
230 background: linear-gradient(135deg, #f39c12, #e67e22);
231 }
232
233 .progress-low {
234 background: linear-gradient(135deg, #e74c3c, #c0392b);
235 }
236
237 /* Spanning cells */
238 .span-cell {
239 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
240 font-weight: 600;
241 color: #2c3e50;
242 text-align: center;
243 }
244
245 /* Footer styling */
246 tfoot {
247 background: #2c3e50;
248 color: white;
249 font-weight: 600;
250 }
251
252 tfoot td {
253 border-bottom: none;
254 }
255
256 /* Responsive table wrapper */
257 .table-wrapper {
258 overflow-x: auto;
259 -webkit-overflow-scrolling: touch;
260 border-radius: 8px;
261 }
262
263 .table-wrapper::-webkit-scrollbar {
264 height: 8px;
265 }
266
267 .table-wrapper::-webkit-scrollbar-track {
268 background: #f1f1f1;
269 }
270
271 .table-wrapper::-webkit-scrollbar-thumb {
272 background: #c1c1c1;
273 border-radius: 4px;
274 }
275
276 .table-wrapper::-webkit-scrollbar-thumb:hover {
277 background: #a8a8a8;
278 }
279
280 /* Column group styling */
281 .col-name {
282 background: #f8f9fa;
283 }
284
285 .col-numbers {
286 background: #fff;
287 }
288
289 .col-status {
290 background: #f1f3f4;
291 }
292
293 /* Mobile responsiveness */
294 @media (max-width: 768px) {
295 .dashboard-grid {
296 grid-template-columns: 1fr;
297 }
298
299 .dashboard-header h1 {
300 font-size: 1.8rem;
301 }
302
303 th, td {
304 padding: 0.7rem 0.5rem;
305 font-size: 0.9rem;
306 }
307
308 .card-header {
309 padding: 1rem;
310 }
311 }
312
313 /* Print styles */
314 @media print {
315 body {
316 background: white;
317 }
318
319 .dashboard-card {
320 box-shadow: none;
321 border: 1px solid #ccc;
322 page-break-inside: avoid;
323 }
324
325 thead {
326 display: table-header-group;
327 }
328
329 tbody {
330 display: table-row-group;
331 }
332
333 tfoot {
334 display: table-footer-group;
335 }
336 }
337 </style>
338</head>
339<body>
340 <div class="dashboard-container">
341 <!-- Dashboard Header -->
342 <header class="dashboard-header">
343 <h1>TechCorp Analytics Dashboard</h1>
344 <p>Comprehensive Performance Report & Data Analysis</p>
345 <span class="dashboard-date">Q4 2024 • Updated December 15, 2024</span>
346 </header>
347
348 <div class="dashboard-grid">
349 <!-- Sales Performance Table -->
350 <div class="dashboard-card">
351 <div class="card-header">
352 <h2>Regional Sales Performance</h2>
353 <p>Quarterly revenue breakdown by sales region and performance metrics</p>
354 </div>
355 <div class="table-wrapper">
356 <table>
357 <caption>Q4 2024 Sales Performance by Region - All figures in USD thousands</caption>
358
359 <!-- Column groups for styling -->
360 <colgroup>
361 <col class="col-name">
362 <col class="col-numbers" span="3">
363 <col class="col-status">
364 </colgroup>
365
366 <thead>
367 <tr>
368 <th scope="col" id="region">Region</th>
369 <th scope="col" id="q4-sales">Q4 Sales</th>
370 <th scope="col" id="target">Target</th>
371 <th scope="col" id="variance">Variance</th>
372 <th scope="col" id="performance">Performance</th>
373 </tr>
374 </thead>
375
376 <tbody>
377 <tr>
378 <th scope="row" headers="region">North America</th>
379 <td headers="q4-sales" class="number">$2,450</td>
380 <td headers="target" class="number">$2,200</td>
381 <td headers="variance" class="number positive">+$250</td>
382 <td headers="performance">
383 <span class="status status-excellent">Excellent</span>
384 </td>
385 </tr>
386 <tr>
387 <th scope="row" headers="region">Europe</th>
388 <td headers="q4-sales" class="number">$1,890</td>
389 <td headers="target" class="number">$1,950</td>
390 <td headers="variance" class="number negative">-$60</td>
391 <td headers="performance">
392 <span class="status status-good">Good</span>
393 </td>
394 </tr>
395 <tr>
396 <th scope="row" headers="region">Asia Pacific</th>
397 <td headers="q4-sales" class="number">$1,340</td>
398 <td headers="target" class="number">$1,500</td>
399 <td headers="variance" class="number negative">-$160</td>
400 <td headers="performance">
401 <span class="status status-poor">Below Target</span>
402 </td>
403 </tr>
404 <tr>
405 <th scope="row" headers="region">Latin America</th>
406 <td headers="q4-sales" class="number">$675</td>
407 <td headers="target" class="number">$650</td>
408 <td headers="variance" class="number positive">+$25</td>
409 <td headers="performance">
410 <span class="status status-good">Good</span>
411 </td>
412 </tr>
413 </tbody>
414
415 <tfoot>
416 <tr>
417 <th scope="row">Total</th>
418 <td class="number">$6,355</td>
419 <td class="number">$6,300</td>
420 <td class="number positive">+$55</td>
421 <td><span class="status status-good">Target Met</span></td>
422 </tr>
423 </tfoot>
424 </table>
425 </div>
426 </div>
427
428 <!-- Product Performance with Spanning Cells -->
429 <div class="dashboard-card">
430 <div class="card-header">
431 <h2>Product Line Analysis</h2>
432 <p>Revenue and market share breakdown by product category</p>
433 </div>
434 <div class="table-wrapper">
435 <table>
436 <caption>Product Performance Matrix Q4 2024 - Revenue in USD thousands</caption>
437
438 <thead>
439 <tr>
440 <th scope="col" id="product">Product Line</th>
441 <th scope="col" id="revenue">Revenue</th>
442 <th scope="col" id="units">Units Sold</th>
443 <th scope="col" id="market-share">Market Share</th>
444 <th scope="col" id="growth">YoY Growth</th>
445 </tr>
446 </thead>
447
448 <tbody>
449 <!-- Enterprise Solutions Section -->
450 <tr>
451 <td colspan="5" class="span-cell">🏢 Enterprise Solutions</td>
452 </tr>
453 <tr>
454 <th scope="row" headers="product">Cloud Services</th>
455 <td headers="revenue" class="number">$2,100</td>
456 <td headers="units" class="number">450</td>
457 <td headers="market-share">
458 <div class="progress-container">
459 <div class="progress-bar progress-high" style="width: 85%">85%</div>
460 </div>
461 </td>
462 <td headers="growth" class="number positive">+15%</td>
463 </tr>
464 <tr>
465 <th scope="row" headers="product">Data Analytics</th>
466 <td headers="revenue" class="number">$1,650</td>
467 <td headers="units" class="number">320</td>
468 <td headers="market-share">
469 <div class="progress-container">
470 <div class="progress-bar progress-high" style="width: 72%">72%</div>
471 </div>
472 </td>
473 <td headers="growth" class="number positive">+22%</td>
474 </tr>
475
476 <!-- Consumer Products Section -->
477 <tr>
478 <td colspan="5" class="span-cell">👥 Consumer Products</td>
479 </tr>
480 <tr>
481 <th scope="row" headers="product">Mobile Apps</th>
482 <td headers="revenue" class="number">$890</td>
483 <td headers="units" class="number">12,500</td>
484 <td headers="market-share">
485 <div class="progress-container">
486 <div class="progress-bar progress-medium" style="width: 45%">45%</div>
487 </div>
488 </td>
489 <td headers="growth" class="number positive">+8%</td>
490 </tr>
491 <tr>
492 <th scope="row" headers="product">Web Platforms</th>
493 <td headers="revenue" class="number">$1,200</td>
494 <td headers="units" class="number">2,800</td>
495 <td headers="market-share">
496 <div class="progress-container">
497 <div class="progress-bar progress-medium" style="width: 58%">58%</div>
498 </div>
499 </td>
500 <td headers="growth" class="number negative">-3%</td>
501 </tr>
502
503 <!-- Support Services Section -->
504 <tr>
505 <td colspan="5" class="span-cell">🔧 Support & Services</td>
506 </tr>
507 <tr>
508 <th scope="row" headers="product">Technical Support</th>
509 <td headers="revenue" class="number">$515</td>
510 <td headers="units" class="number">1,850</td>
511 <td headers="market-share">
512 <div class="progress-container">
513 <div class="progress-bar progress-low" style="width: 32%">32%</div>
514 </div>
515 </td>
516 <td headers="growth" class="number positive">+5%</td>
517 </tr>
518 </tbody>
519
520 <tfoot>
521 <tr>
522 <th scope="row">Portfolio Total</th>
523 <td class="number">$6,355</td>
524 <td class="number">18,920</td>
525 <td>
526 <div class="progress-container">
527 <div class="progress-bar progress-high" style="width: 65%">65%</div>
528 </div>
529 </td>
530 <td class="number positive">+12%</td>
531 </tr>
532 </tfoot>
533 </table>
534 </div>
535 </div>
536 </div>
537
538 <!-- Employee Performance Table (Full Width) -->
539 <div class="dashboard-card">
540 <div class="card-header">
541 <h2>Top Sales Representatives</h2>
542 <p>Individual performance metrics and achievement tracking for Q4 2024</p>
543 </div>
544 <div class="table-wrapper">
545 <table>
546 <caption>Q4 2024 Sales Team Performance Rankings - Individual Contributor Results</caption>
547
548 <colgroup>
549 <col style="width: 5%">
550 <col style="width: 20%">
551 <col style="width: 15%">
552 <col style="width: 15%">
553 <col style="width: 15%">
554 <col style="width: 15%">
555 <col style="width: 15%">
556 </colgroup>
557
558 <thead>
559 <tr>
560 <th scope="col" id="rank">Rank</th>
561 <th scope="col" id="name">Sales Representative</th>
562 <th scope="col" id="total-sales">Total Sales</th>
563 <th scope="col" id="quota">Quota</th>
564 <th scope="col" id="achievement">Achievement</th>
565 <th scope="col" id="deals">Deals Closed</th>
566 <th scope="col" id="commission">Commission</th>
567 </tr>
568 </thead>
569
570 <tbody>
571 <tr>
572 <th scope="row" headers="rank">🥇 1</th>
573 <td headers="name"><strong>Sarah Johnson</strong><br><small>Enterprise Sales</small></td>
574 <td headers="total-sales" class="number">$485,000</td>
575 <td headers="quota" class="number">$400,000</td>
576 <td headers="achievement">
577 <div class="progress-container">
578 <div class="progress-bar progress-high" style="width: 100%">121%</div>
579 </div>
580 </td>
581 <td headers="deals" class="number">28</td>
582 <td headers="commission" class="number positive">$48,500</td>
583 </tr>
584 <tr>
585 <th scope="row" headers="rank">🥈 2</th>
586 <td headers="name"><strong>Michael Chen</strong><br><small>Regional Sales</small></td>
587 <td headers="total-sales" class="number">$420,000</td>
588 <td headers="quota" class="number">$380,000</td>
589 <td headers="achievement">
590 <div class="progress-container">
591 <div class="progress-bar progress-high" style="width: 100%">111%</div>
592 </div>
593 </td>
594 <td headers="deals" class="number">35</td>
595 <td headers="commission" class="number positive">$42,000</td>
596 </tr>
597 <tr>
598 <th scope="row" headers="rank">🥉 3</th>
599 <td headers="name"><strong>Emily Rodriguez</strong><br><small>Inside Sales</small></td>
600 <td headers="total-sales" class="number">$385,000</td>
601 <td headers="quota" class="number">$350,000</td>
602 <td headers="achievement">
603 <div class="progress-container">
604 <div class="progress-bar progress-high" style="width: 100%">110%</div>
605 </div>
606 </td>
607 <td headers="deals" class="number">52</td>
608 <td headers="commission" class="number positive">$38,500</td>
609 </tr>
610 <tr>
611 <th scope="row" headers="rank">4</th>
612 <td headers="name"><strong>David Kim</strong><br><small>Enterprise Sales</small></td>
613 <td headers="total-sales" class="number">$365,000</td>
614 <td headers="quota" class="number">$380,000</td>
615 <td headers="achievement">
616 <div class="progress-container">
617 <div class="progress-bar progress-medium" style="width: 96%">96%</div>
618 </div>
619 </td>
620 <td headers="deals" class="number">22</td>
621 <td headers="commission" class="number neutral">$36,500</td>
622 </tr>
623 <tr>
624 <th scope="row" headers="rank">5</th>
625 <td headers="name"><strong>Lisa Thompson</strong><br><small>Regional Sales</small></td>
626 <td headers="total-sales" class="number">$340,000</td>
627 <td headers="quota" class="number">$320,000</td>
628 <td headers="achievement">
629 <div class="progress-container">
630 <div class="progress-bar progress-high" style="width: 100%">106%</div>
631 </div>
632 </td>
633 <td headers="deals" class="number">31</td>
634 <td headers="commission" class="number positive">$34,000</td>
635 </tr>
636
637 <!-- Team Averages Section -->
638 <tr style="border-top: 2px solid #dee2e6;">
639 <td colspan="7" class="span-cell">📊 Team Performance Summary</td>
640 </tr>
641 <tr>
642 <th scope="row" headers="rank">Avg</th>
643 <td headers="name"><strong>Team Average</strong><br><small>All Representatives</small></td>
644 <td headers="total-sales" class="number">$399,000</td>
645 <td headers="quota" class="number">$366,000</td>
646 <td headers="achievement">
647 <div class="progress-container">
648 <div class="progress-bar progress-high" style="width: 100%">109%</div>
649 </div>
650 </td>
651 <td headers="deals" class="number">34</td>
652 <td headers="commission" class="number positive">$39,900</td>
653 </tr>
654 </tbody>
655 </table>
656 </div>
657 </div>
658
659 <!-- Monthly Trend Table -->
660 <div class="dashboard-card">
661 <div class="card-header">
662 <h2>Monthly Revenue Trends</h2>
663 <p>Month-over-month revenue progression and growth analysis</p>
664 </div>
665 <div class="table-wrapper">
666 <table>
667 <caption>Q4 2024 Monthly Revenue Trends - Comparative Analysis</caption>
668
669 <thead>
670 <tr>
671 <th scope="col" id="metric">Metric</th>
672 <th scope="col" id="oct">October</th>
673 <th scope="col" id="nov">November</th>
674 <th scope="col" id="dec">December</th>
675 <th scope="col" id="q4-total">Q4 Total</th>
676 <th scope="col" id="mom-growth">MoM Growth</th>
677 </tr>
678 </thead>
679
680 <tbody>
681 <tr>
682 <th scope="row" headers="metric">Revenue (000s)</th>
683 <td headers="oct" class="number">$2,100</td>
684 <td headers="nov" class="number">$2,055</td>
685 <td headers="dec" class="number">$2,200</td>
686 <td headers="q4-total" class="number">$6,355</td>
687 <td headers="mom-growth" class="number positive">+7.1%</td>
688 </tr>
689 <tr>
690 <th scope="row" headers="metric">New Customers</th>
691 <td headers="oct" class="number">142</td>
692 <td headers="nov" class="number">158</td>
693 <td headers="dec" class="number">165</td>
694 <td headers="q4-total" class="number">465</td>
695 <td headers="mom-growth" class="number positive">+4.4%</td>
696 </tr>
697 <tr>
698 <th scope="row" headers="metric">Avg Deal Size</th>
699 <td headers="oct" class="number">$14,789</td>
700 <td headers="nov" class="number">$13,006</td>
701 <td headers="dec" class="number">$13,333</td>
702 <td headers="q4-total" class="number">$13,676</td>
703 <td headers="mom-growth" class="number positive">+2.5%</td>
704 </tr>
705 <tr>
706 <th scope="row" headers="metric">Conversion Rate</th>
707 <td headers="oct" class="number">23.5%</td>
708 <td headers="nov" class="number">26.1%</td>
709 <td headers="dec" class="number">28.3%</td>
710 <td headers="q4-total" class="number">26.0%</td>
711 <td headers="mom-growth" class="number positive">+8.4%</td>
712 </tr>
713 </tbody>
714
715 <tfoot>
716 <tr>
717 <th scope="row">Performance Status</th>
718 <td class="status status-good">Above Plan</td>
719 <td class="status status-good">Above Plan</td>
720 <td class="status status-excellent">Exceeded</td>
721 <td class="status status-excellent">Target Met</td>
722 <td class="status status-excellent">Strong Growth</td>
723 </tr>
724 </tfoot>
725 </table>
726 </div>
727 </div>
728 </div>
729</body>
730</html>This comprehensive business dashboard demonstrates all aspects of HTML tables including basic structure, accessibility features (scope attributes, headers, captions), advanced features (colspan, rowspan, colgroup), semantic table sections (thead, tbody, tfoot), and responsive design. Each table serves a specific business purpose while maintaining proper semantic structure and accessibility standards.
Excellent work mastering HTML tables! You now understand how to present complex data in structured, accessible formats. Next, we'll explore forms and input elements to learn how to collect and process user information effectively.
Your progress is saved in this browser, on this device only.