1.CSS表格
使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框，使用border属性。
缩写边框属性设置在一个声明中所有的边框属性。
可以设置的属性分别（按顺序）：border-width，border-style，border-color。（即边框的宽度、边框的样式、边框的颜色）
如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。
值 |
说明 |
指定边框的宽度 |
|
指定边框的样式 |
|
指定边框的颜色 |
|
指定应该从父元素继承border属性值 |
1.2 border-width属性
值 |
描述 |
thin |
定义细的边框。 |
medium |
默认。定义中等的边框。 |
thick |
定义粗的边框。 |
length |
允许您自定义边框的宽度。 |
inherit |
规定应该从父元素继承边框宽度。 |
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 的值。 |
inherit |
规定应该从父元素继承边框样式。 |
1.4 border-color属性
值 |
说明 |
color |
指定背景颜色。 |
transparent |
指定边框的颜色应该是透明的。这是默认 |
inherit |
指定边框的颜色，应该从父元素继承 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>英文名</th> <th>中文名</th> </tr> <tr> <td>HTML</td> <td>超文本标记语言</td> </tr> <tr> <td>CSS</td> <td>层叠样式表</td> </tr> </table> </body> </html>
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用border-collapse 属性。如下：👇👇👇
值 |
说明 |
collapse |
如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
separate |
默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
inherit |
规定应该从父元素继承 border-collapse 属性的值 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> table { border-collapse: collapse; } table,th,td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>英文名</th> <th>中文名</th> </tr> <tr> <td>HTML</td> <td>超文本标记语言</td> </tr> <tr> <td>CSS</td> <td>层叠样式表</td> </tr> </table> </body> </html>
2.CSS表格的宽度和高度（width、height）
width和height属性定义表格的宽度和高度。
下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } table { width: 30%; } th { height: 30px; } td { height: 20px; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>31</td> </tr> <tr> <td>李四</td> <td>男</td> <td>43</td> </tr> <tr> <td>王五</td> <td>男</td> <td>24</td> </tr> </table> </body> </html>
3.CSS表格的文字对齐方式（text-align）
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } th { width: 40%; height: 30px; text-align: center; } td { width: 40%; height: 20px; text-align: center; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>31</td> </tr> <tr> <td>李四</td> <td>男</td> <td>43</td> </tr> <tr> <td>王五</td> <td>男</td> <td>24</td> </tr> </table> </body> </html>
4.CSS表格填充（padding）
padding简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
值 |
说明 |
length |
规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px |
% |
规定基于父元素的宽度的百分比的填充 |
inherit |
指定应该从父元素继承padding |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } th,td { padding: 15px; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>31</td> </tr> <tr> <td>李四</td> <td>男</td> <td>43</td> </tr> <tr> <td>王五</td> <td>男</td> <td>24</td> </tr> </table> </body> </html>
5.CSS表格的背景颜色及字体颜色（background-color、color）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } th { background-color: burlywood; color: aqua; } td { background-color: chartreuse; color: brown; } caption { caption-side: bottom; } </style> </head> <body> <table> <caption>表1.1-学生个人信息表</caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>31</td> </tr> <tr> <td>李四</td> <td>男</td> <td>43</td> </tr> <tr> <td>王五</td> <td>男</td> <td>24</td> </tr> </table> </body> </html>
6.CSS表格多属性综合练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> /*对应整个表格的样式*/ #LOL { font-family: "楷体", sans-serif; width: 50%; height: 100%; text-align: center; border-collapse: collapse; } /*对应表格中的边框线的样式*/ #LOL th,#LOL td { font-size: 20px; border: 1px solid #00FFFF; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 10px; } /*对应表格表头的样式*/ #LOL th { font-size: 30px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 10px; background-color: #7FFF00; color: deeppink; } /*对应表格中行为a的列的样式*/ #LOL tr.a td { background-color: #DEB887; color: #FF0000; } /*对应表格中行为b的列的样式*/ #LOL tr.b td { background-color: antiquewhite; color: #FF1493; } /*对应表格标题的样式*/ caption { font-size: 16px; caption-side: bottom; } </style> </head> <body> <table id="LOL"> <caption>表6.66-英雄联盟娱乐信息表</caption> <tr> <th>英雄名称</th> <th>定位</th> <th>推荐符文</th> <th>可选神话装备</th> </tr> <tr class="a"> <td>熔岩巨兽</td> <td>辅助</td> <td>不灭之握</td> <td>霜火护手</td> </tr> <tr class="b"> <td>战争女神</td> <td>AD Carry</td> <td>致命节奏</td> <td>海妖杀手</td> </tr> <tr class="a"> <td>战争之影</td> <td>打野</td> <td>征服者</td> <td>三项之力</td> </tr> <tr class="b"> <td>诺克萨斯之手</td> <td>上单</td> <td>征服者</td> <td>渴血战斧</td> </tr> <tr class="a"> <td>疾风剑豪</td> <td>中单</td> <td>征服者</td> <td>不朽盾弓</td> </tr> </table> </body> </html>
