table标签
html中的<table>标签，通常用于对页面布局的规划。
一、<table>标签简介
table标签用于在网页中建立表格布局，其子标签有<tr></tr> <th></th> <td></td> <thead></thead> <tbody></tbody> <tfoot></tfoot>
我们用如下代码在网页中建立表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>电影网</title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table width="800px">
<tr>
<td>最新热门电影</td><td>热门</td><td>最新</td><td>豆瓣高分</td><td>冷门佳片</td><td>华语</td><td>欧美</td><td><a href="#">更多>></a></td>
</tr>
</table>
<hr>
<table width="800px">
<tr>
<td colspan="2"><img src="..\image\dy1.png"></td>
<td colspan="2"><img src="..\image\dy2.png"></td>
<td colspan="2"><img src="..\image\dy1.png"></td>
<td colspan="2"><img src="..\image\dy2.png"></td>
</tr>
<tr>
<td>盗梦空间</td><td></td>
<td>致命ID</td><td></td>
<td>盗梦空间</td><td></td>
<td>禁闭岛</td><td></td>
</tr>
<tr>
<td colspan="2"><img src="..\image\dy1.png"></td>
<td colspan="2"><img src="..\image\dy2.png"></td>
<td colspan="2"><img src="..\image\dy1.png"></td>
<td colspan="2"><img src="..\image\dy2.png"></td>
</tr>
<tr>
<td>盗梦空间</td><td></td>
<td>致命ID</td><td></td>
<td>盗梦空间</td><td></td>
<td>禁闭岛</td><td></td>
</tr>
</table>
</body>
</html>二、table子标签
thead-----表格头部
tbody-----表格主干
tr-------行
td-------单元格（列）
tfoot-----表格尾部
没有使用thead和tbody还有tfoot时
默认表格所有内容都是tbody
三、属性
width,height------宽，高 单位px 或者%百分比 默认单位px 可以在table标签中设置
当使用了thead、tbody和tfoot标签时，直接在table中设置宽高，变化的只会有tbody中的内容
<table border="1">
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody><tr><td>张三</td><td>19</td></tr></tbody>
<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
</table><table border="1" width="300px" height="200px">
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody><tr><td>张三</td><td>19</td></tr></tbody>
<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
</table>注：当tr和td中都设置了高度和宽度时，以最大一个值作为属性值
<table border="1" cellspacing="0">
<tr height="80"><td height="40">123</td><td height="40">123</td></tr>
<tr height="40"><td height="20">345</td><td height="20">345</td></tr>
<tr height="20"><td>456</td><td>456</td></tr>
</table>align----对齐方式 left center right
<table border="1" width="300px" height="200px">
<thead><tr><th align="left">姓名</th><th>年龄</th></tr></thead>
<tbody><tr><td>张三</td><td>19</td></tr></tbody>
<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
</table>将姓名左对齐
cellpadding------表格的边距,单元格边缘和内容之间的空白
cellspacing------表格的间距,两个单元格间的距离
bgcolor------表格背景颜色
<table border="3" cellpadding="20" cellspacing="0" bgcolor="gray">
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody><tr><td>张三</td><td>19</td></tr></tbody>
<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
</table>四、表格的嵌套和合并
四、1.表格的嵌套
表格嵌套时，在表格的某个单元格或者某个行内嵌套一个新的表格
<table border="1" cellspacing="0" width="300px" height="300px">
<tr><td>
<table border="1" cellspacing="0" width="200px" height="200px">
<tr><td>123</td><td>123</td></tr>
</table>
</td>
<td>123</td>
</tr>
</table>如图，在表格的第一个单元格中嵌套了新的表格
四、2.表格的合并
表格的合并使用td标签的属性colspan和rowspan来完成
rowspan-----单元格竖跨行数
colspan-----单元格横跨列数
<table cellspacing="0" border="2">
<tr>
<td rowspan="2">123123123</td><td>123123123</td>
</tr>
<tr><td>123123123</td></tr>
<tr><td colspan="2">123123123123123123</td></tr>
</table>五、表格实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>工商银行电子汇款单</title>
</head>
<body>
<h3>工商银行电子汇款单</h3>
<div>
<table border="1" cellspacing="0">
<tr>
<th colspan="2">回单类型</td>
<th width="400px">网上转账汇款</td>
<th colspan="2">指令序号</td>
<th width="400px">213254135454</td>
</tr>
<tr>
<th rowspan="4" width="30px" align="left">收款人</th>
<td width="150px">户名</td>
<td>张三</td>
<th rowspan="4" width="30px" align="left">付款人</th>
<td width="150px">户名</td>
<td>老刘</td>
</tr>
<tr>
<th align="left">卡号</th>
<td>0000000001</td>
<th align="left">卡号</th>
<td>0000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<th align="left">网点</th>
<td>工商江苏南京业务处理中心</td>
<th align="left">网点</th>
<td>江苏徐州业务中</td>
</tr>
<tr>
<th colspan="2" align="left">币种</th>
<td>人民币</td>
<th colspan="2" align="left">钞汇标志</th>
<td>钞票</td>
</tr>
<tr>
<th colspan="2" align="left">金额</th>
<td>1.00元</td>
<th colspan="2" align="left">手续费</th>
<td>0.75元</td>
</tr>
<tr>
<th colspan="2" align="left">合计</th>
<td colspan="4">人民币(大写)：壹</td>
</tr>
<tr>
<th colspan="2" align="left">交易时间</th>
<td>2017年6月01号</td>
<th colspan="2" align="left">时间戳</th>
<td>2017-06-01-13.00.00.0000</td>
</tr>
</table>
<p>
票据打印时间：2017-06-01 15：00：12
</p>
<p>
<del>票据打印单位：苏徐州业务中心</del>
</p>
<p>
操作员：大曾
</p>
</div>
</body>
</html>以上便是对于<table>标签及其相关标签的用法和属性的总结，希望能够对您有所帮助。
更多推荐
Web前端开发 table标签相关用法和属性
发布评论