Tailwind CSS - 表格

Tailwind CSS 表格包括**边框折叠、边框间距、表格布局**和**标题位置**。这些是 Tailwind 表格的重要概念，要设计表格，必须学习这些概念。

Tailwind CSS 表格参考

下面提到的主题可用于在 Tailwind 中设计表格。

主题	描述	示例
Tailwind CSS - 边框折叠	用于控制表格边框是折叠还是分开。	尝试一下
Tailwind CSS - 边框间距	用于控制边框之间的间距。	尝试一下
Tailwind CSS - 表格布局	用于控制表格布局算法。	尝试一下
Tailwind CSS - 标题位置	用于控制表格内标题元素的对齐方式。	尝试一下

Tailwind CSS 表格示例

下面的示例将说明 Tailwind CSS。我们将使用它来查看给定代码中每个提到的主题的影响。

示例

Open Compiler

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

打印页面