2.1.7保留-表格相关元素

来源：互联网发布：工商信息查询网大数据编辑：程序博客网时间：2024/04/30 17:16
<!DOCTYPE html><html><head><title>2.1.7保留-表格相关元素</title><metia http-equiv="Content-Type" content="text/html;charset="GBK" /></head><body><p>HTML5保留了定义表格的如下标签。<br>1、table：用于定义表格，table元素只能包含<br>0个或1个caption子元素（定义表格标题），<br>0个或1个thead子元素（定义表格头），<br>0个或1个tfoot子元素（定义表格脚），<br>多个tr子元素（定义表格行），<br>多个tbody子元素（定义表格体）。<br>该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<blockquote>除此之外，该元素还可以指定如下几个属性：<br>1.cellpadding：指定单元格内容和单元格边框之间的间距。该属性既可是像素值，也可是百分比。<br>2.cellspacing：指定单元格之间的间距。该属性值既可以是像素值，也可是百分比。<br>3.width：指定表格的宽度，该属性值既可是像素值，也可是百分比。<br><br>HTML5删除了table元素所有的align、bgcolor、border等属性，如果完全按HTML5的建议，table元素的cellpadding、celspacing、width属性也不应该指定，而是应该全部放到CSS中定义。</blockquote><br><br>2、caption：用于定义表格标题，该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素等。<br><br>3、tr：定义表格行，该元素只能包含td或者th两种元素，该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br><br>4、td：定义单元格，该元素和div元素一样，可以包含各种类型的子元素，包括在td元素里包含table子元素再次插入一个表格。<br>该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br><blockquote>除此之外，该元素还可以指定如下几个属性：<br>1.colspan：指定该单元格跨多少列，该属性值就是一个简单数字。<br>2.rowspan：指定该单元格可横跨的行数。<br>3.height：指定表格的高度，该属性值既可是像素值，也可是百分比。<br>4.width：指定表格的宽度，该属性值既可是像素值，也可是百分比。<br><br>HTML5删除了td元素原有的align、bgcolor、valign等属性，如果完全按HTML5的建议td元素的height、width属性也不应该指定，而是应该全部放到CSS中定义。</blockquote><br><br>5、th：定义表格页眉的单元格，和td标签的用法几乎完全一样，只是浏览器呈现th元素时有一定差别。<br><br>6、tbody：定义表格的主体，该元素只能包含tr子元素。<br>该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性。<br>style和class等普通属性也可以指定onclick等事件属性。<br>使用tbody标签，可以将一个表格分为几个独立的部分。tbody元素可以将表格中的一行或几行合并成一组，当我们使用Ajax编程时常常需要动态修改表格中某几行，这就需要使用tbody元素了。<br>在tbody元素中，必须使用tr子元素来定义表格行，tbody元素本事不会生成任何输出内容。一旦我们使用tbody将多行定义为一组，一个tbody元素就是表格中一个独立的部分，即不能从一个tbody跨越到另一个tbody中。<br><br>7、thead：定义表格头，用法与tbody基本相似，指定功能稍有差别。<br><br>8、tfoot：定义表格脚，用法与tbody基本相似，指定功能稍有差别。<br><br>thead、tfoot、tbody元素可以让我们对表格中的行进行分组，每个tbody就是一组，可以多行（在Ajax编程中经常用到该元素）。除此之外，当创建某个表格时，也许希望拥有一个标题行，可以是多个数据行组成的组，以及位于底部的一个统计行。这样就可以让浏览器能对表格标题和页脚之间的表格内容进行滚动。而且，当打印长表格内容时，表格头和表格脚将被打印在包含表格数据的每个页面上。</p><p>事例：<br>1、简单表格<br><table style="width:400px" border="1"><caption><b>疯狂Java体系图书</b></caption><tr><th>书名</th><th>作者</th></tr><tr><td>疯狂Java讲义</td><td>李刚</td></tr><tr><td>轻量级Java EE企业应用实战</td><td>李刚</td></tr></table><br>2、跨行、跨列表格<br><table style="width:240px" border="1"><tr><td rowspan="2">跨2行的单元格</td><td>普通单元格1</td></tr><tr><td>普通单元格2</td></tr><tr><td colspan="2">跨2列的单元格</td></tr><tr><td>普通单元格</td><td>普通单元格</td></tr></table><br>3、使用thead、tbody、tfoot元素的表格<br><table border="1" style="width:400px"><caption><b>疯狂Java体系图书</b></caption><thead><tr><th>书名</th><th>作者</th></tr></thead><tfoot><tr><td colspan="2" style="text-align:right">现总计：2本图书</td></tr></tfoot><tbody><tr><td>疯狂Java讲义</td><td>李刚</td></tr><tr><td>轻量级Java EE企业应用实战</td><td>李刚</td></tr></tbody></table><br>如果决定使用thead和tfoot元素，建议按如下次序来使用它们：thread、tfoot、tbody，浏览器自动会将tfoot元素的内容呈现在表格最下面，不仅如此，只能在table元素内使用这些标签。<br><br></p><p>除此之外，如果需要在页面中为某列整体指定属性，HTML5保留了如下两个标签。<br>1、col：该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在table元素或colgroup元素内。<br>该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br><blockquote>除此之外，该元素还可以指定如下属性：<br>span：指定该列可横跨多少列。</blockquote>col元素是个空元素，它自己本身并不产生表格列。如需创建表格列，必须在tr元素内定义td元素。col元素只是为表格中指定列整体指定属性值，因此一旦在table中使用col为表格列指定属性，col定义的表格列就应与表格内实际包含的列数相等。<br><br>2、colgroup：该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在table元素或colgroup元素内。<br>该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br><blockquote>colgroup的作用只是用于组织多个col元素，当使用colgroup组织多个col元素时，colgroup上指定的属性将对它所包含的所有col元素有效。</blockquote>eg：使用colgroup、col元素为指定列设置属性值。<!-- 设置表格背景色为黑色，单元格之间的间距为1px通过设置背景色为黑色可以实现边框效果--><table style="background-color:black;border-collapse:separate;border-spacing:1px;"><caption><b>疯狂Java体系图书</b></caption><!-- 定义所有列的背景色都是白色 --><colgroup style="background-color:white;"><!-- 设置第一列宽160px --><col style="width:160px"/><!-- 定义横跨两列，设置这两列各宽100px --><col span="2" style="width:100px"/></colgroup><thead><tr><th>书名</th><th>作者</th><th>价格</th></tr></thead><tfoot><tr><td colspan="3" style="text-align:right">现总计：2本图书</td></tr></tfoot><tbody><tr><td>疯狂Java讲义</td><td>李刚</td><td>109</td></tr><tr><td>轻量级Java EE企业应用实战</td><td>李刚</td><td>89</td></tr></tbody></table></p></body></html>
0 0