介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title>用css制作的一款好看表格样式示例& lt;/title>
& lt; style>
# t1
{
Arial字体类型:“抛石机MS", Helvetica,无衬线;
宽度:100%;
border-collapse:崩溃;
}
# t1 td, # t1 th
{
字体大小:1 em;
边界:1 px固体# 1094 f2;
填充:3 px 7 px 2 px 7 px;
}
# t1 th
{
字体大小:1.1 em;
text-align:左;
padding-top: 5 px;
padding-bottom: 4 px;
background - color: # 029789;
颜色:# ffffff;
}
# t1 tr.alt td
{
颜色:# 000000;
background - color: # 94 ef9a;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;表id=皌1"祝辞
& lt; tr>
& lt; th>姓名& lt;/th>
& lt; th>性别& lt;/th>
& lt; th>爱好& lt;/th>
& lt;/tr>
& lt; tr>
& lt; td>张三& lt;/td>
& lt; td>男& lt;/td>
& lt; td>唱歌& lt;/td>
& lt;/tr>
& lt; tr类=癮lt"祝辞
& lt; td>李四& lt;/td>
& lt; td>女& lt;/td>
& lt; td>跳舞& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>王二& lt;/td>
& lt; td>男& lt;/td>
& lt; td>看书& lt;/td>
& lt;/tr>
& lt; tr类=癮lt"祝辞
& lt; td>赵五& lt;/td>
& lt; td>男& lt;/td>
& lt; td>爬山& lt;/td>
& lt;/tr>
& lt;/table>
& lt;/body>
& lt;/html>
这篇文章主要介绍使用css制作好看表格的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,本篇文章将要给大家详细介绍如何用css制作出好看又简洁的HTML表格。相信大家在接触过HTML相关知识后,或多或少都会自己写点小代码,写个小效果。就比表如表格,我们在浏览各个网站时,总能看到各种表格展示,有的就是传统的表格,毫无样式可言。有的则是有特色的展现表格。
对于新手小白来说,没有接触过css依然可以制作表格,只不过那样的表格,枯燥乏味。下面我给大家分享介绍一款用css样式制作的非常好看又简洁的表格。
<强> div + css制作好看的表格具体代码示例如下:
上述代码我们通过浏览器访问,效果如下图:
如图所示,相比较枯燥的黑白线条的表格是不是好看多了呢?又简洁又好看,每隔一行显示不同颜色背景,而且表边框是细线展示。可以让用户更直观的查阅表格中信息。想要达到这样的效果就离不开强大的css样式属性了。
这里我们在风格样式里可以发现一些重要的属性比如:
border-collapse:崩溃;这个属性表示的是可以把表格边框合并成为单一的边框。
background就是设置背景颜色的。
那么通过上述的介绍,大家对用css制作表格是否有更多的了解?这样就可以根据自我审美喜好,来设置不同效果的css表格样式。一张好看的表格不仅可以让用户喜欢,也可以让自己管理起来更加直观方便。
