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;
}

PreviousCSS Lists NextCSS Form Styling

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;

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>

CSS Tables

Syntax

Attributes

Example

Browser Support

Notes

Common Table Properties

Conclusion

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