学生个人网页制作html表格-学生个人网页制作html表格教程

创建一个专业的HTML表格可以帮助用户更清晰地展示和比较数据，下面我将详细介绍如何使用HTML、CSS以及JavaScript（若需要）来创建一个具有不同列宽的表格,并解释如何使用这些工具来增强用户的阅读体验。

HTML 与 CSS 基本结构

我们需要在HTML文件中定义基本的表格结构：

学生个人网页制作html表格-学生个人网页制作html表格教程

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">专业表格</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<table id="professionalTable">
    <thead>
        <tr>
            <th colspan="3">基本信息</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <!-- 表格内容将在此处添加 -->
    </tbody>
</table>
<script>
// JavaScript代码（可选）
function updateTable() {
    var name = prompt("请输入姓名:");
    var age = parseInt(prompt("请输入年龄:"));
    var gender = prompt("请选择性别：男/女");
    if (name && age) {
        var row = document.createElement('tr');
        var cell1 = document.createElement('td');
        var cell2 = document.createElement('td');
        var cell3 = document.createElement('td');
        cell1.textContent = name;
        cell2.textContent = age;
        cell3.textContent = gender;
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        document.getElementById('professionalTable').appendChild(row);
    }
}
</script>
</body>
</html>

这段代码首先设置了基本的HTML结构，包括<table>标签和<thead>标签来定义表头，在<tbody>标签内插入了表格的内容区域，我们添加了一个简单的JavaScript函数,允许用户输入新数据并将其添加到表格中。