Rumah > Artikel > hujung hadapan web > 怎么用css制作好看的表格?【示例】
本篇文章将要给大家详细介绍如何用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>
上述代码我们通过浏览器访问,效果如下图:
如图所示,相比较枯燥的黑白线条的表格是不是好看多了呢?又简洁又好看,每隔一行显示不同颜色背景,而且table边框是细线展示。可以让用户更直观的查阅表格中信息。想要达到这样的效果就离不开强大的css样式属性了。
这里我们在style样式里可以发现一些重要的属性比如:
border-collapse:collapse;这个属性表示的是可以把表格边框合并成为单一的边框。
background-color就是设置背景颜色的。
那么通过上述的介绍,大家对用css制作表格是否有更多的了解?这样就可以根据自我审美喜好,来设置不同效果的css表格样式。一张好看的表格不仅可以让用户喜欢,也可以让自己管理起来更加直观方便。
本篇文章具有一定的参考价值,希望对有需要的朋友有所帮助!
Atas ialah kandungan terperinci 怎么用css制作好看的表格?【示例】. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!