CSS(Cascading Style Sheets)是一種標記語言,用于描述文檔如何呈現在屏幕、紙張或其他輸出設備上。在網頁設計中,表格(table)是一種常見的布局方式。在CSS中,我們可以用一些代碼來控制表格的樣式、邊框、背景等等。下面我們來詳細介紹一下如何使用CSS做表格。
/* 定義表格樣式 */ table { border-collapse: collapse; /* 表格邊框合并為一條 */ width: 100%; /* 表格寬度100% */ } /* 定義表格的行樣式 */ tr:nth-of-type(even) { /* 偶數行的背景色為 #f2f2f2 */ background-color: #f2f2f2; } /* 定義表格的單元格樣式 */ td { border: 1px solid #ddd; /* 單元格邊框為1px寬灰色 */ padding: 8px; /* 單元格內邊距為8px */ text-align: center; /* 單元格文本居中 */ } /* 定義表頭的樣式 */ th { border: 1px solid #ddd; /* 表頭邊框為1px寬灰色 */ padding: 8px; /* 表頭內邊距為8px */ text-align: center; /* 表頭文本居中 */ background-color: #4CAF50; /* 表頭背景色為綠色 */ color: white; /* 表頭字體顏色為白色 */ }
上述代碼中,我們首先定義了表格的基本樣式。使用border-collapse屬性將表格邊框合并為一條,使用width屬性將表格寬度設置為100%。
接著,我們定義了表格中行的樣式。使用:nth-of-type選擇器來選擇偶數行,并設置背景色為#f2f2f2。
最后,我們定義了表格中單元格和表頭的樣式。使用border屬性定義單元格和表頭的邊框樣式,使用padding屬性定義內邊距,使用text-align屬性將文本居中。同時,為了使表頭更加醒目,我們給表頭設置了背景色為綠色并設置字體顏色為白色。
綜上所述,CSS是制作表格的一種非常有力的工具。通過上述代碼,我們可以輕松地對表格的樣式進行定制化,讓我們的網頁更加美觀動人。
上一篇css做網站技巧