本篇文章將會為大家詳細介紹如何用css製作出好看又簡潔的HTML表格。相信大家接觸過HTML相關知識後,或多或少都會自己寫點小程式碼,寫個小效果。就例如table表格,我們在瀏覽各個網站時,總是能看到各種表格展示,有的就是傳統的表格,毫無樣式可言。有的則是有特色的展現表格。
對於新手小白來說,沒有接觸過css依然可以製作表格,只不過那樣的表格,枯燥乏味。下面我來跟大家分享介紹一款用css樣式製作的非常好看又簡潔的表格。
div css製作好看的表格具體程式碼範例如下:##
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用css制作的一款好看表格样式示例</title> <style> #t1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #t1 td, #t1 th { font-size:1em; border:1px solid #1094f2; padding:3px 7px 2px 7px; } #t1 th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color: #029789; color:#ffffff; } #t1 tr.alt td { color:#000000; background-color: #94ef9a; } </style> </head> <body> <table id="t1"> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> </tr> <tr> <td>张三</td> <td>男</td> <td>唱歌</td> </tr> <tr class="alt"> <td>李四</td> <td>女</td> <td>跳舞</td> </tr> <tr> <td>王二</td> <td>男</td> <td>看书</td> </tr> <tr class="alt"> <td>赵五</td> <td>男</td> <td>爬山</td> </tr> </table> </body> </html>
以上是怎麼用css製作好看的表格? 【範例】的詳細內容。更多資訊請關注PHP中文網其他相關文章!