第1种对表格设置边框 效果
| 站名 | 网址 | 说明 |
| DIVCSS5 | www.divcss5.com | CSS学习 |
| CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码：
.table-a table{border:1px solid #F00}
对应html源代码：
<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>
第2种对表格设置边框 效果
| 站名 | 网址 | 说明 |
| DIVCSS5 | www.divcss5.com | CSS学习 |
| CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码：
.table-b table td{border:1px solid #F00}
对应HTML代码片段：
<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>
第3种对表格设置边框 效果
| 站名 | 网址 | 说明 |
| DIVCSS5 | www.divcss5.com | CSS学习 |
| CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码：
.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}
对应HTML源代码片段：
<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>
第4种对表格设置边框 效果
| 站名 | 网址 | 说明 |
| DIVCSS5 | www.divcss5.com | CSS学习 |
| CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码：
.table-d table{ background:#F00}
.table-d table td{ background:#FFF}
对应HTML代码片段：
<div class="table-d">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>
===========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=20 topmargin=20>
<TABLE width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"
style="border-collapse:collapse; ">
<TR bgcolor="#66FFCC">
<TD id="td1"> a <br/>ddd </TD>
<TD>张三</TD>
<TD>李四</TD>
<TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>数学</TD>
<TD>55</TD>
<TD>66</TD>
<TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>英语</TD>
<TD>99</TD>
<TD>68</TD>
<TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>语文</TD>
<TD>33</TD>
<TD>44</TD>
<TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
var tmp
if(x1>=x2)
{
tmp=x1;
x1=x2;
x2=tmp;
tmp=y1;
y1=y2;
y2=tmp;
}
for(var i=x1;i<=x2;i++)
{
x = i;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
a(x,y,color);
}
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>
相关推荐
你可以指定行数和列数来动态添加表格并且每个表格都有边框
我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。 有关表格边框的css...
js 特效 html 特效 流动边框效果的表格 js 特效 html 特效 流动边框效果的表格
流动边框效果的表格.rar流动边框效果的表格.rar流动边框效果的表格.rar流动边框效果的表格.rar流动边框效果的表格.rar流动边框效果的表格.rar
具有圆角边框和自定义边框效果的VC 漂亮窗体，纯VC 代码实现的哦，相信这种方法对你来说，是绝对值得参考的，学会这种方法，美化和自定义你的软件外观就不是什么难事了。
大多数朋友都会遇到给表格table设置边框的情况，但效果总是达不到预期，比如某几根线会因重复设置而加粗，破坏了整体效果。下面我给大家介绍两种设置单线边框的css样式： 第一种： 复制代码代码如下: table{ border...
个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。
在表格中可以单独定义左上边框的颜色，也可以定义单元格中右下边框的颜色，这两个位置的边框色我们称之为亮边框。 基本语法 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 文件范例：10-5....
2,可以设置背景色(包括固定好和表格内部背景色,非固定单元格背景只对新建单元格有效) 3,可以合并单元格(横向竖向均可合并,支持横竖同时合并单元格效果) 4,边框线宽度可以设置(外边框线,内边框线可以分开设置) 5,边框...
对于很多初学HTML的人来说，表格是最常用的标签了，但对于表格边框的控制，很多初学者却不甚其解。 一般我们用表格的时候总会给它个border属性，比如：，其效果如下： 对于很多初学HTML的人来说，表格是最常用的...
HTML5漂亮的立体表格特效，CSS3制作的圆角立体边框表格效果(通过css3设置圆角绘边框)。没有使用图片，但阴影效果很漂亮，看上去过滤很平滑，不过在打开网页的时候，似乎渲染的时间比较长。
方法一：恰当的设置表格的列宽往往能给表格的美观性带来较好的效果。一种简单的方法是：调用表头的setSectionResizeMode()方法，代码如下：参数QH
很方便的，你注意你的表格的边框了吗？它们达到一般网页的效果嘛，看看这个，希望你有所收获.
找一个虽然不是很好看，但设置起来比较复杂的吧：彩色底纹－强调文字颜色6 Word中的效果如图示： 【样式分析】： Word中设置表格格式，主要是设置边框和底纹，可选定整个表格或者部分单元格右击→表格属性→边框和...
用JavaScript控制表格边框不停的变换颜色,记得以前经常看到这种效果,代码也不复杂,直接复制就可用啦! 可自定义颜色，有需要的小伙伴可以参考下。
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己...
鼠标拖动表格边框，改变表格宽度。在IE,火狐中效果一样。
大家经常会发现Table的BORDER设置为1，得到的边框却不是想要的1个像素的细边框，于是很多人去想方设法做出细边框的效果。