好看的表格是網頁設計中必不可少的元素之一。通過巧妙的使用CSS樣式,我們可以讓表格更加美觀、易讀,并且增加互動性。下面我們來看一些常用的表格樣式。
table { font-size: 14px; width: 100%; border-collapse: collapse; border-spacing: 0; } thead th { background-color: #f8f8f8; color: #333; font-weight: bold; text-align: center; padding: 10px; border: 1px solid #ccc; } tbody td { background-color: #fff; color: #333; text-align: center; padding: 10px; border: 1px solid #ccc; vertical-align: middle; } tbody tr:nth-child(odd) td { background-color: #f8f8f8; } tbody td:hover { background-color: #e2e2e2; }
上述代碼展示了一個簡單、直觀、易于操作的表格樣式。設置了表格的字體大小、寬度、邊框、對齊等屬性,讓表格更加整潔、有序。利用thead和tbody區分表頭和表身,使表格的信息更加清晰明了。同時,我們還通過設置顏色、鼠標懸浮效果等,讓表格更加美觀、易讀,并增加互動性。
通過以上代碼,在我們的網頁中就可以輕松使用這個優雅的表格樣式。當然,除了這個樣式之外,我們還可以根據自身需求,使用不同的CSS樣式,來打造獨特的表格效果。
上一篇好看的超鏈接css
下一篇如何 css樣式生成圖片