表格(table、tr、th、td、colspan、rowspan)

表格一：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>table{width: 720px;/*设置表格水平宽度为720px*/margin: 0 auto;/*使表格水平居中*/border: 1px solid black;/*设置边框*/border-spacing: 0px;/*去掉table标签及其子类的标签之间的空隙*/border-collapse: collapse;/*去掉重合线*/}th,td{border: 1px solid black;}td{/*使元素水平垂直居中*/text-align: center;vertical-align: auto;}</style>
</head>
<body><table><tr><th>姓名</th><th>手机号</th><th>家庭地址</th></tr><tr><td>Tom</td><td>182</td><td>郑州</td></tr><tr><td>Jim</td><td>157</td><td>北京</td></tr></table></body>

显示的效果就是：

姓名	手机号	家庭地址
Tom	182	郑州
Jim	157	北京

表格二：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>table{width: 720px;margin: 0 auto;border: 2px solid black;/*设置边框*/border-spacing: 0px;/*去掉table标签及其子类的标签之间的空隙*/border-collapse: collapse;/*去掉重合线*/}th,td{border: 2px solid black;}</style>
</head>
<body><br /><br /><table><tr><!--列合并用colspan="合并的行数"--><th colspan="9">2013年度图书销售统计</th></tr><tr><!--列合并用rowspan="合并的列数"--><td rowspan="2" style="text-align: center;">图书分类</td><td colspan="2">一季度</td><td colspan="2">二季度</td><td colspan="2">三季度</td><td colspan="2">四季度</td></tr><tr><td>销售量</td><td>销售额</td><td>销售量</td><td>销售额</td><td>销售量</td><td>销售额</td><td>销售量</td><td>销售额</td></tr><tr><td style="text-align: center;">小说</td><td>23521</td><td>￥559,940.00</td><td>18423</td><td>￥44,841.00</td><td>32125</td><td>￥829,870.00</td><td>25188</td><td>￥586,564.00</td></tr><tr><td style="text-align: center;">文艺</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td style="text-align: center;">励志/成功</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td style="text-align: center;">童书</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></body>
</html>

合并行，用rowspan=“合并的行数”；合并列，用colspan=“合并的列数”。

显示的效果：

表格(table、tr、th、td、colspan、rowspan)相关推荐

html页面的th标签合并,Table tr th td html表格标签
Table tr th td html表格标签教程-- html table tr td�?strong>html table tr th表格布局标签教程�?/p> 学习DIV CSS回头 ...
html div表格代码,Table tr th td html表格标签
进修DIV CSS回头再来深造Table表格标签组合就相比容易.再借助DW软件构造TABLE表格更为方便随心所欲. 一.html表格语法 1.根本table tr td结构代码模式1.1 模式1.2 ...
表格table中的td标签中的内容太多，影响整体外观，不美观。将一部分内容隐藏起来，用省略号代替
表格table中的td标签中的内容太多,影响整体外观,不美观.将一部分内容隐藏起来,用省略号代替. 招式:1.在table标签中加上style="table-layout: fixed;&q ...
html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
HTML 表格table tr td、表头标题、表结构、合并单元格
文章目录表格基本标签表格属性表格标题和表头单元格标签表格的结构标签(了解) 合并单元格表格基本标签 <table><tr><td>单元格内的文字</ ...
table tr th td
控制th 宽度相同: table{display: -webkit-box;table-layout:fixed; border: none;max-width:120%;min-width:100% ...
html 中 table tr td br 什么意思是什么的缩写
HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言.设计HTML语言的目的是为了能把存放在 ...
html table tr td br 什么意思缩写
html table tr td br 什么意思缩写 2010-03-04 23:09 <TABLE>代表表格</TABLE> <TR>代表表格中的一行</ ...
web前端设计与开发——HTML基础（六）标签（四）div、ul、ol、table、tr、td、th（有标签中文意思）
1.div 全称 division 意为"区分" 2.ul 全称 unordered list 意为"无序列表" 3.ol 全称 ordered list 意为 ...
HTML基础之tr和td标签用法
网页制作用的较多的就是这些常用的标签,现在将tr和td分析如下: 1.HTMLtr标签 tr 标签 -- 代表HTML表格中的一行 * tr标签是成对出现的,以<tr>开始,</tr ...

表格(table、tr、th、td、colspan、rowspan)

表格(table、tr、th、td、colspan、rowspan)相关推荐

最新文章

热门文章