如何在HTML中制作表格？附初始代码与预期效果示例

你只需要把目标表格的完整代码插入到初始HTML的<body>标签内部，替换掉<body>里的空白内容即可。修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <div class="s-table-container">
        <table class="s-table">
            <thead>
                <tr>
                    <th>Column A</th>
                    <th>Column B</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
                <tr>
                    <td>Cell 3</td>
                    <td>Cell 4</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

结构说明： #

• <div class="s-table-container">是表格的外层容器，方便后续做整体样式控制
• <table class="s-table">是表格主体，s-table类可用于自定义表格的边框、间距等样式
• <thead>包裹表头区域，内部的<tr>是表头行，<th>用于定义表头单元格（默认会加粗居中显示）
• <tbody>包裹表格的数据内容，每个<tr>对应一行数据，<td>是普通数据单元格

内容的提问来源于stack exchange，提问作者Jal Patel