Home > Article > Web Front-end > css: Sample code sharing of border-spacing attribute (table border spacing)
css: Sample code sharing of border-spacing attribute (table border spacing)
- 黄舟Original
- 2017-06-30 09:55:534015browse
We know that tableby default adds a border as shown below:
We explained in the previous section how to merge table borders (eliminate table border spacing). But in actual development, we may need to set the spacing of the table borders.
In CSS, we use the border-spacing property to define the table border spacing.
Syntax:
border-spacing: pixel value;
Description:
This attribute specifies the distance between cell borders. When only one pixel value is specified, this value will act on the horizontal and vertical spacing; when two length values are specified, the first one acts on the horizontal spacing and the second one acts on the vertical spacing.
In the initial stage of CSS, everything uses pixels as units. In CSS advanced, we will explain other CSS units in depth.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>border-spacing属性</title>
<style type="text/css">
table,th,td{border:1px solid gray;}
table{border-spacing:5px 10px }
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>The preview effect in the browser is as follows:
Analysis:
"border-spacing: 5px 10px" defines the horizontal spacing between cells as 5px and the vertical spacing as 10px. The
border-spacing attribute is the same as the border-collapse attribute learned in the previous lesson. It only needs to be set in the table element to take effect. There is no need to set it in th and td elements. Causes code redundancy.
The above is the detailed content of css: Sample code sharing of border-spacing attribute (table border spacing). For more information, please follow other related articles on the PHP Chinese website!