CSS Lists, Tables & Forms

CSS Tables

Written by Swapnil RajaUpdated 30 Jul 2026

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 padding to 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.

PreviousCSS Lists NextCSS Form Styling