小編給大家分享一下css3中的表格屬性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、施秉網(wǎng)站維護、網(wǎng)站推廣。

css3表格屬性：1、border-collapse；2、border-spacing；3、caption-side；4、empty-cells；5、table-layout；6、width；7、padding；8、text-align等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

1.CSS表格

使用 CSS 可以使 HTML 表格更美觀。指定CSS表格邊框，使用border屬性。

縮寫邊框?qū)傩栽O(shè)置在一個聲明中所有的邊框?qū)傩浴?/p>

可以設(shè)置的屬性分別（按順序）：border-width，border-style，border-color。（即邊框的寬度、邊框的樣式、邊框的顏色）

如果上述值缺少一個沒有關(guān)系，例如border：＃FF0000;是允許的。

1.1 border屬性

1.2 border-width屬性

1.3 border-style屬性

1.4 border-color屬性

小實例：

	
		
		
		
			table,th,td {
				border: 1px solid black;
			}
		
	
	
	
		

			

				
英文名
				
中文名
			
			

				
HTML
				
超文本標(biāo)記語言
			
			

				
CSS
				
層疊樣式表
			
		
	

請注意，在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。

為了顯示一個表的單個邊框，使用 border-collapse 屬性。如下：

1.5 border-collapse屬性

	
		
		
		
			table {
				border-collapse: collapse;
			}
			table,th,td {
				border: 1px solid black;
			}
		
	
	
	
		

			

				
英文名
				
中文名
			
			

				
HTML
				
超文本標(biāo)記語言
			
			

				
CSS
				
層疊樣式表
			
		
	

1.6 border-spacing 屬性

（1）作用：該屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設(shè)置為 separate，否則將忽略這個屬性。盡管這個屬性只應(yīng)用于表，不過它可以由表中的所有元素繼承。

（2）可能的值：

1.7 caption-side屬性

（1）作用：設(shè)置表格標(biāo)題的位置，該屬性指定了表標(biāo)題相對于表框的放置位置。表標(biāo)題顯示為好像它是表之前（或之后）的一個塊級元素。

（2）可能的值：

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

1.8 empty-cells 屬性

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

（2）可能的值：

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

1.9 table-layout屬性

（1）作用：來顯示表格單元格、行、列的算法規(guī)則，該屬性指定了完成表布局時所用的布局算法。

（2）兩種算法：

<1>固定表格布局: fixed

#優(yōu)點：允許瀏覽器更快地對表格進行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距，而與單元格的內(nèi)容無關(guān)。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；

#缺點：不太靈活。

<2>自動表格布局：automatic

#優(yōu)點：更能反映傳統(tǒng)的 HTML，（在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的。）；

#缺點：自動算法比較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內(nèi)容。

（3）可能的值：

2.CSS表格的寬度和高度（width、height）

width和height屬性定義表格的寬度和高度。

下面的例子是設(shè)置30％的寬度，30像素的th元素，20像素的td元素的高度的表格：

小實例：

	
		
		
		
			table,th,td {
				border: 1px solid black;
			}
			table {
				width: 30%;
			}
			th {
				height: 30px;
			}
			td {
				height: 20px;
			}
		
	
	
	
		

			

				
姓名
				
性別
				
年齡
			
			

				
張三
				
男
				
31
			
			

				
李四
				
男
				
43
			
			

				
王五
				
男
				
24
			
		
	

3.CSS表格的文字對齊方式（text-align）

表格中的文本對齊和垂直對齊屬性。

text-align屬性設(shè)置水平對齊方式，向左，右，或中心。

vertical-align屬性設(shè)置垂直對齊方式，比如頂部，底部或中間。

小實例：

	
		
		
		
			table,th,td {
				border: 1px solid black;
			}
			th {
				width: 40%;
				height: 30px;
				text-align: center;
			}
			td {
				width: 40%;
				height: 20px;
				text-align: center;
			}
		
	
	
	
		

			

				
姓名
				
性別
				
年齡
			
			

				
張三
				
男
				
31
			
			

				
李四
				
男
				
43
			
			

				
王五
				
男
				
24
			
		
	

4.CSS表格填充（padding）

padding 簡寫屬性在一個聲明中設(shè)置所有填充屬性。該屬性可以有1到4個值。

小實例：

	
		
		
		
			table,th,td {
				border: 1px solid black;
			}
			th,td {
				padding: 15px;
			}
		
	
	
	
		

			

				
姓名
				
性別
				
年齡
			
			

				
張三
				
男
				
31
			
			

				
李四
				
男
				
43
			
			

				
王五
				
男
				
24
			
		
	

5.CSS表格的背景顏色及字體顏色（background-color、color）

	
		
		
		
			table,th,td {
				border: 1px solid black;
			}
			th {
				background-color: burlywood;
				color: aqua;
			}
			td {
				background-color: chartreuse;
				color: brown;
			}
			caption {
				caption-side: bottom;
			}
		
	
	
	
		

			
表1.1-學(xué)生個人信息表
			

				
姓名
				
性別
				
年齡
			
			

				
張三
				
男
				
31
			
			

				
李四
				
男
				
43
			
			

				
王五
				
男
				
24
			
		
	

6.CSS表格多屬性綜合練習(xí)

	
		
		
		
			/*對應(yīng)整個表格的樣式*/
			#LOL {
				font-family: "楷體", sans-serif;
				width: 50%;
				height: 100%;
				text-align: center;
				border-collapse: collapse;
			}
			/*對應(yīng)表格中的邊框線的樣式*/
			#LOL th,#LOL td {
				font-size: 20px;
				border: 1px solid #00FFFF;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
			}
			/*對應(yīng)表格表頭的樣式*/
			#LOL th {
				font-size: 30px;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
				background-color: #7FFF00;
				color: deeppink;
			}
			/*對應(yīng)表格中行為a的列的樣式*/
			#LOL tr.a td {
				background-color: #DEB887;
				color: #FF0000;
			}
			/*對應(yīng)表格中行為b的列的樣式*/
			#LOL tr.b td {
				background-color: antiquewhite;
				color: #FF1493;
			}
			/*對應(yīng)表格標(biāo)題的樣式*/
			caption {
				font-size: 16px;
				caption-side: bottom;
			}
		
	
	
	
		
			表6.66-英雄聯(lián)盟娛樂信息表
			
				英雄名稱
				定位
				推薦符文
				可選神話裝備
			
			
				熔巖巨獸
				輔助
				不滅之握
				霜火護手
			
			
				戰(zhàn)爭女神
				AD Carry
				致命節(jié)奏
				海妖殺手
			
			
				戰(zhàn)爭之影
				打野
				征服者
				三項之力
			
			
				諾克薩斯之手
				上單
				征服者
				渴血戰(zhàn)斧
			
			
				疾風(fēng)劍豪
				中單
				征服者
				不朽盾弓
			
		
	

以上是“css3中的表格屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！