html-表格标签
程序员文章站
2022-07-05 17:32:54
表格标签可以对数据进行格式化，使数据显示更加清晰
：表示表格的范围 - border：表格线 - bordercolor：表格线的颜色 - cellspacing：单元格之间的距离 - width：表格的宽度 - height：表格的高度 ** 在table里面：
表格标签可以对数据进行格式化，使数据显示更加清晰
<table></table>：表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格之间的距离
- width：表格的宽度
- height：表格的高度
** 在table里面：<tr></tr>
- 设置显示方式 aligh：left、center、right
** 在tr里面：<td></td>
- 设置显示方式 aligh：left、center、right
** 使用th也可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
** 表格的标题
<caption></caption>
*分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用tr
- 定义一个单元格使用 td
** 操作技巧
- 首先数有多少行（tr），数每行里面有多少个单元格（td）
** 合并单元格
- rowspan：跨行
- colspan：跨列
完整代码：
<html>
<head>
<title>world</title>
</head>
<body>
<!-- 实现3行四列的表格 -->
<table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
<caption>公司职员信息表</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>职位</td>
</tr>
<tr align="center">
<td>栗子壳</td>
<td>男</td>
<td>20</td>
<td>老总</td>
</tr>
<tr>
<th>栗子米</th>
<th>女</th>
<th>19</th>
<th>秘书</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>world</title>
</head>
<body>
<!--
测试跨列
第一行：1
第二行到第四行：3
-->
<table border="1" cellspacing="0" bordercolor="blue" width="200">
<tr>
<td colspan="3" align="center">人员信息</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>40</td>
</tr>
<tr>
<td>令狐冲</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
<td>24</td>
</tr>
</table>
<hr/>
<!--
测试跨行
第一行：3
第二行到第三行：2
-->
<table border="1" cellspacing="0" bordercolor="blue" width="200">
<tr>
<td>岳不群</td>
<td>女</td>
<td rowspan="3" align="center">40</td>
</tr>
<tr>
<td>令狐冲</td>
<td>男</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
</tr>
</table>
</body>
</html>