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标签相关用法和属性相关推荐

Web前端开发列表标签相关用法和属性
一.有序列表 <ol></ol> 有序列表需要与<li></li>标签连用,<li>标签为数据标签,有序列表中li标签会按照顺序进行排列 ...
怎么学好Web前端开发有哪些相关书籍推荐
怎么学好Web前端开发?有哪些相关书籍推荐?想学好Web前端开发技术,好的学习资料当然必不可少,有哪些好的书籍推荐呢?下面就给大家推荐几本热度比较高的书籍,相信好的学习资料能让你的学习效果事半功倍. ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
xslt 标签取集合第一条数据_1+x证书Web前端开发中级理论考试（试卷1）
2019年下半年 Web前端开发中级理论考试 (考试时间19:00-20:30 共150分钟,测试卷1) 本试卷共3道大题,满分100分. 请在指定位置作答. 一.单选题(每小题2分,共30小题,共 ...
web前端开发相关网站
web前端开发相关网站(更新中) 阿里镜像站 yarn下载 https://npm.taobao.org/mirrors/yarn/ Node.js下载 https://npm.taobao.org/ ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
[原]《Web前端开发修炼之道》-读书笔记CSS部分
如何组织CSS-分层应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角 ...
Web前端开发标准规范
web前端开发规范的意义提高团队的协作能力提高代码的复用利用率可以写出质量更高,效率更好的代码为后期维护提供更好的支持一.命名规则命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...

Web前端开发 table标签相关用法和属性