用CSS打造學(xué)生信息表

學(xué)生信息表是學(xué)校教育管理中的重要組成部分，用于記錄學(xué)生的基本信息、成績(jī)、獎(jiǎng)懲等情況，使用CSS可以美化學(xué)生信息表的樣式，使其更加直觀、易用。

1. 表格結(jié)構(gòu)

我們需要?jiǎng)?chuàng)建一個(gè)表格結(jié)構(gòu)來存儲(chǔ)學(xué)生信息，可以使用HTML中的<table>元素來創(chuàng)建表格，其中<tr>元素表示表格行，<td>元素表示表格單元格。

以下代碼創(chuàng)建了一個(gè)包含表頭的表格：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>學(xué)號(hào)</th>
      <th>成績(jī)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>01</td>
      <td>80</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>02</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

2. 美化表格

我們可以使用CSS來美化表格，可以設(shè)置表格的邊框、背景色、字體等樣式，以下是一個(gè)簡(jiǎn)單的CSS樣式示例：

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

在這個(gè)示例中，我們?cè)O(shè)置了表格的邊框、背景色，并調(diào)整了字體樣式，我們還為表頭設(shè)置了不同的背景色。

3. 響應(yīng)式設(shè)計(jì)

為了更好地適應(yīng)不同屏幕大小，我們還需要為表格添加響應(yīng)式設(shè)計(jì)，可以使用CSS中的媒體查詢（Media Queries）來實(shí)現(xiàn)，以下代碼可以在屏幕寬度小于600px時(shí)改變表格的樣式：

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

在這個(gè)示例中，我們將表格、表頭、表格行、表格單元格的顯示方式都設(shè)置為塊級(jí)元素，并為表格行和表格單元格添加了邊框樣式，我們還將表頭移出了屏幕范圍，這樣，在小屏幕設(shè)備上就可以更好地顯示表格內(nèi)容了。