Table Style Configuration

Table Style Configuration

The styles for tables include table captions, border collapse, and border spacing.
::: normal-demo Table Caption

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,tr, td,th{border:1px solid silver;}
        table{caption-side:bottom;}
    </style>
</head>
<body>
    <table>
        <caption>Table Caption</caption>
        <!-- Table Header -->
        <thead>
            <tr>
                <th>Header Cell 1</th>
                <th>Header Cell 2</th>
            </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
            <tr>
                <td>Row Cell 1</td>
                <td>Row Cell 2</td>
            </tr>
            <tr>
                <td>Row Cell 3</td>
                <td>Row Cell 4</td>
            </tr>
        </tbody>
        <!-- Table Footer -->
        <tfoot>
            <tr>
                <td>Row Cell 5</td>
                <td>Row Cell 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

:::

border-collapse(Table Border Collapse)

::: normal-demo Table Border Collapse

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
    <table>
        <caption>Table Caption</caption>
        <!-- Table Header -->
        <thead>
            <tr>
                <th>Header Cell 1</th>
                <th>Header Cell 2</th>
            </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
            <tr>
                <td>Row Cell 1</td>
                <td>Row Cell 2</td>
            </tr>
            <tr>
                <td>Row Cell 3</td>
                <td>Row Cell 4</td>
            </tr>
        </tbody>
        <!-- Table Footer -->
        <tfoot>
            <tr>
                <td>Row Cell 5</td>
                <td>Row Cell 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

:::

border-spacing(Table Border Spacing)

::: normal-demo Table Border Spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}
    </style>
</head>
<body>
    <table>
        <caption>Table Caption</caption>
        <!-- Table Header -->
        <thead>
            <tr>
                <th>Header Cell 1</th>
                <th>Header Cell 2</th>
            </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
            <tr>
                <td>Row Cell 1</td>
                <td>Row Cell 2</td>
            </tr>
            <tr>
                <td>Row Cell 3</td>
                <td>Row Cell 4</td>
            </tr>
        </tbody>
        <!-- Table Footer -->
        <tfoot>
            <tr>
                <td>Row Cell 5</td>
                <td>Row Cell 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

:::