最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在html网页设计中如何制作表格？
时间：2026-08-19 11:32:50 编辑：袖梨 来源：一聚教程网
在我们的一个日常的学习Web前端知识中遇到的问题肯定的比较多的，那么今天我们就来讨论一下在html网页设计中如何制作表格？吧！
1.首先我们向在Web前端开发工具中新建一个 .html 文件（这边小编用的是HBuilderX），在文件中输入下面这些代码就可以看到我们的一个表格的雏形，代码截图如下：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table >
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
<th>标题6</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</tbody>
</table>
</body>
</html>
通过代码的运行我们看到了一个表格的雏形。
2.我们通过使用borde元素在网页中添加一个值就可以得到一个表格了，代码截图如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><table border="1"><thead><tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th><th>标题6</th></tr></thead><tbody><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></tbody></table></body></html>这样子我们就完成了一个表格的设置了。
总结：