这篇博客介绍了HTML表格的基础知识，包括如何创建最基本的表格、设置带边框的表格、添加表头、使用<thread>、<tbody>和<tfoot>组织表格结构，以及如何通过colspan和rowspan实现单元格的跨行和跨列。示例代码展示了各种功能的应用。
HTML表格：日常消费账单表格展示网页
在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。
最基本的表格
在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和数据单元格(td)。
一个最基本的表格如下：
<body>
<table>
<!-- 第一行 -->
<tr>
<td>第一行第一个单元格数据</td>
<td>第一行第二个单元格数据</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一个单元格数据</td>
<td>第二行第二个单元格数据</td>
</tr>
</table>
</body>显示效果如下：
这是一个2行2列的表格，可以看到<table>元素中包含了两行，即两个<tr>元素；每行有两列，即每个<tr>中包含两个<td>元素。
提示：
- tr: table row 行
- th: table head 表头
- td: table data 列
带边框的表格
在第一个例子中，表格没有边框，看起来不太明显。那么，如何设置带边框的表格呢？
我们可以指定<table>元素的border属性值。
<table border="1">
</table>显示效果如下：
通过CSS样式控制边框：
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 简单表格&l
最低0.47元/天 解锁文章
扫一扫
2402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
