网页设计表格单元格线条及边框设置

制作细线表格
如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000")，表格线其实是2px的，要做细线表格，有2种方法：
方法一
1、插入表格，参数设置如下图(边框：0 单元格填充：0 单元格间距：1 )：
2、选中表格，在属性面板中设置表格的背景颜色为黑色：
3、全选所有单元格（光标定位到第一个单元格里，按住Shift键单击最后一个单元格，）然后在属性面板中设置所有单元格的背景颜色为白色：
4、完成后效果如图：
当然，表格边框和单元格的颜色也可以设置为其他颜色，但是不能是同一种颜色。

方法二
1、插入表格，参数设置：边框：1
单元格填充：0
单元格间距：0
2、点击“窗口/ 标签检查器”，打开标签面板，设置“浏览器指定”：
Bordercolordark：白色（#FFFFFF）
Bordercolorlight:：黑色（#000000）
3、完成后如图：。

网页中细线表格的制作方法网页中细线表格的制作方法一．表格基础：<table>：表格的标识符，用来界定表格的范围。

<table>标签的属性：border：表格边框宽度所占的像素点数。

width和height：指定表格的大小。

“width”规定表格的宽度，“height”指定表格的高度。

align：表格和其相邻文字的位置。

参数值为left(居左)、center(居中)、和right(居右)。

cellspacing：指定表格各单元格之间的空隙。

cellpadding：指定单元格内容和单元格边界之间的空白距离的大小。

<TR>：行标签。

<TR>标签的属性:align：表示该行中各单元格内容是左对齐(left)、水平居中(center)和右对齐<right>的。

valign：表示该行中各单元格内容是紧靠上沿儿(top)、垂直居中(middle)和紧靠下沿儿的(bottom)。

..<TH>和<TD>:都是用来规定单元格内容的，<TH>规定表头元素的内容(表头元素一般位于每列的首行，用来说明该列的具体数据是关于哪个对象的)。

<TD>规定该单元格的内容。

<TH>和<TD>标签的任何属性及相应的属性功能是完全相同。

rowspan：表示该单元格所跨的行数。

colspan：表示该单元格所跨的列数。

align 、valign：用法同上。

指定单元格内容的位置。

二．用表格制作跨幅细线：有时候在网页排版时，我们需要一条细线，用图片似乎有点劳师动众了，其实，这个小问题用表格就能搞定。

制作过程：1、插入一个一行一列的表格。

2、将表格的“cellpadding”“cellspacing”都配置为“0”。

3、将单元格的“bgcolor”配置为“#000000”（当然您也能够配置为其他的颜色，主要取决于您需要什么颜色的细线）“height”配置为“1”。

第三章使用表格规划网页布局一、相关概念1、表格功能：显示数据，定位网页元素（布局）2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。

单元格中的内容和边框之间的距离叫边距cellpadding。

单元格和单元格之间的距离叫间距cellspacing。

表格的边线叫做边框border。

tr：代表一行。

td：代表一个单元格。

3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。

因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“&nbsp;”，用以撑起单元格的高度。

当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。

如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。

二、插入表格两种方法：①“插入”→“表格”命令②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。

1、宽度（百分比，像素）：相对显示，绝对显示2、边距/填充：文本内容与边框之间距离3、间距：单元格与单元格之间距离4、标题：设置表格标题位置【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下：5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。

插入嵌套表格的方法与插入表格的方法相同。

【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。

【思考】：利用嵌套表格留空白操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。

Dreamweaver表格边框设置的css语法Dreamweaver表格边框设置的css语法大全具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

1.上边框宽度语法:border-top-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否上边框宽度属性用于指定一个元素上边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在上边框、边框的宽度或边框的属性略写。

2.右边框宽度语法:border-right-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否右边框宽度属性用于指定元素的右边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在右边框、边框的宽度或边框的属性略写。

3.下边框宽度语法:border-bottom-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否下边框宽度属性用于指定元素的下边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。

也可以用在下边框、边框的宽度或边框的属性略写。

4.左边框宽度语法:border-left-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否左边框宽度属性用于指定元素的左边框的宽度。

值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

HTML给table添加单线边框⼀般来说，给表格加边框都会出现不同的问题，以下是给表格加边框后展现⽐较好的⽅式<style>table,table tr th, table tr td { border:1px solid #0094ff; }table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}</style><table><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></table>但是根据不同的需要有时候我们需要不同的样式，在这⾥我就影响表格边框的因素，做⼀些总结和分析⼀、 <table border="1"> 表格边框如图：，也就是border=1，意思就是给表格的每⼀格，及边框加上1像素的边框⼆、 <table border="1" cellspacing="0"> cellspacing单元格间距如图：这时表格⼤⼩为：200*118px三、<table border="1" cellspacing="0" cellpadding="0"> cellpadding单元格边距如图：这时表格⼤⼩为：200*110px四、去掉表格中table的所有属性值，当在css中给table设置{border: 1px solid #151515}如图：这个时候我们发现，css中的border其实就是给表格加了⼀个外边框⽽已五、border-collapse: collapse 边框合并，该属性设置表格的边框是否被合并为⼀个单⼀的边框，还是象在标准的 HTML 中那样分开显⽰这个时候如果我们只是想给表格整体加边框，并且不需要边距和间距，其实我们只需要这么写：<style>table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}</style><table border="1"><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></table>如图：（Google）（firefox）六、我们在上⾯的图中可以清晰看见，两个浏览器所解析边框不同。

浅谈网页布局中的表格与框架作者：徐景秀来源：《科技资讯》 2014年第18期徐景秀(鄂东职业技术学院湖北黄冈 438000)摘要:本文简要介绍了页面布局的一般设计原则、设计方法,并主要论述了表格及框架定位页面元素,进行网页布局的方法。

关键词:Dreamweaver 表格框架布局中图分类号:TP393 文献标识码:A 文章编号:1672-3791(2014)06(c)-0223-011 页面布局的一般设计原则和方法用户在浏览网页的时候问题容易被那些美观大方的网页所吸引。

页面的布局是网页制作成败的一个很重要的因素,因此用户在制作网页时要重视。

而页面布局的一般设计原则和方法如下。

(1)布局简洁大方清晰:这是Web网页设计的最重要的原则。

一般一个页面应有一个主体,可以是文字块或图像。

浏览者总是先看网页中大的和色彩鲜明的部分,然后才是通常的从左到右和从上到下的模式,不能给人的感觉是杂乱无章,眼花缭乱的感觉。

另外尽可能使任何信息都能在3次内点击找到。

每个页面显示一层信息,只显示用户当前选择的内容,其它内容可用链接提示。

(2)布局类型选择:布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

(3)布局平衡:所谓布局平衡是指以页面为中心,页面的上下左右在分量上应给人以匀称的感觉,不会让人感到页面的某些地方特别拥挤,而有些地方又特别空旷。

为了让页面达到左右平衡,应尽可能利用文本和图像的HTML对齐方式标识。

页面的上部应多留些空间,不要太拥挤,使用给每个页面加上页眉和页脚的方法来达到上下的平衡。

(4)布局风格一致:依据网页设计界面设计的风格原则,同一网页应用的每个页面应该拥有大体一致的页面布局,这样可以有效地使用户感受到页面谐调一致。

(5)布局文本、图片和多媒体方式:文本和图片是构成网页的两大元素,目前的技术可以让文本和图片摆放在页面的任何位置。

声音、动画、视频等可使更加页面丰富。

网页设计表格单元格线条及边框设置
【文章正文】
本文关键字：网页,表格,设置灵活的在网页设计中使用单元格线条及边框，可以大幅提高网页开发的效率，下面我们就来实际分析一下。

图1 网页中的单元格线条示范
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到标签中都有rules。

它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。

图2 表格中的边框示范
表格边框的显示与隐藏，是可以用frame参数来控制的。

请注意它只控制表格的边框图，而不影晌单元格。

只显示上边框＜table frame=above>
只显示下边框＜table frame=below>
只显示左、右边框＜table frame=vsides>
只显示上、下边框＜table frame=hsides>
只显示左边框＜table frame=lhs>
只显示右边框＜table frame=rhs>
不显示任何边框＜table frame=void>。