05.css布局：table表格布局

简单的HTML表格

table标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr元素定义表格行，th元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括caption、col、colgroup、thead、tfoot 以及 tbody 元素。

参考文章 html表格及传统布局

    table{
      border-collapse: collapse;
    }
<h3>html表格</h3>
<table border="1" width="500" height="300" >
  <tr>
    <th>序号</th>
    <th>产品名称</th>
    <th>产品价格</th>
    <th>产品数量</th>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>苹果</td>
    <td>RMB5.00</td>
    <td>1000</td>
  </tr>
  <tr align="center">
    <td>2</td>
    <td>橘子</td>
    <td>RMB10.00</td>
    <td>2000</td>
  </tr>

</table>

默认th文字水平垂直居中，而且加粗效果，默认td文字垂直居中，但加上了align=”center”，文字才水平居中
如果不加 border-collapse:collapse;border-collapse 属性设置表格的边框是否被合并为一个单一的边框，效果如下，

用 thead tbody tfoot改上面的表格

<table border="1" width="500" height="300">
  <thead>
  <tr>
    <th>序号</th>
    <th>产品名称</th>
    <th>产品价格</th>
    <th>产品数量</th>
  </tr>
  </thead>
  <tbody>
  <tr align="center">
    <td>1</td>
    <td>苹果</td>
    <td>RMB5.00</td>
    <td>1000</td>
  </tr>
  <tr align="center">
    <td>2</td>
    <td>橘子</td>
    <td>RMB10.00</td>
    <td>2000</td>
  </tr>
  </tbody>
  <tfoot>
    <tr align="center">
      <td>3</td>
      <td>乱填的</td>
      <td>how are you</td>
      <td>fine</td>
    </tr>
       <tr align="center">
      <td>3</td>
      <td>乱填的</td>
      <td>how are you</td>
      <td>fine</td>
    </tr>
  </tfoot>
</table>

thead，tfoot中的单元格默认比tbody小很多
thead里面必须有tr，tr里面是th！不是td！如果是td，没有加粗效果
语义更强

用table，table-rowtable-cell属性值进行table布局

！语义还不够强
用CSS实现“表格布局”，所以有了main，section，aside

随着HTML5的到来，HTML标签越来越强调“语义化”，即合理使用HTML标记以及其特有的属性去格式化文档内容。因此，利用table来实现“表格布局”是不推荐的，因为此时table中的内容并不是一个真的“表格”，不符合“语义化”的追求。那么，在追求语义化的时代，该如何实现传统的“表格布局”呢？那就是借助CSS来实现。利用CSS来实现“表格布局”很简单，第一步是把传统table布局中的table、tr>、td改为合适的、符合“语义化”的标签

<main style="display:table">
    <section style="display:table-row">
        <aside style="display:table-cell">
            左侧栏内容
        </aside>
        
        <article style="display:table-cell">
            右侧栏内容
        </article>
    </section>
</main>

其实将上述代码与传统table布局的代码一对比，可以看出，变化之处就是：替换掉table的main有了一个“display:table”样式替换掉tr的section有了一个“display:table-row”样式替换掉td的aside和article分别有了一个“display:table-cell”样式。

 .table{
            margin-top:20px;
            display: table;
            width:800px;
            height:200px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
<div class="table">
        <div class="table-row">
            <div class="left table-cell">
                左
            </div>
            <div class="right table-cell">
                右
            </div>
        </div>
    </div>

用table，table-rowtable-cell属性值进行table布局，用div模拟液可以的，只是文字可能不是垂直居中