本篇文章将要给大家详细介绍如何用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表格样式。一张好看的表格不仅可以让用户喜欢，也可以让自己管理起来更加直观方便。
本篇文章具有一定的参考价值，希望对有需要的朋友有所帮助！
以上是怎么用css制作好看的表格？【示例】的详细内容。更多信息请关注PHP中文网其他相关文章！
通过Astro Action和Fuse.js为搜索提供动力Apr 22, 2025 am 11:41 AM对于Astro，我们可以在构建过程中生成大部分网站，但是有一小部分服务器端代码可以使用Fuse.js之类的搜索功能来处理搜索功能。在此演示中，我们将使用保险丝搜索一组个人“书签”
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
Atom编辑器mac版下载
最流行的的开源编辑器
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
