使用CSS改变表格边框样式

css

用CSS改变表格边框样式,很实用的一种方法。

制作方法:
将下面的代码复制到<body>~</body>里,此为隐藏下边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom-width: 0" bordercolor="#111111" width="90">
<tr align="center">
<td style="border-bottom-style: none; border-bottom-width: medium" height="25">隐藏下边</td>
</tr>
</table>

将下面的代码复制到<body>~</body>里,此为隐藏上边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top-width: 0" bordercolor="#111111" width="90">
<tr align="center">
<td height="25" style="border-top-style: none; border-top-width: medium">隐藏上边框</td>
</tr>
</table>

将下面的代码复制到<body>~</body>里,此为隐藏左边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-left-width: 0" bordercolor="#111111" width="90">
<tr align="center">
<td style="border-left-style: none; border-left-width: medium" height="25">隐藏左边框
</td>
</tr>
</table>

将下面的代码复制到<body>~</body>里,此为隐藏右边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-right-width: 0" bordercolor="#111111" width="90">
<tr align="center">
<td style="border-right-style: none; border-right-width: medium" height="25">隐藏右边框
</td>
</tr>
</table>

至此你就可以完成这个实例了,你可以自己试试!有什么不明白的地方可以问我!。

时间: 2024-12-21 20:54:33

使用CSS改变表格边框样式的相关文章

使用CSS处理表格边框样式化

css 在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据. 显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用CSS对表格边框进行样式化的方法. 链接 CSS2表格模型是基于HTML 4.01表格模型的.表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:表格.锚.数据行.数据行组.数据列.数据列组和单元格.这篇文章将集中讲解表格中各个元素的边框处理方法. 边框 根据不同的

JS动态改变表格边框宽度的方法

 本文实例讲述了JS动态改变表格边框宽度的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <script> function changeBorder() { document.getElementById('

用CSS设置表格边框的语法详解

css|详解|语法      我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin

CSS有关表格边框的语法汇总

css|语法 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | mediu

修饰之美:CSS在表格边框上的美学应用

css 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium |

CSS在表格边框上的美学应用

怎样用css美化表格的边框.   有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 上边框宽度属性用于指定一个元素上边框的宽度.值可以是三个关键字其中的一个,

HTML表格边框样式属性FRAME

  使用FRAME属性可以控制表格边框的样式类型. 基本语法 <TABLEFrame="value"> 语法解释 VALUE的取值如下表所示: 表格的边框样式 属性值描述 Above显示上边框 Below显示下边框 Border显示上下左右边框 Box显示上下左右边框 Hsides显示上下边框 Lhs显示左边框 Rhs显示右边框 Void不显示边框 Vsides显示左右边框 文件范例:10-12.htm 设定表格的边框样式. 01<!-----------------

关于CSS控制表格文字样式的研究

即使在DIV满天飞的今天,Table在网页的布局中还是少不了的,因为当需要输出数据时,Table布局远远比DIV布局有优势,而且同样的我们可以通过CSS来控制表格样式.要知道WEB标准并非是通篇的DIV+CSS,而是倡导采用更合理的语义标签来进行布局. 文字的对齐方式一直是排版的重中之重,特别是对于数据显示来说,如何才能让众多的数据的可读性更强可识别性更高呢? 先来看表格一的文字对齐,这无疑是最失败的对齐方式.表格标题<th />标签内容默认是居中对齐的,可是当把<td />标签的

JavaScript+CSS实现表格动态样式

效果如图: 实现代码: <style> table.formdata/*表格样式*/ { border:1px solid #5F6F7E; border-collapse:collapse;/*表格相邻边被合并 */ font-family:微软雅黑; font-size:10px; padding:2px; } </style> <script type="text/javascript"> function hilite(obj) { //选择