HTML 标签(表格)

HTML 标签(表格)

HTML 标签(表格)

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义）每行被分割为若干单元格（由<td>标签定义）字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table标签是一个不能自由嵌套的块级元素，table只允许嵌套<caption>、<tr> 、结构化标签如thead、tbody、tfooter、等标签除此以外，所有嵌套在table标签内部的元素和文本都会被渲染table元素之前。 

关于表格：

• table标签，表示表格
• tr标签，表示表格的行
• td标签，表示表格的单元格

               a、td标签是单元格

                b、被td标签包裹的文本不会加粗，但是水平方向居左显示，垂直方向居中显示

                c、colspan属性，向th标签，表示表头单元格

a、th标签也是单元格

b、一般作为表格的第一行(作为表格的头部)

c、被th标签包裹的文本会加粗，并且水平和垂直方向都居中显示

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

格式：

     <table><tr><th></th><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td><td></td>         </tr><tr><td></td><td></td><td></td><td></td>         </tr></table>

元素支持的属性：

属性名称	属性值	说明
border	像素	设置表格的边框线，被舍弃CSS border 替代
cellspacing	像素 / 百分比	规定单元格之间的距离，被舍弃 CSS border-spacing 替代
cellpadding	像素 / 百分比	规定单元格边沿与其内容之间的距离，被舍弃 CSS padding 替代
width	像素 / 百分比	表格宽度，被舍弃 CSS width替代
height	像素 / 百分比	表格的高度，被舍弃 CSS height 替代
summary	字符串	用来描述表格数据说明 被舍弃使用 元素代替，设置caption标签， 放到table内部的第一行, 作为表格的标题

<th>和<td>标签的常用属性

属性名称	属性值	适用元素	说明
width	像素 / 百分比	th，td	设置高 被舍弃
height	像素 / 百分比	th，td	设置高 被舍弃
colspan	正整数	th，td	规定向右合并时，单元格可横跨的列数—跨列
rowspan	正整数	th，td	规定向下合并时，单元格可横跨的列数—跨行
scope	row / col /rowgroup / colgroup (默认)	th，td	本质上指定表头的轴。默认情况下，标题是列的标题，这是典型的，但行也可能以标题开头，您可以将该标题的范围限定为行或行组。

表格的重点难点，"拆分合并单元格"

概念：<th>和<td>标签 都具有两个重要属性： colspan 和 rowspan 。它们接受2或更大的任何正整数。如果td的colspan为2(即<td colspan="2">)，则它仍将是一个单元格，但它将水平占据一行中两个单元格的空间。rowspan与colspan相似但垂直占据。

(1)、rowspan 向下方向合并单元格,取值数值,需要合并几个单元格,这个数值就写几【跨行，删除的也是其他行的单元格内容】

(2)、colspan 向右方向合并单元格,取值数值,需要合并几个单元格,这个数值就写几【跨列，删除的也是本行的单元格内容】

(3)、合并单元格的步骤:

1. 先 找到你要合并的单元格
2. 然后 确定是需要左右合并单元格,还是需要上下合并单元格,再决定使用对应的colspan属性或者rowspan属性,设置数值，需要合并几个单元格,这个数值就写几
3. 最后 注释掉(删除)多余的单元格

代码示范:

   <table  width="20%" height="200"  border="0" cellspacing="0"><tr><td colspan="2" bgcolor="red"></td><!-- <td></td> --><td rowspan="2"bgcolor="green"></td></tr><tr><td rowspan="3" bgcolor="blue"></td><!-- <td ></td> --><td bgcolor="pik"></td></tr><tr><!-- <td ></td > --><!-- <td></td> --></tr><tr><td colspan="2"  rowspan="2" bgcolor="#0f0"></td><!-- <td></td> --><!-- <td></td> --></tr></table>

效果图：

表格的标题：

HTML为表格提供了

元素用来做表格的标题，一般情况下会被作为table的第一个标签。但是该标签可以放在table任意地方，最终显示显示时都会出现在table的最上方。

表格的结构化：

HTML提供了

用来包装table结构，更清晰的表示表头表尾，表格的结构化增强了表格的语义化。为了让大表格(table)在下载时，能分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解析的，使用tbody标签可以优化显示。如果表格很长，用tbody标签进行分段，可以一部分一部分地显示，不需等整个表格都下载完成。下载一块就显示一块，特别是当表格巨大时有比较好的效果。

tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。

• thead　表格的头        用来放标题之类的东西
• tbody　表格的身体    放数据本体 

a、对表格进行分块

b、可以加快表格的渲染速度

c、加载多少块就渲染多少表格

   tfoot 表格的脚       放表格的脚注之类；

案例：

css样式：

  dt {margin: 0;text-align: center;color: #6262ff;}dd {margin: 0;text-align: center;color: #666;}table td img{width:120px;}

 

 <table border="1" cellspacing="0" cellpadding=""><tr><td><img src="/images/sgyy.jpg" alt=""><dl><dt>完美世界</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>大主宰</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>斗破苍穹</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>绝世唐门</dt><dd>794609人推荐</dd></dl></td></tr><tr><td><img src="/images/sgyy.jpg" alt=""><dl><dt>斗罗大陆</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>校花的贴身高手</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>武动乾坤</dt><dd>794609人推荐</dd></dl></td><td><img src="/images/sgyy.jpg" alt=""><dl><dt>遮天</dt><dd>794609人推荐</dd></dl></td></tr></table>