html5--1.12表格详解

一、总结

一句话总结：

二、详解

1.表格构成三个基本要素

table：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面；
tr: 表格的行；
td:表格的单元格

2.一点说明：关于表格的属性

HTML5中删除了HTML4中table的大部分属性，HTML5中推荐使用CSS设定原来table属性实现的效果。对于HTNL5中已经废弃的大部分属性不在对其讲解

3.th元素:为表格添加标题行

th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边；tr元素的内容会自动居中对齐并加粗文字

4.colspan元素:横向合并单元格

属性值为正整数，表示该单元格合横向合并的列数，语法为 &lttd&gt &ltcolspan&gt="3" &lt/td&gt

5.rowspan元素:纵向向合并单元格

属性值为正整数，表示该单元格合纵向向合并的行数数，语法为 &lttd&gt &ltrowspan&gt="3" &lt/td&gt

6.caption元素:给表格添加标题

用来制定表格的标题或者说明；是table的子元素，必须放在table中使用
caption的align属性可以设置标题的位置，但是，在HTML5中已经被废弃，不推荐使用，建议使用CSS样式设置，后边课程会讲到。

7.thead foot baody元素

thead元素：表格的表头；tfoot元素:表格的页脚；tbaody元素：表格的主体；表格规范的写法应该包含这三部分内容
注：这三个主要结合CSS、javaScript来使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格Demo</title>
 6 </head>
 7 <body>
 8     <table border="1" bgcolor="#FFEBCD">
 9     <thead>
10         <caption>表格Demo</caption>
11         <tr><th colspan="5" align="center">标题行</th></tr>
12     </thead>
13     <tbody style="background: #FFCCCC">
14         <tr><td colspan="3" align="center">单元格</td><td>单元格</td><td>单元格</td></tr>
15         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td rowspan="3">单元格</td></tr>
16         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
17         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
18         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
19     </tbody>    
20     <tfoot>
21         <tr><td>备注：</td><td colspan="4" align="center"></td></tr>
22     </tfoot>    
23     </table>
24 </body>
25 </html>

demo code

8.colgroup元素

colgroup元素用来组合列，他的span属性可以设置组合列的数目；它可以包含一个子元素 col;
colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。

9.col元素

col元素用来设定列的属性，他也可以使用span属性；
col元素一般作为colgroup元素的子元素配合使用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格Demo</title>
 6 </head>
 7 <body>
 8     <table border="1" bgcolor="#FFEBCD">
 9     <caption>表格Demo</caption>
10     <thead>
11         <tr><th colspan="5" align="center">标题行</th></tr>
12     </thead>
13     <tbody style="background: #FFCCCC">
14         <tr><td colspan="3" align="center">单元格</td><td>单元格</td><td>单元格</td></tr>
15         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td rowspan="3">单元格</td></tr>
16         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
17         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
18         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
19     </tbody>    
20     <tfoot>
21         <tr><td>备注：</td><td colspan="4" align="center"></td></tr>
22     </tfoot>    
23     </table>
24     <br>
25     <table border="1" bgcolor="#FFEBCD">
26     <caption>表格Demo2</caption>
27     <colgroup span="1" style=" 80px">
28         <col style="background: red">
29     </colgroup>
30     <colgroup span="3" style=" 140px;color: #FFFFFF">
31         <col style="background: #987654">
32         <col style="background: #678654">
33         <col style="background: #789878">
34     </colgroup>
35     <colgroup span="1" style=" 200px;color: #FFAAAA">
36         <col style="background: #000078">
37     </colgroup>
38     <thead>
39         <tr><th>标题行</th><th>标题行</th><th>标题行</th><th>标题行</th><th>标题行</th></tr>
40     </thead>
41     <tbody style="background: #FFCCCC">
42         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
43         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
44         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
45         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
46         <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
47     </tbody>    
48     <tfoot>
49         <tr><td>备注：</td><td>备注：</td><td>备注：</td><td>备注：</td><td>备注：</td></tr>
50     </tfoot>    
51     </table>
52 </body>
53 </html>

Code Demo2