CSSのcaption-sideで表のキャプション位置を指定する方法をわかりやすく解説

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #333;
        padding: 10px;
        text-align: center;
    }
    caption {
        font-weight: bold;
        background-color: #4CAF50;
        color: white;
        padding: 10px;
    }
    

<div class="css-sample-container">
    <table class="css-sample-caption-side-top">
        <caption>テーブルのタイトル（上部）</caption>
        <tr><th>ヘッダー1</th><th>ヘッダー2</th></tr>
        <tr><td>データ1</td><td>データ2</td></tr>
    </table>
    </div>

.css-sample-caption-side-top caption {
    caption-side: top;
}

<div class="css-sample-container">
    <table class="css-sample-caption-side-bottom">
        <caption>テーブルのタイトル（下部）</caption>
        <tr><th>ヘッダー1</th><th>ヘッダー2</th></tr>
        <tr><td>データ1</td><td>データ2</td></tr>
    </table>
    </div>

.css-sample-caption-side-bottom caption {
    caption-side: bottom;
}