报表的功效是显示信息2维数据信息，在HTML5中已不容许用报表操纵网页页面內容的合理布局，而是选用新增的CSS报表特点（这里不涉及到CSS，将在后边详细介绍）。下面关键详细介绍用于制做报表的HTML元素。
搭建报表
报表的基础元素包含：table、tr和td。
table表明HTML文本文档中的报表，适用border特性，用于界定报表边框的宽度；
tr表明报表中的行；
td表明报表中的模块格，包含以下特性：
1）colspan：要求模块格可横跨的列数；
2）rowspan：要求模块格可横跨的行数；
3）headers：要求与模块格有关的标头，该特性不容易在一般访问器中造成任何视觉效果转变，但能够被显示屏阅读文章器应用。
<table> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
上面界定了1个两行、3列的报表，应用报表的益处是：访问器会确保列的宽度考虑最宽的內容，让行的高宽比考虑最高的模块格。
报表边框
应用table元素的border特性，能够为报表加上边框。
<table border="1"> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>
访问器的默认设置边框不太美观大方，一般还必须用CSS来为为各种各样元素更改边框款式。
不规律报表
应用模块格的colspan和rowspan特性能够搭建不规律报表，使报表的一些行或列超越好几个模块格，下面是1个模块格跨两列的1个事例：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
下面是1个模块格跨多行的1个事例：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
表头
th元素用于为报表加上表头，能够用来区别数据信息和对数据信息的表明。th元素适用以下特性：
1）colspan：要求模块格可横跨的列数；
2）rowspan：要求模块格可横跨的行数；
3）scope：界定将表头数据信息与模块数据信息有关联的方式；
3）headers：由空格隔开的表头模块格ID目录，为数据信息模块格出示表头信息内容，该特性不容易在一般访问器中造成任何视觉效果转变，但能够被显示屏阅读文章器应用。
<table> <tr> <th>Rank</th><th>Name</th> <th>Color</th><th>Size</th> </tr> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </table>
能够在1行中混和应用th和td。
让模块格关系表头
应用td的headers特性能够将模块格和表头关系，关系的目地关键是供显示屏阅读文章器和别的残障輔助技术性用来简化对报表的解决。headers特性能够为1个或好几个th模块格的id特性值：
<table border="1" width="100%"> <tr> <th id="name">Name</th> <th id="Email">Email</th> <th id="Phone">Phone</th> <th id="Address">Address</th> </tr> <tr> <td headers="name">George Bush</td> <td headers="Email">someone</td> <td headers="Phone">+789451236</td> <td headers="Address">Fifth Avenue New York,USA</td> </tr> </table>
结构繁杂表头
应用th的colspan和rowspan特性能够结构繁杂表头。
<table border="1">
<tr>
<th colspan="2">Company in USA</th>
</tr>
<tr>
<th>Name</th><th>Addr</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>
为报表加上构造
可使用thead、tbody和tfoot元向来为报表加上构造，这样可让为报表各个一部分加上CSS款式变得更为非常容易。
1）报表主题
tbody元素表明组成报表主题的全体人员行，不包含表头行（thead元素表明）和表脚行（tfoot元素表明）。
留意大多数数访问器在解决table元素时都会全自动插进tbody元素。
2）报表表头
thead元素用来标识报表的题目行。假如沒有thead元素的话，全部tr元素都会被视作报表行为主体的1一部分。
3）加上脚注
tfoot元素用来标识构成表脚的行。在HTML5以前tfoot元素只能出現在tbody元素以前，而在HTML5中则容许将tfoot元素放在tbody以后。
下面是1个综合性的事例，里边应用了tbody、thead和tfoot元素。
<table> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
为报表加上题目
应用caption元素能够为报表界定1个题目，并将其与报表关系起来。
<table> <caption>Results of the 2011 Fruit Survey</caption> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
1个报表只能包括1个caption元素，不用是报表的第1个元素，但自始至终显示信息在报表上方。
列排序
在报表中，因为报表全是按行组建的，致使对列的实际操作不太便捷，比如为报表的某列界定款式。可使用colgroup元向来特定列的排序。
<html>
<head>
<style>
#colgroup1{background-color: red}
#colgroup2{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1" span="2" ></colgroup>
<colgroup id="colgroup2"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
上面的事例中特定了两个列的组，第1个包括前2列，第2个包括剩余的1列，并为不一样的排序特定了不一样的款式。colgroup的span特性特定拓展几列，假如不特定span特性，还可以特定1个或好几个col元素，下面的事例做到了和上面事例1样的实际效果。
<html>
<head>
<style>
#colgroup1{background-color: red}
#col3{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号