css樣式如何美化表格和邊框的外觀?

如今大家習慣了使用DIV+CSS佈局頁面,其實table+css曾經也是流行的頁面佈局方式。下面

深圳市博納網路資訊科技有限公司

介紹css樣式如何美化表格和邊框的外觀。

1。表格邊框:使用border屬性可用設定表格的邊框。例如下面這段程式碼,使用border屬性設定了

的邊框屬性,效果如圖。

css樣式如何美化表格和邊框的外觀?

2。摺疊邊框:使用border-collapse屬性設定是否表格邊框摺疊為單一邊框。

css樣式如何美化表格和邊框的外觀?

單一邊框

雖然給表格添加了邊框,但是顯示的是多個邊框,其中包括了表格邊框、表頭邊框和單元格邊框,如果為表格新增下面的樣式,就可以將表格的邊框顯示為單一的邊框,效果如圖

css樣式如何美化表格和邊框的外觀?

3。表格的寬度和高度:透過width和height屬性設定表格的寬度和高度。

4。表格文字對齊:使用text-align和vertical-align屬性設定表格中文字的對齊方式。使用text-align屬性設定水平對齊方式,如左對齊、右對齊或者居中;使用vertical-align屬性設定垂直對齊方式,如頂部對齊、底部對齊或居中對齊。

5。表格內邊距:使用padding屬性可用設定表格內邊距。例如下面這段程式碼,表頭內邊距為5px,單元格內邊距為10px,效果如圖

css樣式如何美化表格和邊框的外觀?

6。表格的顏色:表格中邊框的顏色透過border屬性進行設定,表格中文字的顏色透過color屬性進行設定,表格中背景的顏色透過background-color屬性進行設定,例如下面這段程式碼:在這段程式碼中,分別對錶頭的背景色、單元格的背景色、表頭字型顏色和單元格字型顏色,以及邊框顏色進行了設定。

css樣式如何美化表格和邊框的外觀?

執行後的效果如圖:

css樣式如何美化表格和邊框的外觀?

7。邊框樣式:樣式是邊框最重要的一個方面,因為如果不設定邊框樣式,將無法顯示邊框。在css中可以透過border-style屬性設定10種不同的邊框樣式,這10種邊框樣式如表:

css樣式如何美化表格和邊框的外觀?

下面為部分邊框樣式效果

css樣式如何美化表格和邊框的外觀?

css樣式如何美化表格和邊框的外觀?

頂部