设计表格样式

学习书籍《HTML+CSS+JavaScript从入门到精通》

基本知识点：

表格标签

<table><thead><tbody><tfoot>:语义化标签，分表代表表格、表格头部、表格主体、表格底部，不能直接在其中加文字

<tr><th><td>:tr定义表格行，可以包含th和td，th表示表格头部单元格，td表示普通单元格，th和td中直接包含文字

<col>:在表格中定义针对一个或多个列的属性值。只能在<table>或<colgroup>标签中使用（浏览器被支持效果很差，一般用伪类实现需求）

<colgroup>：定义表格列的分组。通过该标签，可以对列组及你选哪个格式化，只能在table或colgroup标签中使用（同，浏览器被支持的效果很差）

表格属性

常用：cellpadding:作用类似于padding，cellspacing：作用类似于margin，不过两者功能都比较弱

colspan定义一个单元格横跨单元格的数量属性

other知识点：

1、使用CSS的border属性代替<table>标签的border属性定义表格边框，可以提升执行效率，优化代码结构（对于所有都是，放在css中比html行内要效率更高）

2、border-collapse边框合并属性，取值:collapse，合并，separate，分离；border-spacing:表格边框间距属性，取值：一个值，表格间间距就是这个值，两个值，第一个表示单元格之间的行间距，第二个表示单元格之间的列间距；empty-cells:隐藏单元格属性，如果单元格的边框处于分离状态，可以使用这个属性来设置空白单元格是否显示。取值：show显示，hide：隐藏，无可视内容的边框隐藏，visibility:hide,即便单元格包含内容，也一起隐藏，

3、表格布局效果：caption-side属性，属性取值包括top、bottom、left、right,如果要水平对齐标题则可以使用text-align属性，对于左右两侧的标题可以使用vertical-align属性进行垂直对齐，取值其他无效，默认为top。

4、表格边框样式优先权;td>tr>tbody\thead\tfoot>ol>colgroup>ctable。

5？如果边框被定义为隐藏显示（border-stye:hidden;），则其他任何重叠声明都是无效的，如果定义了border-style:none;优先级最低。

实战先不搞