CSS布局表格是網(wǎng)頁設(shè)計(jì)中常見的數(shù)據(jù)展示方式，具有靈活性和可定制性，下面介紹如何制作CSS布局表格：

1、創(chuàng)建表格結(jié)構(gòu)

使用HTML創(chuàng)建表格結(jié)構(gòu)，定義表格的頭部、主體和底部。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合計(jì)人數(shù)：2人</td>
    </tr>
  </tfoot>
</table>

2、樣式化表格

使用CSS樣式化表格，可以設(shè)置表格的寬度、高度、顏色、字體等屬性。

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f0f0f0;
}

3、響應(yīng)式布局

為了讓表格在不同設(shè)備上都能良好地顯示，可以使用響應(yīng)式布局，使用CSS的媒體查詢（media query）來設(shè)置不同屏幕下的表格樣式。

@media screen and (max-width: 600px) {
  table, thead, tbody, tfoot, tr, th, td {
    width: 100%;
    display: block;
  }
  thead { position: absolute; top: -9999px; left: -9999px; }
  tr { border: 1px solid #000; }
  td { border: none; }
}

在響應(yīng)式布局下，表格會在小屏幕設(shè)備上垂直堆疊，而不是水平排列，這樣可以更好地利用屏幕空間，提高用戶體驗(yàn)。