CSS Table

表格布局有两种使用方式，一种是使用HTML提供的table标签，一种是使用CSS提供的display:table属性。CSS提供的display:table属性主要为表设置表格布局算法，CSS Table实际上是使用CSS属性模仿HTML Table的布局模型。

HTML Table是包含语义化的标签，它描述了什么是数据，因此最好是用于标记那些需要制表的数据，比如财务信息表。如果数据能够以电子表格的形式保存在电脑中，那么它在HTML文档中很可能需要使用HTML Table标签来进行标记。

CSS Table只是声明了元素在浏览器中的样式，它并不包含语义。如果使用HTML TABLE来布局，它会客户端这些数据是制表的。而使用CSS Table属性设置的元素除了告知客户端以某种样式渲染以外，不会告诉客户端任何语义，只需要客户端能够支持这些属性。

HTML Table	CSS Table	描述
<table>	display:table	表格，设置元素作为块级表格
<caption>	display:caption	标题，设置元素作为表格标题
<thead>	display:table-header-group	标题组，设置元素作为标题组
<tfoot>	display:table-footer-group	脚注组，设置表格作为脚注组
<tr>	display:table-row	行，设置元素作为表格行
<tbody>	display:table-row-group	行组，设置元素作为表格行组
<col>	display:table-column	列，设置元素作为表格列
<colgroup>	display:table-column-group	列组，设置元素作为表格列组
<th>,<td>	display:table-cell	单元格，设置元素作为表格单元格

协助属性

vertical-align属性设置行内元素或表格单元格元的垂直对齐方式

border-collapse属性用于设置表格边框的合并模式

合并模式	描述
border-collapse:collapse	合并模式，相邻单元格共享边框。
border-collpase:spacing	分割模式，相邻单元格各自拥有独立的边框。

border-spacing属性用于设置相邻单元格边框之间的距离，仅适用于分割模式。

table-layout属性用于设置勇于布局表格的单元格、行、列的算法

布局算法	描述
table-layout:auto	表格及单元格的宽度取决于其包含的内容
table-layout:fixed	表格和列宽通过表格宽度来设置，列宽由首行单元格决定。

注意事项

属性	注意
display:table	目标元素padding失效
display:table-row	目标元素padding和margin失效
display:table-cell	目标元素margin失效

例如：使用CSS Table制作栅格

table

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 h-full bg-gray-200 flex items-center justify-center">
  <div class="table w-full border-collapse">
    <div class="table-row">
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
          <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover"/>
          <p class="py-2">table cell title</p>
      </div>
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
        <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover" />
        <p class="py-2">table cell title</p>
      </div>
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
        <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover" />
        <p class="py-2">table cell title</p>
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
          <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover"/>
          <p class="py-2">table cell title</p>
      </div>
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
        <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover" />
        <p class="py-2">table cell title</p>
      </div>
      <div class="table-cell p-2 bg-gray-400 text-center align-middle border border-gray-600">
        <img src="http://source.unsplash.com/200x200" class="inline w-full object-cover" />
        <p class="py-2">table cell title</p>
      </div>
    </div>
  </div>
</div>

例如：使用CSS Table制作搜索栏

search

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 flex items-center justify-center">
  <div class="table border-separate w-100 border border-gray-400">
    <input type="text" class="table-cell px-4 py-2 align-middle">
    <button class="table-cell px-4 py-2 bg-gray-400 align-middle">搜索</button>
  </div>
</div>

表格布局优势

• CSS Table可是适当地调整CSS属性，可以做到很多HTML Table无法做到的事情，比如从table中择优选择属性来使用。
• CSS Table能够轻松定义一个单元格的边界、背景等样式，不会产生因为HTML Table制表符导致的语义化问题。
• CSS Table能够解决使用绝对定位和浮动定位进行多列布局时所遇到的问题

例如：使用CSS Table实现动态垂直居中对齐

middle

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="table w-full h-48 bg-gray-400">
  <div class="table-cell align-middle text-center">
    <p class="bg-gray-200 p-4">center middle</p>
  </div>
</div>

例如：实现动态水平居中对齐

使用display:table与margin:auto实现水平居中对齐

navigator

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="table m-auto bg-gray-400">
  <ul>
    <li class="float-left bg-black text-white"><a href="" class="block p-4">Home</a></li>
    <li class="float-left bg-black text-gray-600"><a href="" class="block p-4">Category</a></li>
    <li class="float-left bg-black text-gray-600"><a href="" class="block p-4">Contact</a></li>
    <li class="float-left bg-black text-gray-600"><a href="" class="block p-4">About</a></li>
  </ul>
</div>

CSS Table布局中table-cell最大的特点是同一行列表元素都是等高的

例如：使用CSS Table实现等高布局

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4">
  <div class="table mx-auto">
    <div class="table-cell align-middle bg-gray-200 p-4">leftleftleftleftleftleft</div>
    <div class="table-cell align-middle bg-gray-800 p-4 text-white">rightrightrightrightrightrightrightrightrightrightrightrightrightrightright</div>
  </div>
</div>

例如：使用CSS Table实现圣杯布局

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="table w-full h-full">
  <header class="table-row bg-gray-200">header</header>
  <main class="table">
    <nav class="table-cell p-4 w-96 bg-red-200">nav</nav>
    <section class="table-cell p-4 w-full bg-green-200">article</section>
    <aside class="table-cell p-4 w-96 bg-blue-200">aside</aside>
  </main>
  <footer class="p-4 text-center bg-gray-200">footer</footer>
</div>

匿名表格元素

CSS Table除了包含表格布局的普通规则，针对缺少的表格元素浏览器会以匿名的方式创建。如果为元素设置了display:table-cell属性，而并没将其父容器设置为display:table-row，浏览器会默认创建出一个表格行，就好像文档中真实存在的一样。