使用HTML+CSS3构建学生信息表：让学生信息一目了然

2023-10-19 10:46:43

构建一个交互式学生信息表：HTML、CSS3 和 JavaScript 的结合

子标题 1：HTML 架构：表格的基础

学生信息表的基础是 HTML 结构。HTML 是一种标记语言，用于定义网页的结构和内容。以下是学生信息表的基本 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>学生信息表</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>专业</th>
      </tr>
    </thead>
    <tbody>
      <!-- 学生信息将在此处添加 -->
    </tbody>
  </table>
</body>
</html>

子标题 2：CSS3 样式：美化表格外观

有了 HTML 结构后，下一步是使用 CSS3 美化表格的外观。CSS3 是一种样式表语言，用于控制网页元素的视觉呈现。以下是为学生信息表添加 CSS3 样式的代码示例：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #ccc;
}

子标题 3：JavaScript 交互：添加动态效果

为了使学生信息表更具交互性，可以添加一些 JavaScript 代码。JavaScript 是一种脚本语言，用于在网页中实现动态效果。以下是为学生信息表添加排序功能的 JavaScript 代码示例：

const table = document.querySelector('table');
const ths = table.querySelectorAll('th');

ths.forEach(th => {
  th.addEventListener('click', () => {
    const column = th.cellIndex;
    const rows = table.querySelectorAll('tbody tr');

    rows.sort((a, b) => {
      const aVal = a.cells[column].textContent;
      const bVal = b.cells[column].textContent;

      if (aVal < bVal) {
        return -1;
      } else if (aVal > bVal) {
        return 1;
      }

      return 0;
    });

    table.removeChild(table.querySelector('tbody'));
    const tbody = document.createElement('tbody');
    table.appendChild(tbody);

    rows.forEach(row => {
      tbody.appendChild(row);
    });
  });
});

子标题 4：实际应用：添加学生信息

最后，可以在表格中添加实际的学生信息。您可以从数据库中提取数据，也可以手动输入。以下是添加学生信息的 HTML 代码示例：

<tbody>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>计算机科学</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>女</td>
    <td>19</td>
    <td>电子工程</td>
  </tr>
  <!-- 其他学生信息 -->
</tbody>