Tailwind CSS - Tables


Tailwind CSS Tables include the Border Collapse, Border Spacing, Table layout and Caption Side. These are important concepts of tailwind tables, to design a table, these concepts are necessary to learn.

Tailwind CSS Tables Reference

Below mentioned topics can be used to design tables in tailwind.

Topic Description Example
Tailwind CSS - Border Collapse This is used to control whether table borders should collapse or be separated.
Tailwind CSS - Border Spacing This is used to control spacing between borders.
Tailwind CSS - Table Layout This is used to control the table layout algorithm.
Tailwind CSS - Caption Side This is used to control the alignment of a caption element inside of a table.

Example of Tailwind CSS Tables

Below example will illustrate the Tailwind CSS. We will use it to see the impact of each mentioned topic in the given code.

Example

<!DOCTYPE html>

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

<body class="p-4">
    <h1 class="text-3xl mb-3"> Tailwind CSS Tables </h1>
    <table class="border-separate table-fixed w-full
                  border-spacing-x-2
                  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"> 
                    Acronym </th>
                <th class="bg-green-600 border border-slate-600"> 
                    Stand For </th>
                <th class="bg-green-600 border border-slate-600"> 
                    Description </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>
                <td class="bg-green-300 border border-slate-700"> 
                    HTML is used to create content and structure of any web page. 
                </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>
                <td class="bg-green-300 border border-slate-700"> 
                    It's a style sheet language used for describing 
                    the presentation of a document written in a markup
                    language like HTML 
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>