CSS(層疊樣式表)是一門用來描述文檔樣式的語言。在網頁設計中,表格是一個常用的元素,往往用來展示數據或布局結構。CSS 能夠改善表格的可讀性以及美化表格,下面我們來學習一些有關 CSS 表格語句的知識。
/* CSS 表格基礎樣式 */ table { border-collapse: collapse; /* 把表格邊框合并成單一的邊框 */ width: 100%; /* 表格寬度占據其父容器的 100% */ } td, th { border: 1px solid black; /* 單元格和表頭加邊框 */ padding: 8px; /* 內邊距,使表格內容與邊框保持一定距離 */ } /* 表頭樣式 */ th { background-color: #f2f2f2; /* 表頭背景灰色 */ text-align: left; /* 文本左對齊 */ } /* 相鄰行背景顏色不同 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 鼠標懸浮在單元格上的效果 */ td:hover { background-color: #ddd; } /* 隱藏表格邊框 */ table.no-border, table.no-border td, table.no-border th { border: none; }
上述代碼中,我們定義了表格的基礎樣式,將單元格和表頭加上邊框,設置背景顏色,內邊距等。同時,我們也定義了一些額外的效果,比如相鄰行背景顏色不同,鼠標懸浮在單元格上的效果等。
值得注意的是,我們還可以使用“:hover”偽類選擇器,讓鼠標懸浮在單元格上時自動觸發樣式。
最后,我們也提供了隱藏表格邊框的選項。因為有時我們會希望在某些特定情況下隱藏表格邊框,讓頁面看起來更加簡潔美觀。
以上是 CSS 表格語句的基礎應用,只要掌握了這些簡單的語法,我們就能夠更加靈活地設計出漂亮實用的網頁表格。