web前端学习（⼗⼋）——CSS3表格属性（table）的相关设
置
1.CSS表格
使⽤ CSS 可以使 HTML 表格更美观。指定CSS表格边框，使⽤border属性。
缩写边框属性设置在⼀个声明中所有的边框属性。
可以设置的属性分别（按顺序）：border-width，border-style，border-color。（即边框的宽度、边框的样式、边框的颜⾊）如果上述值缺少⼀个没有关系，例如border：＃FF0000；是允许的。
1.1 border属性
值说明
指定边框的宽度
指定边框的样式
指定边框的颜⾊
指定应该从⽗元素继承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 属性。如下：
1.5 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>
text align center<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论