建站
咨詢
售后
建站咨詢
新聞中心
CSS 表格
使用 CSS 可以大大提高 HTML 表格的外觀。
| 2020年11月 | 2019年11月 | 程序語言 | 等級(jí) | 更改 |
|---|---|---|---|---|
| 1 | 2 | C | 16.21% | +0.17% |
| 2 | 3 | Python | 12.12% | +2.27% |
| 3 | 1 | Java | 11.68% | -4.57% |
| 4 | 5 | C++ | 7.60% | +1.99% |
| 5 | 5 | C# | 4.67% | +0.36% |
| 6 | 6 | Visual Basic | 4.01% | -0.22% |
| 7 | 7 | JavaScript | 2.03% | +0.10% |
| 8 | 8 | PHP | 1.79% | 0.07% |
| 9 | 16 | R | 1.64% | +0.66% |
| 10 | 9 | SQL | 1.54% | +0.15% |
實(shí)例
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
嘗試一下 ?
表格邊框
指定 CSS 表格邊框，使用 border 屬性。
下面的例子指定了一個(gè)表格的 th 和 td 元素的黑色邊框：
實(shí)例
table, th, td
{ border: 1px solid black; }
嘗試一下 ?
請注意，在上面的例子中的表格有雙邊框。這是因?yàn)楸砗?th / td 元素有獨(dú)立的邊界。
為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。
折疊邊框
border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：
實(shí)例
table
{ border-collapse:collapse; }
table,th, td { border: 1px solid black; }
嘗試一下 ?
表格寬度和高度
width 和 height 屬性定義表格的寬度和高度。
下面的例子是設(shè)置 100％ 的寬度，50 像素的 th 元素的高度的表格：
實(shí)例
table
{ width:100%; }
th { height:50px; }
嘗試一下 ?
表格文字對齊
表格中的文本對齊和垂直對齊屬性。
text-align 屬性設(shè)置水平對齊方式，像左，右，或中心：
實(shí)例
td
{ text-align:right; }
嘗試一下 ?
垂直對齊屬性設(shè)置垂直對齊，比如頂部，底部或中間：
實(shí)例
td
{ height:50px; vertical-align:bottom; }
嘗試一下 ?
表格填充
如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用 td 和 th 元素的填充屬性：
實(shí)例
td
{ padding:15px; }
嘗試一下 ?
表格顏色
下面的例子指定邊框的顏色，和 th 元素的文本和背景顏色：
實(shí)例
table, td, th
{ border:1px solid green; }
th
{ background-color:green; color:white; }
嘗試一下 ?
更多實(shí)例
制作一個(gè)個(gè)性表格
這個(gè)例子演示了如何創(chuàng)建一個(gè)個(gè)性的表格。
設(shè)置表格標(biāo)題的位置
這個(gè)例子演示了如何定位表格標(biāo)題。
指定表格的寬度和高度
這個(gè)例子演示了如何指定表格的高度與寬度。
分享題目：創(chuàng)新互聯(lián)CSS教程：CSSTable(表格)
標(biāo)題URL：http://www.dlmjj.cn/article/dppesic.html
