怎么用CSS做表格

发布网友发布时间：2022-04-22 06:43

共3个回答

懂视网时间：2022-04-06 14:57

本篇文章将要给大家详细介绍如何用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: #0297;
  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表格样式。一张好看的表格不仅可以让用户喜欢，也可以让自己管理起来更加直观方便。

本篇文章具有一定的参考价值，希望对有需要的朋友有所帮助！

热心网友时间：2022-04-06 12:05

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table { border:#30C 1px;border-style: solid;height:30px; margin-top:-1px}
</style>
</head>

<body>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>

</body>
</html>

热心网友时间：2022-04-06 13:23

表格的话··还是用table吧！很稳定

全部栏目

怎么用CSS做表格