W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
使用 CSS 可以大大提高 HTML 表格的外觀。
2020年11月 | 2019年11月 | 程序語(yǔ)言 | 等級(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% |
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
指定 CSS 表格邊框,使用 border
屬性。
下面的例子指定了一個(gè)表格的 th
和 td
元素的黑色邊框:
請(qǐng)注意,在上面的例子中的表格有雙邊框。這是因?yàn)楸砗?th / td
元素有獨(dú)立的邊界。
為了顯示一個(gè)表的單個(gè)邊框,使用 border-collapse
屬性。
border-collapse
屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開(kāi):
width
和 height
屬性定義表格的寬度和高度。
下面的例子是設(shè)置 100% 的寬度,50 像素的 th 元素的高度的表格:
表格中的文本對(duì)齊和垂直對(duì)齊屬性。
text-align 屬性設(shè)置水平對(duì)齊方式,像左,右,或中心:
垂直對(duì)齊屬性設(shè)置垂直對(duì)齊,比如頂部,底部或中間:
如果在表的內(nèi)容中控制空格之間的邊框,應(yīng)使用 td 和 th 元素的填充屬性:
下面的例子指定邊框的顏色,和 th 元素的文本和背景顏色:
制作一個(gè)個(gè)性表格
這個(gè)例子演示了如何創(chuàng)建一個(gè)個(gè)性的表格。
設(shè)置表格標(biāo)題的位置
這個(gè)例子演示了如何定位表格標(biāo)題。
這個(gè)例子演示了如何指定表格的高度與寬度。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: