表格的CSS樣式有哪些-前端問答-PHP中文網

表格的CSS樣式有哪些

青灯夜游

發布： 2022-07-27 19:41:33

原創

4813 人瀏覽過

CSS表格樣式：1、border-collapse樣式，可設定表格的邊框是否合併為單一的邊框；2、border-spacing樣式，指定分隔邊框模型中儲存格邊界之間的距離；3、caption-side樣式，設定表格標題的位置；4、empty-cells樣式，規定是否顯示表格中的空白儲存格上的邊框和背景；5、table-layout樣式，設定完成表格佈局時所使用的佈局演算法。

表格的CSS樣式有哪些

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

使用 CSS 可以讓 HTML 表格更美觀。

表格的CSS樣式屬性

##說明#CSSborder-collapse規定是否要合併表格邊框2border- spacing規定相鄰單元格邊框之間的距離2#caption-sideempty-cellstable-layout

屬性


##規定表格標題的位置	2
#規定是否顯示表格中的空白儲存格上的邊框和背景	2
設定用於表格的佈局演算法	#2

1、border-collapse屬性

border-collapse 屬性設定表格的邊框是否合併為單一的邊框，或是像在標準的HTML 中分開顯示。

值#collapseseparateinherit#範例：

說明
如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性
預設值。邊框會被分開。不會忽略border-spacing 和empty-cells 屬性
規定應該從父元素繼承border-collapse 屬性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

登入後複製

表格的CSS樣式有哪些

#2、border-spacing 屬性
（1）作用：此屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設定為 separate，否則將忽略這個屬性。儘管這個屬性只應用於表，不過它可以由表中的所有元素繼承。

（2）可能的值：

#值

描述

#length length

表格的CSS樣式有哪些

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse:separate;
				border-spacing:10px 50px;

			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

登入後複製

3、caption-side屬性（1）作用：設定表格標題的位置，該屬性指定了表格標題相對於錶框的放置位置。表標題顯示為好像它是表之前（或之後）的一個區塊級元素。（2）可能的值：################值##################描述########################top############預設值。把表格標題定位在表格之上。 ##################bottom#############把表格標題定位在表格之下。 ################

（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支援 caption-side 屬性。如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支援 caption-side屬性。

4、empty-cells 屬性

（1）作用：該屬性定義了不包含任何內容的表單元格如何表示。如果顯示，就會繪製出儲存格的邊框和背景。除非 border-collapse 設定為 separate，否則將忽略這個屬性。

（2）可能的值：

	#規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。
如果定義兩個length參數，那麼第一個設定水平間距，而第二個設定垂直間距。	範例：

不在空白單元格周圍繪製邊框。在空白儲存格周圍繪製邊框。預設.