溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3中的表格屬性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css3表格屬性：1、border-collapse；2、border-spacing；3、caption-side；4、empty-cells；5、table-layout；6、width；7、padding；8、text-align等。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
使用 CSS 可以使 HTML 表格更美觀。指定CSS表格邊框，使用border屬性。
縮寫邊框屬性設置在一個聲明中所有的邊框屬性。
可以設置的屬性分別（按順序）：border-width，border-style，border-color。（即邊框的寬度、邊框的樣式、邊框的顏色）
如果上述值缺少一個沒有關系，例如border：＃FF0000;是允許的。
1.1 border屬性
| 值 | 說明 |
|---|---|
| border-width | 指定邊框的寬度 |
| border-style | 指定邊框的樣式 |
| border-color | 指定邊框的顏色 |
1.2 border-width屬性
| 值 | 描述 |
|---|---|
| thin | 定義細的邊框。 |
| medium | 默認。定義中等的邊框。 |
| thick | 定義粗的邊框。 |
| length | 允許您自定義邊框的寬度。 |
1.3 border-style屬性
| 值 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等于 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決于 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決于 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決于 border-color 的值。 |
1.4 border-color屬性
| 值 | 說明 |
|---|---|
| color | 指定背景顏色。 |
| transparent | 指定邊框的顏色應該是透明的。這是默認 |
小實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS簡單學習</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>英文名</th>
<th>中文名</th>
</tr>
<tr>
<td>HTML</td>
<td>超文本標記語言</td>
</tr>
<tr>
<td>CSS</td>
<td>層疊樣式表</td>
</tr>
</table>
</body>
</html>
請注意，在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。
為了顯示一個表的單個邊框，使用 border-collapse 屬性。如下：
1.5 border-collapse屬性
| 值 | 說明 |
|---|---|
| collapse | 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性 |
| separate | 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
table {
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>英文名</th>
<th>中文名</th>
</tr>
<tr>
<td>HTML</td>
<td>超文本標記語言</td>
</tr>
<tr>
<td>CSS</td>
<td>層疊樣式表</td>
</tr>
</table>
</body>
</html>
1.6 border-spacing 屬性
（1）作用：該屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設置為 separate，否則將忽略這個屬性。盡管這個屬性只應用于表，不過它可以由表中的所有元素繼承。
（2）可能的值：
值 | 描述 |
length length | 規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。 如果定義一個length參數，那么定義的是水平和垂直間距。 如果定義兩個length參數，那么第一個設置水平間距，而第二個設置垂直間距。 |
1.7 caption-side屬性
（1）作用：設置表格標題的位置，該屬性指定了表標題相對于表框的放置位置。表標題顯示為好像它是表之前（或之后）的一個塊級元素。
（2）可能的值：
值 | 描述 |
top | 默認值。把表格標題定位在表格之上。 |
bottom | 把表格標題定位在表格之下。 |
（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 caption-side 屬性。如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side屬性。
1.8 empty-cells 屬性
（1）作用：該屬性定義了不包含任何內容的表單元格如何表示。如果顯示，就會繪制出單元格的邊框和背景。除非 border-collapse 設置為 separate，否則將忽略這個屬性。
（2）可能的值：
值 | 描述 |
hide | 不在空單元格周圍繪制邊框。 |
| show | 在空單元格周圍繪制邊框。默認。 |
（3）瀏覽器的兼容性：除IE外的所有瀏覽器都支持 empty-cells 屬性。如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 屬性。
1.9 table-layout屬性
（1）作用：來顯示表格單元格、行、列的算法規則，該屬性指定了完成表布局時所用的布局算法。
（2）兩種算法：
<1>固定表格布局: fixed
#優點：允許瀏覽器更快地對表格進行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；
#缺點：不太靈活。
<2>自動表格布局：automatic
#優點：更能反映傳統的 HTML，（在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。）；
#缺點：自動算法比較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內容。
（3）可能的值：
值 | 描述 |
automatic | 默認。列寬度由單元格內容設定。 |
fixed | 列寬由表格寬度和列寬度設定。 |
inherit | 規定應該從父元素繼承 table-layout 屬性的值。 |
width和height屬性定義表格的寬度和高度。
下面的例子是設置30％的寬度，30像素的th元素，20像素的td元素的高度的表格：
小實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
table {
width: 30%;
}
th {
height: 30px;
}
td {
height: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
表格中的文本對齊和垂直對齊屬性。
text-align屬性設置水平對齊方式，向左，右，或中心。
vertical-align屬性設置垂直對齊方式，比如頂部，底部或中間。
小實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th {
width: 40%;
height: 30px;
text-align: center;
}
td {
width: 40%;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
padding 簡寫屬性在一個聲明中設置所有填充屬性。該屬性可以有1到4個值。
| 值 | 說明 |
|---|---|
| length | 規定以具體單位計的填充值，比如像素、厘米等。默認值是 0px |
| % | 規定基于父元素的寬度的百分比的填充 |
| inherit | 指定應該從父元素繼承padding |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th,td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th {
background-color: burlywood;
color: aqua;
}
td {
background-color: chartreuse;
color: brown;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>表1.1-學生個人信息表</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
/*對應整個表格的樣式*/
#LOL {
font-family: "楷體", sans-serif;
width: 50%;
height: 100%;
text-align: center;
border-collapse: collapse;
}
/*對應表格中的邊框線的樣式*/
#LOL th,#LOL td {
font-size: 20px;
border: 1px solid #00FFFF;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 10px;
}
/*對應表格表頭的樣式*/
#LOL th {
font-size: 30px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 10px;
background-color: #7FFF00;
color: deeppink;
}
/*對應表格中行為a的列的樣式*/
#LOL tr.a td {
background-color: #DEB887;
color: #FF0000;
}
/*對應表格中行為b的列的樣式*/
#LOL tr.b td {
background-color: antiquewhite;
color: #FF1493;
}
/*對應表格標題的樣式*/
caption {
font-size: 16px;
caption-side: bottom;
}
</style>
</head>
<body>
<table id="LOL">
<caption>表6.66-英雄聯盟娛樂信息表</caption>
<tr>
<th>英雄名稱</th>
<th>定位</th>
<th>推薦符文</th>
<th>可選神話裝備</th>
</tr>
<tr class="a">
<td>熔巖巨獸</td>
<td>輔助</td>
<td>不滅之握</td>
<td>霜火護手</td>
</tr>
<tr class="b">
<td>戰爭女神</td>
<td>AD Carry</td>
<td>致命節奏</td>
<td>海妖殺手</td>
</tr>
<tr class="a">
<td>戰爭之影</td>
<td>打野</td>
<td>征服者</td>
<td>三項之力</td>
</tr>
<tr class="b">
<td>諾克薩斯之手</td>
<td>上單</td>
<td>征服者</td>
<td>渴血戰斧</td>
</tr>
<tr class="a">
<td>疾風劍豪</td>
<td>中單</td>
<td>征服者</td>
<td>不朽盾弓</td>
</tr>
</table>
</body>
</html>
以上是“css3中的表格屬性是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
