在網頁設計中,表格是非常常見的元素之一,也是網頁排版中不可或缺的重要部分。而CSS樣式可以使表格變得更加美觀、易讀、易懂。下面就為大家介紹一下表格的前三個不同樣式。
/* 第一個樣式:簡潔大方 */ table { border-collapse: collapse; width: 80%; margin: auto; } th, td { border: 1px solid #aaa; padding: 8px; text-align: center; } th { background-color: #ddd; } /* 第二個樣式:彩色炫酷 */ table { border-collapse: separate; border-spacing: 0; width: 80%; margin: auto; } th, td { border: 3px solid #fff; padding: 8px; text-align: center; } th { background-color: #ff6600; color: #fff; } td { background-color: #00ccff; color: #fff; } /* 第三個樣式:細條紋紋理 */ table { border-collapse: collapse; width: 80%; margin: auto; } th, td { border: 1px solid #aaa; padding: 8px; text-align: center; } th { background-color: #ddd; } tr:nth-child(even) { background-color: #f2f2f2; }
以上三個樣式分別為簡潔大方、彩色炫酷和細條紋紋理。每一個都有各自的特點和適用場合。選擇合適的樣式,可以讓網頁看起來更加美觀、更能吸引用戶的注意力。