HTML之表格

来源：互联网发布：淘宝达人等级v2怎么升编辑：程序博客网时间：2024/06/05 10:41

1.表格构成三个要素

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

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

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

3.相关元素及属性

th元素：为表格添加表行题

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

colspan属性：横向合并单元格

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

rowspan属性：竖向合并单元格。

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

caption元素：给表格添加标题

用来指定表格的标题或说明，是table的子元素，必须放在table中使用。caption的algin属性可以设置标题的位置，胆子HTML5中已经弃用，建议使用css样式设置。

thead/tbody/tfoot元素

thead：表格的表头 tbody：表格的主题 tfoot：表格的页脚；表格的规范写法应该包含这三个部分内容，注：这三个要结合css，JavaScript来使用。

colgroup元素

用来组合列：他的span元素属性可以设置组合列的数目，它还包含一个子元素col

colgroup是table元素的子元素，必须放在caption元素之后，thead之前。

col元素

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

表格综合代码示例：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>less09_表格</title></head><body><table border="1"><tr><td>单元格1</td> <td>单元格1</td><td>单元格1</td></tr><tr><td>单元格2</td> <td>单元格2</td><td>单元格2</td></tr><tr><td>单元格3</td> <td>单元格3</td><td>单元格3</td></tr></table><br><br><h1>加标题的单元格</h1><table border="1"><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr><tr><td>单元格1</td> <td>单元格1</td><td>单元格1</td></tr><tr><td>单元格2</td> <td>单元格2</td><td>单元格2</td></tr><tr><td>单元格3</td> <td>单元格3</td><td>单元格3</td></tr></table><br><br><h1>横向合并单元格</h1><table border="1"><tr><th colspan="3">标题</th></tr><tr><td>单元格1</td> <td>单元格1</td><td>单元格1</td></tr><tr><td colspan="2" align="center">单元格2</td> <td>单元格2</td></tr><tr><td>单元格3</td> <td>单元格3</td><td>单元格3</td></tr></table><br><br><h1>竖向合并单元格</h1><table border="1"><tr><th rowspan="4">竖向陈列</th> <th>1</th><th>2</th></tr><tr> <td>单元格1</td><td>单元格1</td></tr><tr> <td rowspan="2">单元格2</td><td>单元格2</td></tr><tr> <td>单元格3</td></tr></table><br><br><h1>表格的标题</h1><table border="1"><caption> 表格标题</caption><tr><th rowspan="4">竖向陈列</th> <th>1</th><th>2</th></tr><tr> <td>单元格1</td><td>单元格1</td></tr><tr> <td rowspan="2">单元格2</td><td>单元格2</td></tr><tr> <td>单元格3</td></tr></table><br><br><h1>标题</h1><table border="1"><tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr><tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr><tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr><tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr><tr> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> </tr></table><br><br><table border="1"><thead><tr><th colspan="5">标题</th></tr></thead><tbody><tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr><tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr><tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr></tbody><tfoot><tr> <td>备注：</td> <td colspan="4">单元格4</td>  </tr></tfoot></table><br><br><table border="1"><colgroup span="1" style="width: 100px"><col style="background:cyan"></colgroup><colgroup span="3" style="width: 200px"><col style="background: red"><col style="background: green"><col style="background: blue"></colgroup><colgroup span="1" style="width: 100px"></colgroup><tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr><tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr><tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr><tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr><tr> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> </tr></table></body></html>

效果图

阅读全文

0 0