表格是網頁設計中常用的元素之一,可以用來展示數據、排版等多種內容。在HTML中,使用table標簽可以方便地創建表格,但如果想要讓表格更加美觀,就需要運用CSS的樣式來實現。
table{ border-collapse: collapse; /* 合并單元格邊框 */ width: 100%; /* 表格寬度100%,使用百分比可以適應不同大小的設備 */ text-align: center; /* 文字居中顯示 */ } th, td{ padding: 10px; /* 單元格內邊距為10像素 */ border: 1px solid #ccc; /* 單元格邊框為1像素灰色 */ } tr:hover{ background-color: #f5f5f5; /* 鼠標懸停時,行背景色變為淺灰色 */ }
上述代碼中,我們定義了表格的樣式,其中需要注意的是:
- border-collapse: collapse;:合并單元格邊框,讓表格看起來更加整齊。
- width: 100%;:表格寬度為100%,可以適應不同大小的設備。
- text-align: center;:文字居中顯示,表格更加美觀。
- padding: 10px;:單元格內邊距為10像素,讓表格看起來更加舒適。
- border: 1px solid #ccc;:單元格邊框為1像素灰色,使表格每個單元格有明顯的分割。
- tr:hover{background-color: #f5f5f5;}:鼠標懸停時,行背景色變為淺灰色,提高用戶體驗。
以上代碼可以作為一個簡單的表格樣式模板,我們只需要在HTML中添加table、th、tr、td等標簽,然后為它們定義相應的樣式,就能夠得到漂亮的表格了。
上一篇制作熱門活動頁面css
下一篇CSS選擇器下表