css3表格属性：1、border-collapse；2、border-spacing；3、caption-side；4、empty-cells；5、table-layout；6、width；7、padding；8、text-align等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
1.CSS表格
使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框，使用border属性。
缩写边框属性设置在一个声明中所有的边框属性。
可以设置的属性分别（按顺序）：border-width，border-style，border-color。（即边框的宽度、边框的样式、边框的颜色）
如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。
立即学习“前端免费学习笔记（深入）”；
1.1 border属性
| 值 | 说明 |
|---|---|
| border-width | 指定边框的宽度 |
| border-style | 指定边框的样式 |
| border-color | 指定边框的颜色 |
1.2 border-width属性
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
1.3 border-style属性
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
1.4 border-color属性
| 值 | 说明 |
|---|---|
| color | 指定背景颜色。 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
小实例：
CSS简单学习
| 英文名 | 中文名 |
|---|---|
| HTML | 超文本标记语言 |
| CSS | 层叠样式表 |
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse 属性。如下：
1.5 border-collapse属性
| 值 | 说明 |
|---|---|
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
CSS简单学习
| 英文名 | 中文名 |
|---|---|
| HTML | 超文本标记语言 |
| CSS | 层叠样式表 |
1.6 border-spacing 属性
（1）作用：该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
（2）可能的值：
值 |
描述 |
length length |
规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个length参数，那么定义的是水平和垂直间距。 如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
1.7 caption-side属性
（1）作用：设置表格标题的位置，该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
（2）可能的值：
值 |
描述 |
top |
默认值。把表格标题定位在表格之上。 |
bottom |
把表格标题定位在表格之下。 |
（3）浏览器的兼容性：除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side属性。
1.8 empty-cells 属性
（1）作用：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。
（2）可能的值：
值 |
描述 |
hide |
不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
（3）浏览器的兼容性：除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。
1.9 table-layout属性
（1）作用：来显示表格单元格、行、列的算法规则，该属性指定了完成表布局时所用的布局算法。
（2）两种算法：
固定表格布局: fixed
#优点：允许浏览器更快地对表格进行布局, （在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。）；
#缺点：不太灵活。
自动表格布局：automatic
#优点：更能反映传统的 HTML，（在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。）；
#缺点：自动算法比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
（3）可能的值：
值 |
描述 |
automatic |
默认。列宽度由单元格内容设定。 |
fixed |
列宽由表格宽度和列宽度设定。 |
inherit |
规定应该从父元素继承 table-layout 属性的值。 |
2.CSS表格的宽度和高度（width、height）
width和height属性定义表格的宽度和高度。
下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：
小实例：
CSS简单学习
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 31 |
| 李四 | 男 | 43 |
| 王五 | 男 | 24 |
3.CSS表格的文字对齐方式（text-align）
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。
小实例：
CSS简单学习
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 31 |
| 李四 | 男 | 43 |
| 王五 | 男 | 24 |
4.CSS表格填充（padding）
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
| 值 | 说明 |
|---|---|
| length | 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的填充 |
| inherit | 指定应该从父元素继承padding |
小实例：
CSS简单学习
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 31 |
| 李四 | 男 | 43 |
| 王五 | 男 | 24 |
5.CSS表格的背景颜色及字体颜色（background-color、color）
CSS简单学习
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 31 |
| 李四 | 男 | 43 |
| 王五 | 男 | 24 |
6.CSS表格多属性综合练习
CSS简单学习
| 英雄名称 | 定位 | 推荐符文 | 可选神话装备 |
|---|---|---|---|
| 熔岩巨兽 | 辅助 | 不灭之握 | 霜火护手 |
| 战争女神 | AD Carry | 致命节奏 | 海妖杀手 |
| 战争之影 | 打野 | 征服者 | 三项之力 |
| 诺克萨斯之手 | 上单 | 征服者 | 渴血战斧 |
| 疾风剑豪 | 中单 | 征服者 | 不朽盾弓 |
（学习视频分享：css视频教程）
