在網頁設計中,表格是常見的頁面元素。如何讓表格看起來美觀、易于使用呢?下面我們講一些CSS技巧,幫助您制作好看的表格模板。
/* 表格整體樣式 */ table { border-collapse: collapse; /* 合并邊框 */ width: 100%; max-width: 800px; /* 最大寬度為800px */ margin: 0 auto; /* 居中 */ } /* 表頭樣式 */ th { background-color: #007bff; /* 背景色 */ color: #fff; /* 文字顏色 */ font-weight: bold; /* 粗體 */ padding: 15px; /* 內邊距 */ text-align: center; /* 文字居中 */ } /* 表格內容樣式 */ td { border: solid 1px #ccc; /* 灰色邊框 */ padding: 10px; /* 內邊距 */ text-align: center; /* 文字居中 */ } /* 鼠標懸停樣式 */ tr:hover { background-color: #f1f1f1; /* 灰色背景 */ } /* 奇偶行樣式 */ tr:nth-child(odd) { background-color: #fff; /* 白色背景 */ } tr:nth-child(even) { background-color: #f9f9f9; /* 灰色背景 */ }
以上樣式可以根據需要進行修改,例如調整顏色、邊框寬度等。使用這些CSS技巧,您可以輕松制作出好看、易于閱讀的表格模板。