CSS表格是網頁設計中常見的布局方式之一,可用于展示數據和信息,使頁面更加有條理和美觀。下面介紹一些常用的CSS表格代碼。
/* 創建一個基本的表格 */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } /* 改變表頭背景色和文字顏色 */ th { background-color: #4CAF50; color: white; } /* 鼠標懸浮時改變行背景色 */ tr:hover {background-color: #f5f5f5;} /* 可用于單行表格 */ tr:nth-child(even) {background-color: #f2f2f2;} /* 創建縱向表頭 */ td:first-child { font-weight: bold; } /* 合并單元格 */ table, th, td { border: 1px solid black; } th { background-color: #4CAF50; color: white; } td { text-align: center; } td[colspan="2"] { background-color: #f2f2f2; }
CSS表格的用途廣泛,可以應用于數據展示、網格布局、導航欄等多個方面。需要注意的是,表格的樣式要做到簡潔美觀,不要過于花哨,以免影響用戶體驗。此外,代碼的書寫規范也很重要,建議使用XML格式。