table-简单备忘知识

table常忘记的点

下面先放一个例子，方便记忆(摘抄的代码)

<table>
  <thead>
    <tr>
      <th>球员</th>
      <th>号码</th>
      <th>身高</th>
      <th>体重</th>
      <th>生日</th>
      <th>国籍</th>
      <th>出生地</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>勒布朗·詹姆斯</td>
      <td>23</td>
      <td>2.03米/6英尺8英寸</td>
      <td>113.4公斤</td>
      <td>1984年12月30日</td>
      <td colspan="2">美国</td>
    </tr>
    <tr>
      <td>凯里·欧文</td>
      <td>2</td>
      <td>1.91米/6英尺3英寸</td>
      <td>88公斤/193磅</td>
      <td>1992年3月23日</td>
      <td>美国/澳洲</td>
      <td>澳洲</td>
    </tr>
    <tr>
      <td>凯文·乐福</td>
      <td>0</td>
      <td>2.08米/6英尺10英寸</td>
      <td>110公斤/243磅</td>
      <td>1988年9月7日</td>
      <td colspan="2">美国</td>
    </tr>
  </tbody>
</table>

方便记忆点(标签都是英文简写)

• thead: table head
• tr: table row
• tbody: table body
• td: table data

下面放几个常用的样式设置

table {
  border-collapse: collapse; // 边框合并为单一边框
vertical-align: middle; //垂直居中
text-align: center; //水平居中
} 
th, td {
  border: 1px solid green; //设置边框
}

border-collapse 介绍