用HTML做表格简直太轻松了,看一遍例题就会了,做细线表格也不难,用DW顶多修改几个值就可以了,但是总是用鼠标点来点去,不免
会想:有满意用一行代码就解决这个问题呢?于是问老师,答案是肯定有的,就是用CSS可以完成这个作业
那CSS是什么呢?CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
我也是刚刚学习CSS,对于CSS的语法格式、选择器的类别,以及样式分类不做赘述,只把语法贴出来与新手们共享,以三行三列为例:
<html>
<head>
<title>CSS制作细线表格</title>
<style>
table,td{border:#0000FF; border-collapse:collapse}
</style>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
会想:有满意用一行代码就解决这个问题呢?于是问老师,答案是肯定有的,就是用CSS可以完成这个作业
那CSS是什么呢?CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
我也是刚刚学习CSS,对于CSS的语法格式、选择器的类别,以及样式分类不做赘述,只把语法贴出来与新手们共享,以三行三列为例:
<html>
<head>
<title>CSS制作细线表格</title>
<style>
table,td{border:#0000FF; border-collapse:collapse}
</style>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
细线表格做完了,还有个例题也拿出来跟大家分享,就是用CSS做虚线表格,还是以三行三列为例,我只把CSS样式写出来,如果建表,我就不多说了,怕说多了,被仍板砖
<style>
table,td{border:#0000FF dotted 1px;
border-collapse:collapse}
<style>
table,td{border:#0000FF dotted 1px;
border-collapse:collapse}
</style>
border-collapse:collapse写不写看要求,加上后,虚线表格会看起来更直观一些。
border-collapse:collapse写不写看要求,加上后,虚线表格会看起来更直观一些。
本文转自 小孙村长 51CTO博客,原文链接:http://blog.51cto.com/xiaosuncunzhang/143395,如需转载请自行联系原作者