Tailwind CSS - 標題側邊

Tailwind CSS 標題側邊 是一個實用程式類，用於控制表格內標題元素的對齊方式。

Tailwind CSS 標題側邊類

以下是Tailwind CSS 標題側邊類的列表，它提供了一種有效的方法來處理表格內標題元素的對齊方式。

類	CSS 屬性
caption-top	caption-side: top;
caption-bottom	caption-side: bottom;

Tailwind CSS 標題側邊類功能

caption-top: 此類用於將標題放置在表格上方。
caption-bottom: 此類用於將標題放置在表格下方。

Tailwind CSS 標題側邊類示例

以下示例將說明 Tailwind CSS 標題側邊類實用程式。

將標題設定在頂部

透過使用`caption-top`類，我們可以將標題與表格的頂部對齊。

示例

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Caption Side
    </h1>
    <table class="border-collapse w-full
                  border border-slate-500">
        <caption class="caption-top">
            Table Caption: Starting of Web Development
        </caption>
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

將標題設定在底部

透過使用`caption-bottom`類，我們可以將標題與表格的底部對齊。

示例

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Caption Side
    </h1>
    <table class="border-collapse w-full
                  border border-slate-500">
        <caption class="caption-bottom">
            Table Caption: Starting of Web Development
        </caption>
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

列印頁面