Currently Empty: ₹0.00
CSS Tables
CSS CODES & EXAMPLES
CSS Tables
Learn how to design HTML tables with CSS. Create clean data tables, student result tables, course tables, pricing tables, hover effects, zebra stripes and responsive table layouts.
01
Introduction to CSS Tables
Style HTML table elementsHTML tables are used to display structured information in rows and columns. CSS allows you to control borders, spacing, alignment, colors, typography, hover effects and responsive behavior.
Common elements:
<table>
<tr>
<th>
<td>
<caption>
02
Table Borders
Add borders to tables
The border property adds a visible border around table
elements.
table-border.css
table,
th,
td {
border: 1px solid #1769d5;
}
th,
td {
padding: 12px;
}| Course | Duration |
|---|---|
| CCA | 6 Months |
| DCA | 1 Year |
03
border-collapse
Control table border behavior
The border-collapse property controls whether adjacent
table borders are separated or combined.
Separate
| Name | Course |
|---|---|
| Rahul | DCA |
Collapse
| Name | Course |
|---|---|
| Rahul | DCA |
border-collapse.css
table {
border-collapse: collapse;
}
04
Table Width & Height
Control table dimensions
table-size.css
table {
width: 100%;
}
th,
td {
height: 45px;
}| Subject | Marks |
|---|---|
| Computer | 92 |
| English | 86 |
05
Table Alignment
Align table content| Student | Course | Score |
|---|---|---|
| Priya | DCA | 94% |
| Amit | CCA | 89% |
table-align.css
th {
text-align: left;
}
td {
text-align: center;
}
06
Table Padding
Create comfortable table spacingPadding creates space between the table content and its cell border.
table-padding.css
th,
td {
padding: 15px 20px;
}| Course | Level |
|---|---|
| ADCA | Advanced |
| Web Designing | Professional |
07
Table Colors
Style headers and cells| Course | Duration | Mode |
|---|---|---|
| CCA | 6 Months | Online / Offline |
| DCA | 1 Year | Online / Offline |
| ADCA | 1 Year | Online / Offline |
table-color.css
th {
background: #1769d5;
color: white;
}
td {
background: #f5f9fd;
}
08
Table Headers
Design professional headers| Student ID | Student Name | Course | Status |
|---|---|---|---|
| SN001 | Rahul Kumar | DCA | Active |
| SN002 | Priya Singh | CCA | Active |
| SN003 | Amit Yadav | ADCA | Completed |
09
Zebra-Stripped Tables
Alternate row backgrounds| # | Subject | Marks | Grade |
|---|---|---|---|
| 1 | Computer | 95 | A+ |
| 2 | English | 88 | A |
| 3 | Mathematics | 91 | A+ |
| 4 | Science | 84 | A |
zebra-table.css
tr:nth-child(even) {
background: #f3f7fb;
}
10
Hoverable Table Rows
Add interaction to table rows| Course | Duration | Students |
|---|---|---|
| CCA | 6 Months | 45 |
| DCA | 1 Year | 68 |
| ADCA | 1 Year | 52 |
table-hover.css
tbody tr:hover {
background: #eaf4ff;
cursor: pointer;
}
11
Responsive Tables
Make tables mobile friendlyWide tables can overflow on small screens. A common solution is to place the table inside a horizontally scrollable container.
| Student | Course | Registration | Admission Date | Mode | Status |
|---|---|---|---|---|---|
| Rahul Kumar | DCA | SN001 | 15 Aug 2026 | Online | Active |
| Priya Singh | ADCA | SN002 | 16 Aug 2026 | Offline | Active |
responsive-table.css
.table-wrapper {
overflow-x: auto;
}
table {
min-width: 700px;
width: 100%;
}
12
Table Captions
Add titles to tables| Course | Duration |
|---|---|
| CCA | 6 Months |
| DCA | 1 Year |
| ADCA | 1 Year |
table-caption.css
caption {
caption-side: top;
padding: 12px;
font-weight: bold;
color: #1769d5;
}
13
border-spacing
Control space between cells| HTML | CSS | JS |
|---|---|---|
| Structure | Design | Interaction |
border-spacing.css
table {
border-spacing: 8px;
}
14
empty-cells
Control empty table cells| Course | Duration | Mode |
|---|---|---|
| CCA | 6 Months | |
| DCA | Online |
empty-cells.css
table {
empty-cells: show;
}
15
Professional Data Table
Modern dashboard-style table
Student Records
Current academic records
2026| Student | Course | Progress | Status |
|---|---|---|---|
| Rahul Kumar | DCA | Active | |
| Priya Singh | ADCA | Active | |
| Amit Yadav | CCA | Completed |
16
Course Table
Education website example| Course | Level | Duration | Certificate |
|---|---|---|---|
| CCA | Certificate | 6 Months | Yes |
| DCA | Diploma | 1 Year | Yes |
| ADCA | Advanced Diploma | 1 Year | Yes |
17
Student Result Table
Academic result example| Subject | Max Marks | Obtained | Grade | Result |
|---|---|---|---|---|
| Computer | 100 | 94 | A+ | PASS |
| English | 100 | 87 | A | PASS |
| Mathematics | 100 | 91 | A+ | PASS |
| Total | 300 | 272 | A+ | PASS |
18
Pricing Table
Course pricing examplePOPULAR
DCA
₹5,999- Computer Applications
- MS Office
- Internet & Digital Skills
- Practical Training
- Certificate
ADVANCED
ADCA
₹8,999- Advanced Applications
- Office Automation
- Web Designing
- Practical Projects
- Certificate
19
Live CSS Table Runner
Experiment with a real table example
LIVE PREVIEW
20
Practice Task
Test your CSS Tables skills🎯 Your Challenge
Create a professional student result table using HTML and CSS.
- Create a table with five columns.
- Add a professional table header.
- Use
border-collapse. - Add cell padding.
- Create zebra-striped rows.
- Add a hover effect.
- Display PASS and FAIL badges.
- Make the table responsive.
21
CSS Table Quick Reference
Important propertiesborder
Adds borders around table elements.border-collapse
Combines or separates table borders.border-spacing
Controls spacing between cells.padding
Controls space inside table cells.text-align
Controls horizontal text alignment.vertical-align
Controls vertical content alignment.width
Controls table or column width.height
Controls table cell height.caption-side
Controls caption position.empty-cells
Controls the appearance of empty cells.