Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Caption Side

Quiz

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>

Print Page