三、表格标签
- 表格系列标签主要是可以数据以表格的格式展示出来。但是现在table表格已经很少使用了,而是改成div+css实现更漂亮的表格。
标签 | 描述 |
---|---|
<table></table> |
表示网页的一个表格,内部一般直接嵌套的是tr标签。 |
<tr></tr> |
表示表格的一行,内部直接嵌套的只能是td或者th标签。 |
<td></td> |
表示表格的一个单元格,也可以是一列,可以包含其他标签或内容。 |
<th></th> |
表示表格的表头的一个单元格,可以包含其他标签或内容。 |
1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1行1列的表格-->
<table border="1"> <!-- border 表示设置表格边框的宽度,不推荐使用bother,以后会学到css,可以设置更好看的边框 -->
<tr>
<td>1行1列</td>
</tr>
</table>
<hr>
<!--1行2列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table>
<hr>
<!--2行1列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
</tr>
<tr>
<td>2行1列</td>
</tr>
</table>
<hr>
<!--2行2列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
<hr>
<!-- 有表头的表格 -->
<table border="1" width="600">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>3</td>
<td>小明</td>
<td>17</td>
</tr>
<tr>
<td>5</td>
<td>小黑</td>
<td>16</td>
</tr>
</table>
</body>
</html>
2 合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800" border="1">
<tr>
<!-- colspan 表示当前单元格[td,th]占据2列 -->
<th colspan="2">form标签属性说明</th>
</tr>
<!-- tr>th*2 -->
<tr>
<th>属性</th>
<th>描述</th>
</tr>
<tr>
<td>action</td>
<td>设置当前表单的表单数据处理应用程序的url地址,默认值是当前url地址。</td>
</tr>
<!-- tr>td*2 -->
<tr>
<!--设置当前单元格,占据3行的空间 -->
<td rowspan="3">method</td>
<td>设置当前表单的HTTP提供方式,默认是get。</td>
</tr>
<tr>
<td>get,以<b>查询字符串</b>的格式,把表单数据附加在url地址栏上提交数据</td>
</tr>
<tr>
<td>post,以<b>数据包</b>格式,把表单数据附在HTTP网络请求体中提交数据</td>
</tr>
<tr>
<td rowspan="4">enctype</td>
<td>设置当前表单提交的数据格式</td>
</tr>
<tr>
<td>application/x-www-form-urlencoded:默认值,以普通表达数据格式提交</td>
</tr>
<tr>
<td><b>multipart/form-data</b>:以多种数据格式提交</td>
</tr>
<tr>
<td>text/plain:以纯文本数据格式提交</td>
</tr>
</table>
</body>
</html>
3 表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="1680" align="center">
<tr>
<td>
<table align="center" width="1024">
<tr>
<td><a href="">奥运首页</a></td>
<td><a href="">中国军团</a></td>
<td><a href="">赛程赛果</a></td>
<td><a href="">奖牌榜</a></td>
<td><a href="">诸强</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td width="300">
<table>
<tr>
<td>全部赛程</td>
<td width="20%">更多 > </td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>中国对日本</li>
<li>韩国对日本</li>
<li>朝鲜对日本</li>
<li>俄罗斯对日本</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<img src="goods.png" width="100%" height="250" alt="">
</td>
<td width="450">右</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
- 早期的很多网页为了排版方便都是采用table布局(table标签来控制页面内容的排版),但是这种方式现在已经没有人使用了。而是改城了div标签+css样式来进行排版,这种方式更加容易入门,更加容易维护代码,更加美观好看。