lesson10

第10课 CSS的结构伪类选择器

---

    HTML中的表格与excel中的表格功能是一样的。 以前好多网页是借助表格进行排版的，CSS出现后虽然表格排版不流行了， 在HTML是对大量数据的显示用表格来显示依然是主要手段。 表格是组合标签来实现的。通过table ，th，tr ，td等标签配合能实现多样化的表格。

1 表格的基本形式：

<table>
<tr> <td>11</td> <td>12</td> <td>13</td> </tr>
<tr> <td>21</td> <td>22</td> <td>23</td> </tr>
</table>
    这个一个基本的表格组成，table定义了一个表格容器，容器内有若干个tr行定义的子容器组成。最后是td单元格，文字内容是放在单元格内的。 默认情况下表格是没有边框的。如果需要的话用属性显示出来。

2 表格的边框：

    表格的边框是用border 属性控制的，0 是不显示，1是1像素。例如 <table border="5">

11	12	13
21	22	23

3 表格的标题：

    表格的标题是显示在表格上方的文字描述，有标签来表示。与tr标签是并行存在的。 <caption>表格标题</caption> 用来说明表格内容的用途。

4 表头单元格：

表头单元格也是单元格，要放在tr内。位于所有的tr前面。 <tr><th>表头单元格</th><th>表头单元格1</th></tr> 表头单元格里的字体是加粗的，以区别是表头。

5 表格的尺寸定义：

表格可以定义table的宽度和高度， <table border="5" width="200" height="300"> 可以定义tr的高度 height="300" 不能定义宽度，宽度与table一致。 可以定义td的宽度 width="200" 高度与tr一致.

6 表格的边框和背景颜色,背景图片：

当表格边框大于0时可以设置颜色的。 通过属性 bordercolor来设置。默认颜色是黑色 <table border="5" width="400" height="300" bordercolor="#009003"> Bgcolor="#880022" background="java.jpg" 来设置背景色，默认颜色是白色 table的背景设置为图片 background 属性来实现。当有背景图片时，背景色就不用了。

7 表格对齐：

table对齐是指table在整个页面的对齐，不是单元格内的内容。align实现 background="java.jpg" align="center">

8 表格单元格间距和内边界距离：

table的单元格的间距是指单元格的间隙。 background="java.jpg" cellspacing="15"> 单元格内容边界间距： table的单元格的内容距离边线的距离。 cellspacing="15" cellpadding="5">

9 单元格连线和边框显示规则：

用rules属性来控制连线显示规则 align="center" rules="cols"> 1 all 显示所有分割线 2 cols 显示列分割线 3 rows 显示行分割线 4 none 所有不显示 5 groups 组与组 用frame属性来控制边框显示规则 align="center" rules="all" frame="hsides"> 1 box 全显示 2 void 不显示 3 hsides 垂直边 4 vsides 水平边 5 above 上 6 below 下 7 lhs 左 8 rhs 右

10 表格行设定：

可以通过对tr的参数设置，控制一行单元格的参数 <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000" height="90">

11 单元格设定：

单元格属性参数有11个，如下 <td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">