CSS Lists, Tables & Forms
CSS Tables
The CSS Tables properties are used to control the appearance and layout of HTML tables.
By default, HTML tables have minimal styling. CSS allows you to: The supporting concepts are explained in CSS Overflow and Responsive Layout.
- Add borders
- Change colors
- Control spacing
- Align content
- Improve readability
CSS table styling is commonly used for:
- Data tables
- Reports
- Pricing tables
- Schedules
- Dashboards
Syntax
CSS Tables Syntax
css
selector {
property: value;
}CSS Tables Example
css
table {
border: 1px solid black;
}This adds a border around the table.
Attributes
| Property | Description | Example |
|---|---|---|
| border | Adds border to table cells | border: 1px solid black; |
| border-collapse | Merges adjacent borders | border-collapse: collapse; |
| width | Sets table width | width: 100%; |
| text-align | Aligns cell content | text-align: center; |
| padding | Adds space inside cells | padding: 10px; |
Example
CSS Tables Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Tables Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #007acc;
color: white;
}
th,
td {
border: 1px solid #cccccc;
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h2>Student Information</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>10</td>
<td>85</td>
</tr>
<tr>
<td>Emma</td>
<td>10</td>
<td>92</td>
</tr>
<tr>
<td>David</td>
<td>10</td>
<td>88</td>
</tr>
</table>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| border-collapse | 1 | 12 | 1 | 1.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
border-collapse: collapse;is commonly used for cleaner tables.- Use
paddingto improve readability. width: 100%;makes tables responsive within their container.- Zebra striping (
nth-child) improves readability for large tables. - Header cells are typically styled differently from data cells.
Common Table Properties
| Property | Purpose |
|---|---|
| border | Adds cell borders |
| border-collapse | Combines borders |
| padding | Adds spacing inside cells |
| text-align | Aligns content |
| background-color | Adds cell background color |
Conclusion
CSS Tables allow you to transform plain HTML tables into clean, professional, and easy-to-read data displays. By styling borders, spacing, alignment, and colors, you can create tables that are both functional and visually appealing.