Tailwind CSS - Caption Side


Tailwind CSS Caption Side is a utility class that used to controll the alignment of a caption element inside of a table.

Tailwind CSS Caption Side Classes

The following is the list of Tailwind CSS Caption Side Classes that provides an effective way of handling the alignment of a caption element inside of a table..

Class CSS Properties
caption-top caption-side: top;
caption-bottom caption-side: bottom;

Functionality of Tailwind CSS Caption Side Classes

  • caption-top: This class is used to places the caption's above the table.
  • caption-bottom: This class is used to places the caption's below the table.

Tailwind CSS Caption Side Class Examples

The following examples will illustrate the Tailwind CSS Caption Side class utility.

Setting Caption at Top

By using `caption-top` class we can align the caption at the top of the tabel.

Example

<!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>

Setting Caption at Bottom

By using `caption-bottom` class we can align the caption at the bottom of the tabel.

Example

<!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>