HTML5的表格元素

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

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

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

HTML5中删除了HTML4中的table的大部分属性，html5中推荐使用CSS设定原来table属性实现的效果。

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

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

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

属性值为正整数，表示该单元格横向合并的列数，语法为<td colspan="3"></td>

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

属性值为正整数，表示该单元格纵向合并的行数，语法为<td rowspan="3"></td>

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

用来制定表格的标题或者说明：是table的子元素，必须放在table中并使用
caption的align属性可以设置标题的位置，但是在html5中已经被废弃，不推荐使用，必须使用css样式设置

7.thead\tfoot\tbody元素

thead元素：表格的表头；tfoot元素：表格的页脚；tbaody元素：表格的主题；表格规范的写法应该包含这三部分
内容。注意：这三个主要结合CSS，javascript来说用

8.colgroup元素

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

9.col元素

col元素用来设定列的属性，他也可以使用span属性；col元素一般做为colgroup元素的子元素配合使用。
colgroup中组合列项目太多不能分别设置每列的样式，这时候就需要用到col元素。

普通单元格例子：

  <table border=1><caption>表格标题行</caption><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>

合并单元格源码例子：

<table border=1><tr><th colspan="3">标题</th></tr><tr><td>第一格</td><td>第二格</td><td>第三格</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr>
</table>

thead\tfoot\tbody元素的使用：

 <table border=1><thead><tr style="background:red"><th>标题1</th><th>标题2</th><th>标题3</th></tr></thead><tbody><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr></tbody><tfoot><tr><td>备注：</td><td colspan="2"></td></tr>     </tfoot>
</table>

colgroup元素的使用：

 <table border=1><colgroup span=2 style="width:200px;"></colgroup> <!--span是组合列的数目--><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>

col元素的使用：

  <table border=1><colgroup span=1 style="width:200px;"><col style="background:red"></col>    </colgroup> <!--span是组合列的数目--><colgroup span=3 style="width:150px;"><col style="background:#6666ff"></col><col style="background:#ccff33"></col>  <col style="background:#66ff33"></col>  </colgroup> <tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>