第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>
相关推荐
同样,通过设置`border`属性为'1'来显示表格边框。 至于“autoAdapterTable”这个文件名,可能是指一个自动适配的表格实现,它可能包含了自适应屏幕大小的逻辑,或者能够根据数据源自动调整表格的行数和列数。这样...
### 表格边框合并属性详解 在网页设计与开发中,表格的呈现方式对于页面的整体视觉效果至关重要。其中,“设置表格的边框是否被合并为一个单一的边框”是一个重要的样式控制手段,它主要涉及到CSS中的`border-...
本教程将详细讲解如何设置...总结起来,HTML表格边框的设置涉及到多个CSS属性,包括边框宽度、样式、颜色、合并、单元格边框以及响应式设计等方面。掌握这些知识点,就能灵活地定制表格的外观,满足网页设计的需求。
1. **单独设置外部边框**:在“边框和底纹”对话框中,可以单独选择“上边框”、“下边框”、“左边框”和“右边框”,并为这些边框设置加粗效果。这样设置后,内部边框将保持不变。 2. **利用“表格样式”功能**...
在探讨表格边框样式的全览时,我们深入解析了HTML和CSS中各种边框属性的应用,这不仅包括基本的实线、虚线和点线,还有更复杂的样式如沟槽(groove)、脊状(ridge)、内嵌(inset)和外凸(outset)。以下是对这些...
本文将详细介绍三种让表格边框变细的方法,帮助你轻松调整表格样式,提升文档的整体视觉效果。 ### 方法一:使用CSS样式 在HTML或网页编辑器中,可以利用CSS(Cascading Style Sheets)来定制表格边框。首先,你...
1. **边框宽度**:在易语言中,可以设置表格边框的宽度,这通常涉及到设置表格控件的边框样式和宽度属性。通过修改这些属性值,你可以让边框变得更粗或更细,以适应不同的界面设计需求。 2. **边框颜色**:改变边框...
手动设置Excel表格边框和底纹可以使电子表格更加美观和可读性强,提高工作效率和效果。通过本教程,用户可以轻松地学习手动设置Excel表格边框和底纹的技术,提高自己的电子表格处理能力。 补充说明: * 在设置边框...
本文将深入探讨如何自定义表格边框,包括设置线条样式、颜色、宽度以及应用条件格式等方法。 一、线条样式与边框类型 自定义表格边框时,首先可以调整线条的样式。线条样式包括实线、虚线、点线、双线等,这些样式...
你可以通过预览窗口查看每种边框效果。 在边框类型中,你可以选择顶部、底部、左侧、右侧的边框,或者选择“所有边框”一次性添加四周的边框。如果需要内边框,可以选择“内部边框”。此外,还可以通过“边框样式”...
- `border-color`:设置表格边框的颜色,同样可以接受1到4个颜色值,分别应用于各边框。 3. **边框样式**: - `border-style`:定义边框的显示样式,如`none`(无边框)、`dotted`(点线)、`dashed`(虚线)、`...
在调整表格边框样式时,我们可能需要设置WS_BORDER、WS_THICKFRAME等样式,甚至可能涉及到自绘边框,以实现更复杂的效果。 在易语言中,调用API函数需要使用其提供的“API调用”模块。首先,需要声明API函数,明确...
### Word2021中如何设置表格边框 在Word2021中,设置表格边框是一项常用的功能,尤其对于需要美化文档或强调特定信息的用户来说尤为重要。本文将详细介绍如何在Word2021中设置表格边框,包括各种边框样式的设置方法...
### Word2021中表格边框与底纹设置详解 #### 一、引言 在Word2021中,表格是文档编辑过程中不可或缺的一部分,它能够帮助我们清晰地组织和展示数据。为了使表格更加美观且符合文档的整体风格,Word提供了丰富的表格...
与第一个示例相比,这里的表格边框宽度设置为1像素(`border="1"`), 并且使用`bordercolorlight`和`bordercolordark`属性设置了边框的颜色,从而实现了细边框的效果。这里,`bordercolorlight`设置为黑色(`#000000`...
在网页设计中,让表格边框呈现出圆角效果可以增加界面的美观度和用户体验。"使表格边框变圆角的技术"主要涉及到HTML、CSS以及JavaScript的运用,尤其是在不支持CSS3的老版本浏览器中,可能需要借助JavaScript库来...
【CSS去除表格内边框】 ...当需要去除表格内边框以实现更精细的设计时,CSS提供了解决方案。下面是一系列关于如何使用CSS去除或调整表格...无论是去除内边框还是创建复杂的边框效果,CSS都提供了足够的灵活性和可能性。
在WPS文字中,表格边框的设置是一个重要的功能,它可以帮助用户更加清晰地呈现数据,提高文档的可读性和专业性。以下是一份详细的操作指南,教你如何在WPS文字中设置表格边框。 首先,打开你的WPS文字文档,找到你...