How to set table spacing in html-HTML Tutorial-php.cn

How to set table spacing in html

青灯夜游

Release： 2021-05-20 11:50:01

Original

28988 people have browsed it

In HTML, you can use the border-spacing attribute to set the table spacing. This attribute sets the distance between the borders of adjacent cells (only for "border separation" mode), the syntax format "border-spacing :horizontal spacing vertical spacing;".

How to set table spacing in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML, you can use the border-spacing attribute to set the table spacing.

The border-spacing property is used to set the distance between the borders of adjacent cells when the border of the table is in the "separated" state.

This property will set the horizontal and vertical spacing of the row and cell borders when the table borders are "separated".

Note: This property only works when the table borders are independent (that is, when the border-collapse property is set to separate).

Attribute value:

##ValueDescription


length length	Specifies the distance between the borders of adjacent cells. Use units such as px, cm, etc. Negative values are not allowed. If you define a length parameter, then the horizontal and vertical spacing is defined. If two length parameters are defined, then the first sets the horizontal spacing, and the second sets the vertical spacing.

length length

Specifies the distance between the borders of adjacent cells. Use units such as px, cm, etc. Negative values are not allowed.

If you define a
length parameter, then the horizontal and vertical spacing is defined.
If two
length parameters are defined, then the first sets the horizontal spacing, and the second sets the vertical spacing.

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			td,th{
				padding: 5px 20px;
			}
			
			#table2 {
				border-collapse: separate;
				border-spacing: 15px;
			}
			
			#table3 {
				border-collapse: separate;
				border-spacing: 15px 30px;
			}
		</style>
	</head>

	<body>
		<h2>border-spacing: 15px:</h2>
		<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
		<table id="table2">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>20</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>20</td>
			</tr>
		</table>
	</body>

</html>

Copy after login

Rendering:

How to set table spacing in html

Description:

The border-spacing attribute has the same effect as the HTML tag attribute cellspacing.
This property specifies the distance between cell boundaries in the separated border model. Of the two length values specified, the first is the horizontal gap and the second is the vertical gap. This property is ignored unless border-collapse is set to separate. Although this property only applies to tables, it is inherited by all elements in the table.