HTML+CSS笔记 10：HTML 表格

表格

• 使用 table 标签表示表格
• 使用 tr 标签表示行，几个 tr 就是几行
• 使用 td 标签表示单元格，几个 td 就是几个单元格
• 使用 rowspan 属性来表示纵向合并单元格
• 使用 colspan 属性来表示横向合并单元格

<table border="1" width="50%" align="center">
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td rowspan="2">D2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td colspan="2">C4</td>
  </tr>
</table>

长表格

<table border="1" width='50%' align="center">
  <!-- 
     将一个表格分成三个部分：
	      头部：thead
	      主体：tbody
	      底部：tfoot
     此时表格的内容与编写位置无关（thead 写在表格的末尾也依旧是表头）
  -->
  <thead>
    <tr>
      <!-- th 表示头部的单元格，会有居中加粗的效果 -->
      <th>日期</th>
      <th>收入</th>
      <th>支出</th>
      <th>盈余</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2021.5.1</td>
      <td>500</td>
      <td>50</td>
      <td>450</td>
    </tr>
    <tr>
      <td>2021.5.1</td>
      <td>500</td>
      <td>50</td>
      <td>450</td>
    </tr>
    <tr>
      <td>2021.5.1</td>
      <td>500</td>
      <td>50</td>
      <td>450</td>
    </tr>
    <tr>
      <td>2021.5.1</td>
      <td>500</td>
      <td>50</td>
      <td>450</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>合计</td>
      <td>1800</td>
    </tr>
  </tfoot>
</table>

表格样式

table {
  width: 50%;
  border: 1px solid black;
  margin: 100px auto;
  /* 指定边框之间的距离 */
  border-spacing: 0px;
  /* 设置边框的合并 */
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 50px;
  /* 
    默认情况下元素在 td 中垂直居中，可以通过 vertical-align 来修改
    可以利用这种特性来简单的设置居中
  */
  vertical-align: middle;
  text-align: center;
}
/* 如果表格中没有显式指定 tbody，浏览器会自动创建一个 tbody 并将所有的 tr 都放在里面 */
tbody>tr:nth-child(2n+1) {
  background-color: rosybrown;
}

使用表格特性实现垂直居中

<div class="box1">
    <div class="box2"></div>
</div>

.box1 {
  width: 300px;
  height: 300px;
  background-color: rosybrown;
  display: table-cell;
  vertical-align: middle;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: tomato;
  margin: 0 auto;
}