Adding Border Spacing in an HTML Table

Adding Left Align Headings in an HTML Table

Adding Cells that Span Many Columns in HTML Tables

Border spacing specifies the space between the cells. To set the border-spacing for a table, we must use the CSS border-spacing property.

Syntax

table {
      border-spacing: 5px;
}

Example: Explains the border space property to make the space between the Table cells.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-spacing: 5px;
        }
    </style>
</head>

<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

Border Spacing Property

HTML Tables

HTML tables offer a powerful tool for presenting data on your website. But mastering them goes beyond just rows and columns. This article serves as your ultimate guide to unlocking the potential of HTML tables, stepping beyond the basics.

Prerequisites: HTML Introduction