在Web開發的過程中,我們經常需要制作各種表格,如學生信息表、商品列表等。在這些表格中,CSS相當于一個“化妝師”,可以美化表格的樣式,使表格更加美觀。
.student-info { border: 1px solid #ccc; /* 設置邊框 */ width: 500px; /* 設置寬度 */ margin: 20px auto; /* 水平居中 */ } .student-info th { background-color: #f2f2f2; /* 設置表頭背景顏色 */ text-align: left; /* 文字左對齊 */ padding: 10px; /* 設置表頭內邊距 */ } .student-info td { padding: 10px; /* 設置單元格內邊距 */ border-bottom: 1px solid #ccc; /* 設置單元格下邊框 */ } .student-info tr:last-child td { border-bottom: none; /* 去掉最后一行的單元格下邊框 */ }
以上是一個基本的學生信息表的樣式代碼。首先,我們給表格加上了一個邊框,然后設置了表格的寬度和居中對齊。接著,我們設置了表頭的背景顏色和文字對齊方式,并給單元格設置上下邊框。最后,去掉了最后一行單元格的下邊框。
以上樣式是比較基礎的樣式,我們還可以根據實際需求設置更多的樣式。如需美化表格的話,還可以設置表格的顏色、字體、字號等等。總之,CSS是一個非常強大的工具,只要我們運用得當,可以制作出非常精美的網頁。