美觀實用的CSS表格展示示例

在網頁設計中，表格展示是常見的一種方式，而CSS表格展示則能夠提高網頁的美觀程度和用戶體驗。本文將從表格樣式、表格布局和表格響應式等方面，詳細闡述如何創建美觀實用的CSS表格展示。

一、表格樣式

表格的樣式是表格展示中的重要因素，通過CSS樣式可以讓表格顏色、邊框等元素更加美觀。

以下是一個簡單的樣式示例：

table {
  border-collapse: collapse;
  text-align: center;
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px;
}

th {
  background-color: #eee;
}

上述代碼中，我們使用了border-collapse將表格邊框合併，text-align使表格中的文字居中，th和td元素的border和padding屬性控制表格的邊框和內邊距。

通過添加background-color屬性，我們可以調整表格標題th的背景顏色，從而使表格更加美觀。下面是示例代碼和效果圖：

th {
  background-color: #eee;
}

二、表格布局

表格的布局是表格展示中的另一個關鍵因素。在創建表格時，我們應該考慮表格的基本結構，如表格標題、表頭、表身和表尾等部分的樣式。

下面是一個簡單的表格布局示例：

<table>
  <caption>表格標題</caption>
  <thead>
    <tr>
      <th>標題1</th>
      <th>標題2</th>
      <th>標題3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>內容1</td>
      <td>內容2</td>
      <td>內容3</td>
    </tr>
    <tr>
      <td>內容4</td>
      <td>內容5</td>
      <td>內容6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表格尾部內容</td>
    </tr>
  </tfoot>
</table>

以上代碼中，<caption>元素用於設置表格標題，<thead>元素用於設置表頭部分，<tbody>元素用於設置表身部分，<tfoot>元素用於設置表尾部分。其中，colspan屬性用於跨列合併單元格。

通過以上代碼示例，我們可以看到常用表格的各個部分的標籤如何使用，從而更好地理解表格的布局。

三、表格響應式

在移動設備上，表格的展示效果可能會受到限制。因此，我們需要使用CSS媒體查詢來控制網頁的響應式設計，以適應不同屏幕尺寸的設備。

以下是一個簡單的表格響應式示例：

/* 媒體查詢 */
@media only screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  tr {
    padding: 10px 0;
  }
  td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: bold;
  }
}

上述代碼中，我們使用了max-width來設置屏幕的最大寬度，並在媒體查詢中使用了display、padding、text-align等屬性控制表格的樣式。特別是使用了before偽元素來添加單元格標籤。

通過以上代碼示例，我們可以看到如何使用CSS媒體查詢實現表格的響應式設計，在不同屏幕尺寸下呈現出不同的樣式。

總結

本文從表格樣式、表格布局和表格響應式等方面，詳細闡述了如何創建美觀實用的CSS表格展示。通過以上示例，我們可以了解到表格展示的常用技巧和實現方法，希望對大家有所幫助。