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

Tailwind CSS - Tables

Quiz

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.	Try It
Tailwind CSS - Border Spacing	This is used to control spacing between borders.	Try It
Tailwind CSS - Table Layout	This is used to control the table layout algorithm.	Try It
Tailwind CSS - Caption Side	This is used to control the alignment of a caption element inside of a table.	Try It

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>

Print Page