day10

表格

1.表格是什么：

页面中用来显示数据

2.课表/日历/成绩单/oa系统

3.语法结构：

​        

​

<tr>

<td></td>

...

</tr>

...

但是：如果没有加特殊的属性每一行中的单元格数量必须一致

</table>

4.表格的属性

加到table里面的：

border设置边框 cellspcaing边框与边框之间的距离【默认为1px】 width/height align【设置table的位置】

bgcolor【背景颜色】 cellpadding【文字与边框之间的距离】

加到tr里面的：

height="200px" align="center" bgcolor="yellow" 需要注意从te中无法设置宽度

加到td里面的:

width="300px" height="300px" align="left" bgcolor="green"

colspan:跨列成行 在同一行中进行操作，他后面的属性值等于删除掉【同一行中的】的单元个数+1

rowspan:跨行成列 在同一列中进行操作，他后面的属性值等于删除掉【同一列中的】的单元个数+1

表格html标签和属性

用法	意义	说明
表格标题	<caption>标题内容</caption>
表格列分组	A.<colgroup span="数字"></colgroup> B.<col span="数字" /> C.如果用rules添加组分割线的话，列分组必须用colgroup	A.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组 B.span属性显示指定相邻几列组成一组，span属性值默认为1
表格行分组	A.<thead></thead> 表头 B.<tbody></tbody> 表体 C.<tfoot></tfoot> 表尾
添加组分隔线	rules="groups/rows/cols/all/none"	必须给table标签添加属性

表格相关的CSS属性

个数	用法	意义	说明
1	border-spacing:20px;	单元格间距	单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
2	border-collapse:separate/collapse;	合并相邻单元格边框	合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
3	empty-cells:show/hide;	无内容时单元格的设置	定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；
4	table-layout:auto/fixed;	是否固定单元格的宽度	fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化
5	caption-side:top/right/bottom/left	表格标题位置	left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top