設定table css

在網路開發中，表格（table）是一種常見的HTML元素，通常用於呈現資料或資訊。為了使表格更美觀和易於閱讀，我們可以透過CSS樣式來進行客製化處理。在本文中，我將為大家介紹如何設定table的CSS樣式。

一、基本樣式設定

1. 表格邊框樣式設定

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

2. 表格寬度與高度設定

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

3. 表格頭和表格內容樣式設定

在表格頭（thead）和表格內容（tbody）中，我們可以設定不同的樣式。如下圖所示：

table thead th {
  background-color: #f2f2f2; /*设置表头背景色*/
  font-weight: bold; /*设置表头字体加粗*/
}

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}

二、進階樣式設定

1. 表格斑馬線樣式設定

可以透過CSS讓表格的偶數行和奇數行呈現不同的背景色，以便於區分。

table tr:nth-child(even) {
  background-color: #f2f2f2; /*设置偶数行背景色*/
}

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}

2. 表格文字對齊和換行設定

表格中的文字對齊方式和文字換行方式也可以透過CSS來進行設定。

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

3. 表格單元合併樣式設定

如下圖所示，我們可以將表格的兩個儲存格合併，以顯示更複雜的資料呈現方式。

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

以上是幾種表格CSS樣式設定方法的介紹，希望能對大家有幫助。透過CSS的靈活運用，我們可以為表格呈現不同的風格和視覺效果，讓頁面更加美觀易讀。

以上是設定table css的詳細內容。更多資訊請關注PHP中文網其他相關文章！