Html+CSS完成表格

最近在学习HTML、CSS在学习表格<table>标签时，发现HTML标签本身并不能修饰好看的表格，这时候需要CSS上场了，此处为内嵌CSS，CSS代码需要写在<style type="text/css">...</style>之间，table为类选择器，满足所有与table有关的标签。没有采用CSS之前如图，可以发现很丑

[html]view plaincopy
>
<html>
<head>
<title>table</title>
<styletype="text/css">
</style>
</head>
<body>
<tableborder="1">
<caption>纵向表格</caption><!--标题-->
<tr>
<td>姓名</td>
<td>小丽</td>
</tr>
<tr>
<td>电话</td>
<td>123</td>
</tr>
<tr>
<td>性别</td>
<td>Ů</td>
</tr>
<tableborder="1">
<caption>横向表格</caption><!--标题-->
<tr>
<td>姓名</td>
<td>电话</td>
<td>性别</td>
</tr>
<tr>
<td>小丽</td>
<td>123</td>
<td>Ů</td>
</tr>
</table>
</body>
</html>

最后结果，整个表格都好看起来

总结：1.当table表格的标记描述border值大于0时，显示边框，如果border值为0，则不显示边框。

若是只想将表格边框进行修饰。CSS3可以采用border-collapse属性，语法格式：

[html]view plaincopy

其中separate是默认值，表示边框会分开，不会忽略border-spacing和empty-cells属性，而collapse表示边框会合并为一个单一的边框。

文章来源: Html+CSS完成表格

标签

html表格

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!