首頁 >web前端 >html教學 >html怎麼設定表格間距

html怎麼設定表格間距

青灯夜游
青灯夜游原創
2021-05-20 11:50:0129013瀏覽

在html中,可以使用border-spacing屬性來設定表格間距,該屬性設定相鄰單元格的邊框間的距離(僅用於「邊框分離」模式),語法格式「border-spacing :水平間距垂直間距;」。

html怎麼設定表格間距

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在html中,可以使用border-spacing屬性來設定表格間距。

border-spacing屬性用於表格的邊框在「分離」的狀態下,設定相鄰單元格的邊框間的距離。

此屬性會在表格邊框「分離」時,設定行和儲存格的邊框在橫向和縱向上的間距。

註:只有當表格邊框各自獨立(即border-collapse屬性設定separate時)此屬性才會運作。

屬性值:

##length length
描述

    規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。
  • 如果定義一個

    length
  • 參數,那麼定義的是水平和垂直間距。
  • 如果定義兩個

    length
  • 參數,那麼第一個設定水平間距,而第二個設定垂直間距。


範例:


<!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>

效果圖:

html怎麼設定表格間距

說明:
  • #該border-spacing屬性的作用等同於HTML標籤屬性cellspacing。
  • 此屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個長度值中,第一個是水平間隔,第二個是垂直間隔。除非 border-collapse 被設定為 separate,否則將忽略這個屬性。儘管這個屬性只應用於表,不過它可以由表中的所有元素繼承。

推薦教學:html影片教學

css影片教學######

以上是html怎麼設定表格間距的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn