基础表格
表格使用的标签是<table> </table>，表格中的行使用的标签是<tr> </tr>，表格中的单元格使用的标签是<td> </td>。每一行中有多少个单元格就有多少列，相互之间为包含关系。如从效果上看到表格框线，需在table标签上添加属性border，宽度属性是width=“500px",代码如下。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Page Title</title>
</head>
<body>
<table border="1"> <!--表格边框，两行三列的表格-->
<tr> <!--行-->
<td>2014</td> <!--单元格-->
<td>2015</td>
<td>2016</td>
</tr>
<tr>
<td>10000</td>
<td>12000</td>
<td>14000</td>
</tr>
</table>
</body>
</html>表格操作
添加行和删除行要对一组tr标签操作，添加列和删除列要将每一行对应位置上的单元格进行操作。
带标题、表头和结构的表格
表头单元格的定义方法：使用<th> </th>标签，表头单元格中的内容居中、加粗显示。使用方法和td标签完全一样。
标题的定义方法：使用<caption> </caption>标签，必须紧跟在table标签的后面。表格标题会居中显示。
浏览器在解析表格时是将表格作为一个整体解析的，只有整个表格被解析出来后才会显示，如果表格复杂加载时间会长，用户体验不好。因此使用表格结构标签进行表格优化显示，使得表格解析出一部分就可以显示一部分。
表格划分三部分：表头、主体、脚注，使用时把对应的tr标签放到表格结构标签内即可，代码中结构标签的顺序不会影响显示时的顺序。
thead标签：表格的头（放标题之类的内容）
tbody标签：表格的主体（放数据主体）
tfoot标签：表格的脚（放表格的脚注）
表格属性(1)
table标签的属性：
1. width | height属性：宽 | 高 。
2. align属性：表格在包容它的容器里的位置 默认值：left 左 | right 右 | center 居中。
3. border属性： 表格边框 。
4. bgcolor属性： 背景颜色 。
5. cellpadding属性： 单元格边与内容间距 。
6. cellspacing属性： 单元格间间距 。
7. frame属性： 外侧边框可见 。
默认值：void 不显示 | above 上 | below 下 | hsides 上下 | vsides 左右 | lhs 左 | rhs 右 | box 所有四个边上显示外侧边框 / border 所有四个边上显示外侧边框 。
8. rules属性： 内侧边框可见 。
默认值： none 没有 | groups 位于行组和列组间的线条 | rows 行间 | cols 列间 | all 位于行组和列组间的线条。
表格属性(2)
tr标签的属性：align，valign【top，middle，bottom，baseline（与基线对齐）】，bgcolor（三种方法，red，#ff0000，rgb(255,0,0)）。
td和th的属性：align，valign，bgcolor，width，height。
thead，tbody，tfoot的属性：align，valign。
表格跨行列
跨列属性colspan="2"，跨行属性rowspan="2"。跨列属性其实就是对两个左右并列的单元格进行合并，跨行属性就是对两个上下并列的单元格进行合并。之后要将对应跨行的单元格删掉。
表格嵌套
嵌套的表格必须是一个完整的表格结构，嵌套表格要放在外层表格的<td>标签内。使用表格进行网页布局时，不使用border属性，不美观。
注意：1、尽量少的使用表格嵌套
2、尽量少的使用跨行和跨列
扫一扫
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
