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:

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>

Output

Browser Output

css

A full-width table will appear
The header row will have a blue background with white text
Each cell will have borders
Alternate rows will have a light gray background
Content will be neatly aligned and spaced

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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