表格是互聯(lián)網(wǎng)上最常用的數(shù)據(jù)展示方式之一,而美觀的表格則可以更好地吸引讀者的眼球,提高頁面的視覺效果。在 CSS 中,我們可以通過一些簡單的代碼,來創(chuàng)建出豐富美觀的表格模板。
下面是一段 CSS 代碼,用于創(chuàng)建出美觀的表格:
table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; background-color: #ffffff; text-align: left; border: 1px solid #dddddd; } th, td { padding: 10px; } th { background-color: #f2f2f2; font-weight: bold; color: #333333; border-bottom: 2px solid #dddddd; } td { border-bottom: 1px solid #dddddd; } tr:hover { background-color: #f5f5f5; }
以上代碼中,我們首先給表格設置了邊框合并,使得邊框更加平滑自然。然后,我們設置了表格的寬度和居中樣式,并且設置了表格的背景色和字體顏色。對于表頭單元格和數(shù)據(jù)單元格,我們分別設置了不同的樣式,以便更好地區(qū)分它們。同時,我們也為表格設置了鼠標懸浮時的背景顏色,使得用戶體驗更加順暢。
需要注意的是,以上代碼只是一個簡單的模板,我們可以根據(jù)實際需要進行修改和調(diào)整,以創(chuàng)建出更符合我們需求的表格樣式。