What is HTML Table Styling?

In this article, we will learn HTML Table Styling,This free HTML tutorial for complete beginners will help you learn HTML from scratch.

HTML Table Styling - ❤️HTML Tutorials In 2024

Q: How to use HTML Table Styling in HTML?

HTML Table Styling offers various styling techniques to make the table more presentable and attractive

HTML Table Styling offers various styling techniques to make the table more presentable and attractive. The article will cover various HTML Table Styling including, HTML Table Styling-Zebra Stripes using tr:nth-child(even), Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even) and many more using different CSS properties.

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 2px;
    text-align: center;
}

tr:nth-child(even) {
    background-color: rgb(190, 250, 230);
}

Table of Content

HTML Table Styling-Zebra Stripes
HTML Table Styling-Vertical Zebra Stripes
Combine Vertical and Horizontal Zebra Stripes
Horizontal Dividers
Hoverable Table

HTML Table Styling with Zebra Stripes uses the :nth-child(even) a selector to apply a background color to every even table row, creating a visually distinct zebra stripe pattern. Use the :nth-child(odd) a selector to apply a background color to every odd table row.

Example: Illustration of the HTML table Zebra Stripes using tr:nth-child(even).

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Styling</title>
    <style>
        h1,h3 {
            text-align: center;
            color: green;
        }
 
        table {
            width: 100%;
            border-collapse: collapse;
        }
 
        th,
        td {
            padding: 2px;
            text-align: center;
        }
 
        tr:nth-child(even) {
            background-color: rgb(190, 250, 230);
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>HTML Table Styling with Zebra Stripes</h3>
 
    <table>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>
                Roll No
            </th>
        </tr>
        <tr>
            <td>Mahima</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Krishn</td>
            <td>8</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Shivika</td>
            <td>8</td>
            <td>5</td>
        </tr>
    </table>
 
</body>
 
</html>

Output:

HTML Table Styling with Vertical Zebra Stripes uses the :nth-child(even) selector for both the elements (<td> and <th>) to apply a background color to every even table column, creating a visually distinct zebra stripe pattern. Use the :nth-child(odd) selector to apply a background color to every odd table column.

Example: Illustrattion of the styling on Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even).

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Styling</title>
    <style>
        h1,h3 {
            text-align: center;
            color: green;
        }
 
        table {
            width: 100%;
            border-collapse: collapse;
        }
 
        th,
        td {
            padding: 2px;
            text-align: center;
        }
 
        td:nth-child(even) {
            background-color: rgb(196, 244, 228);
        }
 
        th:nth-child(even) {
            background-color: rgb(196, 244, 228);
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>HTML Table Styling with 
        Vertical Zebra Stripes
    </h3>
    <table>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>
                Roll No
            </th>
        </tr>
        <tr>
            <td>Mahima</td>
            <td>10</td>
            <td>A</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Krishn</td>
            <td>8</td>
            <td>A</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Shivika</td>
            <td>8</td>
            <td>A</td>
            <td>5</td>
        </tr>
    </table>
 
</body>
 
</html>

Output:

HTML Table Styling with Combine Vertical and Horizontal Zebra Stripes uses the :nth-child(even) selector for both the elements (<td>, <th>, and <td>) to apply a background color to every even table column and row, creating a visually distinct zebra stripe pattern.

Example: Illustration of combining the Vertical and Horizontal Zebra Stripes using td:nth-child(even) and th:nth-child(even).

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML Table Styling</title>
    <style>
        h1,
        h3 {
            text-align: center;
            color: green;
        }
 
        table {
            width: 100%;
        }
 
        table,
        th,
        td {
            border-collapse: collapse;
            padding: 10px;
            text-align: center;
        }
 
        tr:nth-child(even) {
            background-color: rgba(89, 208, 97, 0.4);
        }
 
        th:nth-child(even),
        td:nth-child(even) {
            background-color: rgba(89, 208, 97, 0.4);
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>HTML Table Styling with Combine
        Vertical and Horizontal Zebra Stripes
    </h3>
    <table>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Roll No</th>
            <th>School</th>
        </tr>
        <tr>
            <td>Mahima</td>
            <td>10</td>
            <td>A</td>
            <td>1</td>
            <td>MVM</td>
        </tr>
        <tr>
            <td>Krishn</td>
            <td>8</td>
            <td>A</td>
            <td>3</td>
            <td>MVM</td>
        </tr>
        <tr>
            <td>Shivika</td>
            <td>8</td>
            <td>A</td>
            <td>5</td>
            <td>MVM</td>
        </tr>
    </table>
 
</body>
 
</html>

Output:

Horizontal Dividers after each row can be achieved using the border-bottom property.

Example: Illustration of the Horizontal Dividers using border-bottom property.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Styling</title>
    <style>
        h1,
        h3 {
            text-align: center;
            color: green;
        }
 
        table {
            width: 100%;
            border-collapse: collapse;
        }
 
        th,
        td {
            padding: 2px;
            text-align: center;
        }
 
        tr {
            border-bottom: 2px solid black;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>Table with Horizontal Dividers
 
    </h3>
 
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>
                    Roll No
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Shivika</td>
                <td>8</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
 
</body>
 
</html>

Output:

The hoverable Table effect on each row can be achieved by using:hover selector to the <tr> element

Example: Illustration of creating a Hoverable Table effect using different CSS properties.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Styling</title>
    <style>
        h1,
        h3 {
            text-align: center;
            color: green;
        }
 
        table {
            width: 100%;
            border-collapse: collapse;
        }
 
        th,
        td {
            padding: 1px;
            text-align: center;
            border-bottom: 1px solid black;
        }
 
        tr:hover {
            background-color: rgb(205, 243, 187);
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h3>Hoverable Table</h3>
 
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>
                    Roll No
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Shivika</td>
                <td>8</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
 
</body>
 
</html>

Output:

HTML Table Styling

Syntax

HTML Table Styling with Zebra Stripes

HTML

HTML Table Styling with Vertical Zebra Stripes

HTML

Combine Vertical and Horizontal Zebra Stripes

HTML

Horizontal Dividers

HTML

Hoverable Table

HTML