CSS笔记（美化表格）

一、表格的基本结构
表格由行、列、单元格三部分组成，单元格是行与列交叉的部分，可以拆分和合并。
表格<table>，行<tr>，单元格<td>
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
1、标准化的表格结构
*<table>定义表格
*<caption>定义表格标题<caption>必须紧随<table>后，且唯一
*<th>定义表头单元格（文本粗体、居中）
*<tr>定义表格中的一行
*<td>定义表格中的一个单元格
*<thead>定义表头结构
*<tbody>定义表格主体结构
*<tfoot>定义表格的页脚结构
*<col>在表格中定义针对一个或多个列的属性值。只能在<table>或<colgroup>标签中使用
*<colgroup>定义表格列的分组，可以对列组进行格式化。只能在<table>标签中使用
2、创建表格
HTML有两种类型的单元格
表头单元格（居中、粗体）和标准单元格（普通，左对齐）
3、结构化的表格
thead、tbody和tfoot元素可以对表格中的行进行分组。
<tfoot>中有个colspan属性可以横向合并单元格
4、列分类
<col>和<colgroup>可以对表格中的列进行分组
span是<colgroup>和<col>标签的专用属性，规定列组应该横跨的列数
5、<table>的属性
border（可以定义边框粗细）,Cellpadding,cellspacing,width,frame,rules,summary

 
 

   
   frame属性取值说明
  
  
值
说明
void
不显示外侧边框
above
显示上部的外侧边框
below
显示下部的外侧边框
hsides
显示上部和下部的外侧边框
vsides
显示左边和右边的外侧边框
lhs
显示左边的外侧边框
rhs
显示右边的外侧边框
box
在所有四个边上显示外侧边框
border
在所有四个边上显示外侧边框

 
 

   
   rules属性取值说明
  
  
值
说明
none
没有线条
groups
位于行组和列组之间的线条
rows
位于行之间的线条
cols
位于列之间的线条
all
位于行和列之间的线条

6、单元格跨列或跨行显示
colspan和rowspan是两个重要的单元格属性，分别用来定义单元格可跨列或跨行显示。
7、定义表头单元格
scope属性可以将单元格与表头单元格联系起来
属性取值：row|col|rowgroup|colgroup|
8、为单元格指定表头
headers属性可以为单元格指定表头，该属性值是一个表头名称的字符串，id定义的。
9、为机器键索服务的属性
abbr：可以为单元格内容定义缩写版本
axis：可以对单元格进行分类。它是引号包括的一列类型的名称…（目前没有浏览器支持）

二、CSS样式
CSS为表格定义了5个专用属性

 
 
属性
取值
说明
border-collapse
separate（边分开）|collapse（边合并）
定义表格的的行和单元格的边是合并在一起还是分开
border-spacing
length
定义当表格边框独立式，行和单元格的边在横向和纵向上的间距
caption-side
top|bottom
定义表格的caption对象位于表格的顶部或底部，应与caption元素一起使用
empty-cells
show|hide
定义当单元格五内容时，是否显示该单元格的边框
table-layout
auto|fixed
定义表格的布局算法，fixed一次一次呈递内容，更快。auto所有内容读取完了才会显示出来

1、用CSS的border属性代替table标签的border属性，提升效率
2、兼容<table>标签的cellspacing属性，CSS定义了border-spacing属性