[html]代码库
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示表格标签</title>
</head>
<body>
<!--
表格标签使用table
表格的应用:
1、可以划分页面
2、把数据进行格式化显示
表格组成:
表格由行和列组成。
在html中表格有三部分组成:
表格的头
表格体
表格尾
<table>
表格的头 <thead>
表格体<tbody>
表格尾<tfoot>
</table>
注意:如果使用表格划分页面,只有整个表格加载完成之后,页面数据才会显示出来。
建议可以加上
表格的头 <thead>
表格体<tbody>
表格尾<tfoot>
在加载页面的时候,tbody加载一行页面上就会显示一行。
学习表格最重要的是学习表格体的控制:
表格体中表头部分可以使用th
表格中的一个使用 tr标签来描述
表示中的一列(一个单元格)td标签来描述
-->
<!-- 创建一个三行四列的表格 -->
<table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
<!-- 先创建行 -->
<tr>
<!-- 创建这以行的列 -->
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>电话</th>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>旺财</td>
<td>22</td>
<td>上海</td>
<td>110</td>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>小强</td>
<td>19</td>
<td>北京</td>
<td>119</td>
</tr>
</table>
<br/>
<br/>
<br/>
<!-- 设置跨列的表格 -->
<table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
<!-- 第一行占四列 -->
<tr>
<th colspan="4">登记信息</th>
</tr>
<!-- 先创建行 -->
<tr>
<!-- 创建这以行的列 -->
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>电话</th>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>旺财</td>
<td>22</td>
<td>上海</td>
<td>110</td>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>小强</td>
<td>19</td>
<td>北京</td>
<td>119</td>
</tr>
</table>
<hr/>
<!-- 设置跨列和跨行的表格 -->
<table align="center" border="1px" width="600px" cellpadding="10px" cellspacing="0px">
<!-- 第一行占四列 -->
<caption>不知道写什么</caption>
<tr>
<!-- 设置跨列的表格 -->
<th colspan="4">学校信息</th>
</tr>
<!-- 先创建行 -->
<tr>
<!-- 设置跨行的表格 -->
<th rowspan="4">传智播客</th>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>校名</td>
<td>地址</td>
<td>电话</td>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>北京传智播客</td>
<td>北京西三旗</td>
<td>010-11112222</td>
</tr>
<tr>
<!-- 创建这以行的列 -->
<td>上海传智播客</td>
<td>上海</td>
<td>021-11112222</td>
</tr>
</table>
</body>
</html>