# 表格边框的css语法整理

- Link: https://yjyj.net/learn/3818.html
- Published: 2005-12-13T20:21:31+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 一次梳理表格边框相关 CSS：宽度、颜色、样式和四边单独控制都讲清楚。
 * border-style 是关键，只有先定义可见样式，边框才会真正显示出来。
 * 想省代码就用略写属性；想精细控制，就拆成上下左右分别设置。

我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能
达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css
美化表格的边框。
 　　有关表格边框的css语法 　　具体内容包括：上边框宽度、右边框
宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、
右边框、边框、宽度、高度、有关标签等。 　　 1.上边框宽度 　　语法: border-top-width:
<值> 　　允许值: thin | medium | thick | <长度> 　　初始值: medium 　　适用于: 所有
对象 　　向下兼容: 否 　　上边框宽度属性用于指定一个元素上边框的宽度。值可以是三
个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许
使用负值。也可以用在上边框、边框的宽度或边框的属性略写。 　　2.右边框宽度 　　语法:
border-right-width: <值> 　　允许值: thin | medium | thick | <长度> 　　初始值: 
medium 　　适用于: 所有对象 　　向下兼容: 否 　　右边框宽度属性用于指定元素的右边框
的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成
比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。 　　 
3.下边框宽度 　　语法: border-bottom-width: <值> 　　允许值: thin | medium | thick
| <长度> 　　初始值: medium 　　适用于: 所有对象 　　向下兼容: 否 　　下边框宽度
属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度
的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或
边框的属性略写。 　　 4.左边框宽度 　　语法: border-left-width: <值> 　　允许值:
thin | medium | thick | <长度> 　　初始值: medium 　　适用于: 所有对象 　　向下兼容:
否 　　左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都
不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在左
边框、边框的宽度或边框的属性略写。 　　5.边框宽度 　　语法: border-width: <值> 　
允许值: [ thin | medium | thick | <长度> ] 　　初始值: 未定义 　　适用于: 所有对象
向下兼容: 否 　　边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。
不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。
如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。
这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略
写的边框属性。 　　6.边框颜色 　　语法: border-color: <值> 　　允许值: <颜色> 　
初始值: 颜色属性的值 　　适用于: 所有对象 　　向下兼容: 否 　　边框颜色属性设置一个
元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、
下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略
了的值与对边相等。也可以使用略写的边框属性。 　　7.边框样式 　　语法: border-style:
<值> 　　允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset
| outset ] 　　初始值: none 　　适用于: 所有对象 　　向下兼容: 否 　　边框样式属性
用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键
字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，
它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的
边框属性。 　　none：无样式； 　　dotted：点线； 　　dashed：虚线； 　　solid：实
线； 　　double：双线； 　　groove：槽线； 　　ridge：脊线； 　　inset：内凹； 　
outset：外凸。 　　8.上边框 　　语法: border-top: <值> 　　允许值: <上边框宽度> 
|| <边框式样> || <颜色> 　　初始值: 未定义 　　适用于: 所有对象 　　向下兼容: 否
上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。注意只能给出一个
边框式样。也可以使用略写的边框属性。 　　9.右边框 　　语法: border-right: <值> 　
允许值: <右边框宽度> || <边框式样> || <颜色> 　　初始值: 未定义 　　适用于: 所有
对象 　　向下兼容: 否 　　右边框属性是一个用于设置一个元素右边框的宽度、式样、和
颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　 　　10.下边框
语法: border-bottom: <值> 　　允许值: <下边框宽度> || <边框式样> || <颜色> 　　初始
值: 未定义 　　适用于: 所有对象 　　向下兼容: 否 　　下边框属性是一个用于设置一个
元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的
边框属性。 　　11.左边框 　　语法: border-left: <值> 　　允许值: <左边框宽度> ||
<边框式样> || <颜色> 　　初始值: 未定义 　　适用于: 所有对象 　　向下兼容: 否 　
左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个
边框式样。也可以使用略写的边框属性。 　　 12.边框 　　语法: border: <值> 　　允许
值: <边框宽度> || <边框式样> || <颜色> 　　初始值: 未定义 　　适用于: 所有对象 　
向下兼容: 否 　　边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。 　
边框声明的例子包括： 　　H2 { border: groove 3em } 　　A:link { border: solid blue}
A:visited { border: thin dotted #800080 } 　　A:active { border: thick double red}
边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框
的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、
边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。 　
13.宽度 　　语法: width: <值> 　　允许值: <长度> | <百分比> | auto 　　初始值: auto
适用于: 块级和替换元素 　　向下兼容: 否 　　宽度属性的初始值为“auto”，即为该元素
的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。
14.高度 　　语法: height: <值> 　　允许值: <长度> | auto 　　初始值: auto 　　适用
于: 块级和替换元素 　　向下兼容: 否 　　高度属性的初始值为“auto”，即为该元素的原有
高度(有就是元素自己的高度，)。百分比参考上级元素的宽度。不允许使用负的长度值。 　
15.有关标签 　　table：表格标签，对整个表格样式的定义要放在table中； 　　td：单元
格标签，对单元格样式的定义要放在td中。

❓ 延伸问答与排错指南（FAQ）

表格边框的 CSS 该从哪些属性入手？

先掌握 border-width、border-color、border-style 这三类基础属性，再看 border-top/
right/bottom/left 及其略写形式。前者负责宽度、颜色和样式，后者负责按方向精细控制，
适合做表格边框的局部调整。

为什么设置了边框宽度却看不见？

因为边框是否可见，通常还要配合 border-style。文章里明确提到，边框样式属性用于设置
可见边框；如果样式是 none，即使设置了宽度和颜色，也可能看不到边框效果。

border-width 和单独四边属性有什么区别？

border-width 是上、右、下、左边框宽度的略写，可一次设置一到四个值；单独四边属性则
能分别控制某一边。前者适合统一风格，后者适合做局部强调或不对称边框。

📚 【[招数学习](https://yjyj.net/category/learn)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [比较漂亮的链接样式](https://yjyj.net/learn/3817.html)
 * [让网页适应不同分辨率](https://yjyj.net/learn/3815.html)
 * [用CSS实现字体阴影的效果](https://yjyj.net/learn/3825.html)
 * [CSS独门技巧大放送](https://yjyj.net/learn/3826.html)
 * 热门必读[解决: windows 环境下 无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称](https://yjyj.net/learn/7776.html)
 * 热门必读[DMIT 全线缺货, 只剩搬瓦工了](https://yjyj.net/discover/7787.html)