表格设置边框效果

原创

mb64fdc65e96051 2023-09-20 10:13:10 博主文章分类：前台 ©著作权

文章标签 大数据 javascript ViewUI CSS css 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者mb64fdc65e96051的原创作品，请联系作者获取转载授权，否则将追究法律责任

第1种对表格设置边框效果

站名	网址	说明
DIVCSS5	www.divcss5.com	CSS学习
CSS5	www.css5.com.cn	CSS切图

对应CSS代码：

.table-a table{border:1px solid #F00}

对应html源代码：

<div >
<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 >
<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 >
<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 >
<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>