使用CSS可以輕松地控制表格的外觀,如改變單元格的背景顏色、字體樣式,還可以添加邊框線。邊框線是表格中最基本的一個(gè)元素,下面我們來(lái)看如何在CSS中設(shè)置表格的邊線。
/* 為table元素設(shè)置border屬性 */ table { border: 1px solid black; }
上面的代碼片段展示了如何為表格添加一條寬度為1像素的黑色實(shí)線邊框。其中,border屬性有三個(gè)參數(shù),分別為邊框的寬度、樣式和顏色。
接下來(lái),我們可以分別為表格的不同部分設(shè)置不同的邊線。比如,給表頭和表體分別添加不同的邊線。
/* 為表頭和表體設(shè)置不同的邊線 */ th, td { border: 1px solid black; } th { border-width: 2px; }
在上面的代碼中,我們首先為th和td元素設(shè)置了寬度為1像素的黑色實(shí)線邊框。然后,我們?yōu)閠h元素單獨(dú)設(shè)置了邊線寬度為2像素。這樣,我們的表頭就可以擁有比表體更粗的邊框了。
此外,我們還可以使用CSS的border-collapse屬性來(lái)控制表格的邊線合并。默認(rèn)情況下,相鄰單元格的邊線會(huì)重疊在一起,但經(jīng)常會(huì)出現(xiàn)邊框線缺失的情況,如下所示:
table { border: none; border-collapse: collapse; } td { border: 1px solid black; }
在上面的代碼中,我們首先設(shè)置了表格的整體邊線為沒(méi)有邊線。然后,使用border-collapse屬性將相鄰單元格的邊線合并成一條線。這樣,我們的表格就能夠完美地顯示所有邊框線了。