テーブルのcaptionと表示位置を指定するcaption-sideについて【HTML/CSS】

<table>
    <caption>ここに表のタイトまたは注釈を入れる</caption>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </tbody>
</table>

/* 表の上に表示 */
caption {
    caption-side: top;
}

/* 表の下に表示 */
caption {
    caption-side: bottom;
}

<table class="table1">
    <caption>表のタイトル表のタイトル表のタイトル</caption>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </tbody>
</table>

<table class="table2">
    <caption>表の注釈表の注釈表の注釈</caption>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </tbody>
</table>

.table1 caption {
    caption-side: top;
}

.table2 caption {
    caption-side: bottom;
}