在显示一个表格数据时,通常都带有表格边框,用来界定不同单元格的数据;
当table
表格的描述标记border
值大于0时,显示边框;
若border
值为0,则不显示边框;
边框显示时,可用border
属性及衍生属性,以及border-collapse
属性对边框进行修饰,border
属性表示对边框进行样式、颜色和宽度设置,以达到提高样式效果的目的;
border-collapse
属性主要用设置表格的边框是否合并为一个单一的边框,像在标准的 HTML 中那样分开显示;
语法格式如下所示:
border-collapse:separate | collapse
separate
是默认值,表示边框会被分开,不会忽略 border-spacing
和 empty-sells
属性;
而 collapse
属性表示边框会合并为一个单一的边框,会忽略 border-spacing
和 empty-sells
属性;
例子 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>季度收入</title>
<style type="text/css">
.tan{
border: 1px solid #429ddd;
font-family: 幼圆;
border-collapse: collapse;
}
.tan caption{
padding-top: 3px;
padding-bottom: 2px;
font-weight: bolder;
font-family: 楷体;
border: 2px solid #429fff;
}
.tan th{
font-weight: bold;
text-align: center;
}
.tan td{
border: 1px solid blue;
text-align: right;
padding: 4px;
}
</style>
</head>
<body>
<table class="tan">
<caption class="tan">
2020年第一季度销售业绩表
</caption>
<tr>
<th>项目</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
</tr>
<tr>
<td>钢铁</td>
<td>75万</td>
<td>85万</td>
<td>55万</td>
</tr>
<tr>
<td>水泥</td>
<td>18万</td>
<td>9万</td>
<td>12万</td>
</tr>
<tr>
<td>木料</td>
<td>180万</td>
<td>120万</td>
<td>200万</td>
</tr>
<tr>
<td>涂料</td>
<td>28万</td>
<td>47万</td>
<td>36万</td>
</tr>
<tr>
<td>腻子</td>
<td>30万</td>
<td>45万</td>
<td>40万</td>
</tr>
</table>
</body>
</html>
使用 border-width
属性,能对边框的宽度进行设置;
若要单独设置一个边框的宽度,可使用 border-width
属性的衍生属性,border-top-width
和border-left-width
等进行设置;
例子 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格边框宽度</title>
<style type="text/css">
table{
text-align: center;
width: 450px;
border-width: 7px;
border-style: double;
color: green;
}
td{
border-width: 4px;
border-style: dashed;
}
</style>
</head>
<body>
<table class="tan">
<caption class="tan">
2020年第一季度销售业绩表
</caption>
<tr>
<th>项目</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
</tr>
<tr>
<td>钢铁</td>
<td>75万</td>
<td>85万</td>
<td>55万</td>
</tr>
<tr>
<td>水泥</td>
<td>18万</td>
<td>9万</td>
<td>12万</td>
</tr>
</body>
</html>
使用 color
设置表格中的文本颜色,使用 background-color
设置表格背景色;
若要突出表格中的某一个单元格,还能使用 background-color
进行设置某一个单元格的颜色;
例子 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格边框色和背景色</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
font-family: 楷体;
font-size: 15px;
}
table{
background-color: #0000FF;
text-align: center;
width: 560px;
border: 1px solid green;
}
td{
border: 1px solid #335577;
height: 30px;
line-height: 35px;
}
.tb{
background-color: #70ff60;
}
</style>
</head>
<body>
<table cellpadding="3" cellpadding="0">
<caption class="tan">
2020年第一季度销售业绩表
</caption>
<tr>
<th class="tb">项目</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
</tr>
<tr>
<td>钢铁</td>
<td>75万</td>
<td>85万</td>
<td>55万</td>
</tr>
<tr>
<td>水泥</td>
<td>18万</td>
<td>9万</td>
<td>12万</td>
</tr>
</body>
</html>