<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格的应用及布局</title>
<meta http-equiv="refresh" content="1"/>
<base href="img/" />
</head>
<body>
<table border="1">
<caption>一、二季度小说类图书销售情况</caption>
<tr>
<td>一季度销售量</td>
<td>一季度销售额</td>
<td>二季度销售量</td>
<th>二季度销售额</th>
<!--
作者：offline
时间：2018-05-30
描述：th定义表头，表头一般作为表格的第一行
-->
</tr>
<tr>
<td>23521</td>
<td>￥559,940.00</td>
<td>18423</td>
<td>
<table border="1">
<caption>拓展类</caption>
<tr>
<td>拓展1</td>
<td>拓展2</td>
<td>拓展3</td>
</tr>
</table>
</td>
<td>123456</td>
</tr>
<!--
作者：方熙林
时间：2018-05-30
描述：当第一行的单元格元素少于第二行的话，多余的那部分会凸显出来
表格中嵌套表格
table 元素用来定义表格
tr 元素用来定义表格中的一行，它是单元格的容器
td和th 元素用来定义单元格。其中th标签用来定义表头，表头默认以粗体，居中的方式显示
caption 元素用来定义表格标题，caption标签拥有align属性，默认align="center"，align可选值
有 left 标题对应表格水平居左
right 标题对应表格水平居右
top 标题在表格上部显示
bottom 标题在表格下部显示
-->
</table>
<hr size="50" color="red" />
<p align="center"><font size="5" color="black" face="隶书">table标签详解</font></p>
<table align="center" border="1">
<tr>
<!--
tr标签属性
作者：方熙林
时间：2018-05-30
描述：align 定义表格行中内容的水平对齐方式
align 可选值有left、right、center、justify
valign 定义表格行中内容的垂直对齐方式
valign 可选值有top、middle、bottom、baseline
bgcolor 定义表格行的背景颜色
-->
<th>一季度销售量</th>
<th>一季度销售额</th>
<th>二季度销售量</th>
<th>二季度销售额</th>
</tr>
<tr>
<td>23521</td>
<!--
td标签属性
作者：方熙林
时间：2018-05-30
描述：align 定义单元格中内容的水平对齐方式
align 可选值有left、right、center、justify
valign 定义单元格中内容的垂直对齐方式
bgcolor 定义单元格的背景颜色
height 定义单元格的高度
width 定义单元格的宽度
colspan 定义单元格可跨越的列数
rowspan 定义单元格可跨越的行数
nowrap 定义单元格中的内容是否拆行
-->
<td>￥559,940.00</td>
<td>18423</td>
<td>￥44,481.00</td>
</tr>
</table>
<br /><br />
<hr size="60" color="blue" />
<p><font face="微软雅黑" size="4" color="black">修改属性值后的表格</font></p>
<p align="center"><font size="5" color="black" face="隶书">table标签详解</font></p>
<table align="center" border="1" width="50" bordercolor="crimson" bgcolor="burlywood" background="背景.PNG" cellpadding="0" cellspacing="0">
<tr>
<th>一季度销售量</th>
<th>一季度销售额</th>
<th>二季度销售量</th>
<th>二季度销售额</th>
</tr>
<tr>
<td>23521</td>
<td>￥559,940.00</td>
<td>18423</td>
<td>￥44,481.00</td>
</tr>
</table>
<!--
table标签
作者：方熙林
时间：2018-05-30
描述：align 对应表格相对周围元素的对齐方式
border 定义表格边框的宽度
width 定义表格的宽度
bordercolor 定义表格边框的颜色
bgcolor 定义表格背景颜色
background 定义表格背景图像
cellpadding 定义单元格边框与其内容之间的空白
cellspacing 定义单元格之间的空白
frame 描述表格外侧边框那个部分是可见的
rules 描述表格内侧边框哪个部分是可见的
summary 定义表格的摘要
-->
<!--
tr标签属性
作者：方熙林
时间：2018-05-30
描述：align 定义表格行中内容的水平对齐方式
valign 定义表格行中内容的垂直对齐方式
bgcolor 定义表格行的背景颜色
-->
<hr size="50" color="black" />
<p align="center"><font face="微软雅黑" size="5" color="chartreuse">跨行跨列表格</font></p>
<table width="800" border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="9" align="center">2013年度图书销售统计</td>
</tr>
<tr>
<td rowspan="2" align="center">图书分类</td>
<td colspan="2" align="center">一季度</td>
<td colspan="2" align="center">二季度</td>
<td colspan="2" align="center">三季度</td>
<td colspan="2" align="center">四季度</td>
</tr>
<tr>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
</tr>
<tr>
<td align="center">小说</td>
<td align="center">23521</td>
<td align="center">￥559,940.00</td>
<td align="center">18423</td>
<td align="center">￥44,841.00</td>
<td align="center">32125</td>
<td align="center">￥829,870.00</td>
<td align="center">25188</td>
<td align="center">￥586,564.00</td>
</tr>
</table>
<table width="800" border="0">
<tr>
<td colspan="2" height="40" bgcolor="#DDDDDD"><h3>区域1</h3></td>
</tr>
<tr>
<td height="160" width="300" bgcolor="#BBBBBB">
<table width="300" border="0">
<tr height="80"><td>区域2-1</td><td>区域2-2</td><td>区域2-3</td></tr>
<tr height="40" bgcolor="#DDDDDD"><td>区域2-4</td><td>区域2-5</td><td>区域2-6</td></tr>
<tr height="40"><td>区域2-7</td><td>区域2-8</td><td>区域2-9</td></tr>
</table>
</td>
<td rowspan="2" bgcolor="#999999"><h3>区域3</h3></td>
</tr>
<tr>
<td height="240">
<table width="300" border="0" bgcolor="#DDDDDD">
<tr height="40"><td>区域4-1</td></tr>
<tr height="40" bgcolor="#BBBBBB"><td>区域4-2</td></tr>
<tr height="40"><td>区域4-3</td></tr>
<tr height="40" bgcolor="#BBBBBB"><td>区域4-4</td></tr>
<tr height="40"><td>区域4-5</td></tr>
<tr height="40" bgcolor="#BBBBBB"><td>区域4-6</td></tr>
</table>
</td>
</tr>
</table>
<hr size="50" color="blue" />
<p><font></font></p>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
