css优化表格制作
发布网友
发布时间：2022-04-22 06:43
共5个回答
热心网友
时间：2022-04-21 21:47
你的问题表述不是很清楚，我理解的意思是，将所有Table样式全部写到层叠样式表中，这样结构与表现分离，达到良好的效果；
例子（部分代码）：
HTML文本：
"
<table class="font-all" >
<thead>热门标签</thead>
<tbody>
<tr position="firstline"><td colspan=6></td></tr>
<tr><td>流体</td><td>物理</td><td>光学</td><td>博士</td><td>硕士</td><td>诗歌</td></tr>
<tr><td>文学信息</td><td>科学院士</td><td>前辈</td></tr>
</tbody>
</table> "
CSS代码：
"
<style type="text/css">
table{margin-top:5px;width:600px;border-collapse:separate;border-spacing:1px;background-color:white;empty-cells:hidden}
thead{height:30px;font-weight:bold;color:#555;font-family:微软雅黑}
tr[position=firstline]>td{background-color:#dedede;height:12px;}
td{background-color:#f3f3fd;padding:5px 10px;}
td:hover{background-color:#ededed}
</style> "
热心网友
时间：2022-04-21 23:05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.tr_1 {
background:red;
}
.tr_2 {
background:green;
}
.tr_3 {
background:blue;
}
.tr_4 {
background:aqua;
}
.td_1 {
color:#009900;
}
.td_2 {
color:#fff;
}
.td_3 {
color:red;
background:maroon;
}
</style>
</head>
<body>
<table>
<tr class="tr_1">
<td class="td_1">测试测试测试测试</td>
<td>测试测试测试测试</td>
<td>测试测试测试测试</td>
</tr>
<tr class="tr_2">
<td>测试测试测试测试</td>
<td>测试测试测试测试</td>
<td>测试测试测试测试</td>
</tr>
<tr class="tr_3">
<td class="td_2">测试测试测试测试</td>
<td>测试测试测试测试</td>
<td>测试测试测试测试</td>
</tr>
<tr class="tr_4">
<td>测试测试测试测试</td>
<td class="td_3">测试测试测试测试</td>
<td>测试测试测试测试</td>
</tr>
</table>
</body>
</html>追问书面怎么表达的呀，我初学不怎么懂。
追答给表格不同的行，不同的列 都设定一个 class 或者 id
热心网友
时间：2022-04-22 00:39
表格的长和宽基本上很难收到css的约束， 所以不太好搞，其他方面比如字体，颜色，边框之类的基本上和div是一样的，话说回来，既然想用css，那么div+css是很好的框架，bi表格要好，个人见解。追问怎么用CSS去实践呀，我初学不怎么懂。
追答楼下的例子很好 我觉得你应该是不太懂CSS 而不是表格的CSS优化 那就要自己多学习了
热心网友
时间：2022-04-22 02:31
只不过目前第二种方法还没有普及,而且对于习惯使用表格布局的人来说,一开始学习也比较难上手,尤其是定位问题.不过这是web的发展趋势,如果您是一位网页制作
热心网友
时间：2022-04-22 04:39
学习一下css教程
