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

首頁

web前端

前端問答

表格的CSS樣式有哪些

青灯夜游

Jul 27, 2022 pm 07:41 PM

css表格

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）可能的值：

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

################值##################描述########################top############預設值。把表格標題定位在表格之上。 ##################bottom#############把表格標題定位在表格之下。 ################

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

4、empty-cells 屬性

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

（2）可能的值：

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

	描述
	#hide
	show

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

5、table-layout屬性

#（1）作用：來顯示表格單元格、行、列的演算法規則，該屬性指定了完成表格佈局時所使用的佈局演算法。

（2）兩種演算法：

固定表格佈局: fixed

#優點：允許瀏覽器更快地對表格進行佈局, （在固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、儲存格間距，而與儲存格的內容無關。透過使用固定表格佈局，使用者代理程式在接收第一行後就可以顯示表格。）；

#缺點：不太靈活。

自動表格佈局：automatic

#優點：更能反映傳統的HTML，（在自動表格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。）；

#缺點：自動演算法比較慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的內容。（3）可能的值：描述


	automatic
##預設.列寬度由儲存格內容設定。

fixed

#列寬由表格寬度和列寬度設定。 ###############（學習影片分享：###web前端入門###）###

以上是表格的CSS樣式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

反應的局限性是什麼？May 02, 2025 am 12:26 AM

Include：1）AsteeplearningCurvedUetoItsVasteCosystem，2）SeochallengesWithClient-SiderEndering，3）潛在的PersperformanceissuesInsuesInlArgeApplications，4）ComplexStateStateManagementAsappsgrow和5）TheneedtokeEedtokeEedtokeEppwithitsrapideDrapidevoltolution.thereedtokeEppectortorservolution.thereedthersrapidevolution.ththesefactorsshesssheou

React的學習曲線：新開發人員的挑戰May 02, 2025 am 12:24 AM

reactischallengingforbeginnersduetoitssteplearningcurveandparadigmshifttocoment oparchitecent.1）startwithofficialdocumentationforasolidFoundation.2）了解jsxandhowtoembedjavascriptwithinit.3）

為React中的動態列表生成穩定且獨特的鍵May 02, 2025 am 12:22 AM

ThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute

JavaScript疲勞：與React及其工具保持最新May 02, 2025 am 12:19 AM

javascriptfatigueinrectismanagbaiblewithstrategiesLike just just in-timelearninganning and CuratedInformationsources.1）學習whatyouneedwhenyouneedit

使用USESTATE（）掛鉤的測試組件May 02, 2025 am 12:13 AM

tateractComponents通過theusestatehook，使用jestandReaCtTestingLibraryToSigulationsimintionsandIntractions and verifyStateChangesInTheUI.1）underthecomponentAndComponentAndComponentAndConconentAndCheckInitialState.2）模擬useruseruserusertactionslikeclicksorformsorformsormissions.3）

React中的鑰匙：深入研究性能優化技術May 01, 2025 am 12:25 AM

KeysinreactarecrucialforopTimizingPerformanceByingIneFefitedListupDates.1）useKeyStoIndentifyAndTrackListelements.2）避免使用ArrayIndicesasKeystopreventperformansissues.3）ChooSestableIdentifierslikeIdentifierSlikeItem.idtomaintainAinainCommaintOnconMaintOmentStateAteanDimpperperFermerfermperfermerformperfermerformfermerformfermerformfermerment.ChosestopReventPerformissues.3）

反應中的鍵是什麼？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiers usedwhenrenderingListstoimprovereConciliation效率。 1）heelPreactrackChangesInListItems，2）使用StableanDuniqueIdentifiersLikeItifiersLikeItemidSisRecumended，3）避免使用ArrayIndicesaskeyindicesaskeystopreventopReventOpReventSissUseSuseSuseWithReRefers和4）

反應中獨特鍵的重要性：避免常見的陷阱May 01, 2025 am 12:19 AM

獨特的keysarecrucialinreactforoptimizingRendering和MaintainingComponentStateTegrity.1）useanaturalAlaluniqueIdentifierFromyourDataiFabable.2）ifnonaturalalientedifierexistsistsists，generateauniqueKeyniqueKeyKeyLiquekeyperaliqeyAliqueLiqueAlighatiSaliqueLiberaryLlikikeuuId.3）deversearrayIndiceSaskeyseSecialIndiceSeasseAsialIndiceAseAsialIndiceAsiall

See all articles