网页设计table表格知识Word文档下载推荐.docx
- 文档编号:17906389
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:76
- 大小:614.55KB
网页设计table表格知识Word文档下载推荐.docx
《网页设计table表格知识Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网页设计table表格知识Word文档下载推荐.docx(76页珍藏版)》请在冰豆网上搜索。
或者是16种已定义好的颜色名称,参见文本颜色,单元格边框的颜色属性与表格的相同,但只适用于IE。
下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格,其中第一个单元格的宽为200,高为80,第二个单元格的边框颜色为“0000FF”。
代码如下:
<tableborder="
4"
width="
300"
height="
80"
bordercolor="
#FF0000"
>
<tr>
<tdwidth="
200"
>
</td>
<tdbordercolor="
#0000FF"
</tr>
</table>
2、表格的水平摆放位置
表格的水平摆放位置是用align="
属性说明的,#为left(左对齐),right(右对齐),center(居中)。
分别见下例,注意这三个表格与边界的位置关系:
左对齐
center
右对齐
第三个表格的代码如下:
<tablewidth="
border="
1"
align="
right"
30"
<td>右对齐</td>
</table>
3、单元格里内容的位置属性
水平对齐方式,用align="
属性说明,#为left(左对齐),right(右对齐),center(居中);
垂直对齐方式,用valign="
属性说明,#为top(上对齐),bottom(下对齐),middle(居中)。
分别见下例,注意单元格里的内容与边框的的位置关系:
水平对齐方式:
内容左对齐
内容居中
内容右对齐
450"
<tr>
150"
<divalign="
left"
>内容左对齐</div>
center"
>内容居中</div>
<td>
>内容右对齐</div>
垂直对齐方式
内容上对齐
内容下对齐
<tdheight="
40"
146"
valign="
top"
>内容上对齐</td>
middle"
>内容居中</td>
bottom"
>内容下对齐</td>
4、表格的背景色、背景图片,单元格的背景色、背景图片
背景色属性:
bgcolor="
,背景图片属性:
background="
。
见下例:
bgcolor="
#539996"
#FFFFFF"
90"
<td>
<tdbackground="
Back01.gif"
<tdbgcolor="
说明:
在上例中,整个表格的背景色是bgcolor="
,第一行第二列的单元格背景图片是background="
,第三行第二列的单元格背景色是bgcolor="
根据显示结果可以看出:
设置表格的背景色后再设置单元格的背景色或背景图片,将优先显示单元格的属性。
5、表格属性cellspacing、cellpadding
5、表格属性cellspacing、cellpadding
cellspacing属性用来指定表格各单元格之间的空隙。
此属性的参数值是数字,表示单元格间隙所占的像素点数。
我们来看下面的两个表格:
上面第一个表格的单元格之间没有空白距离,而第二个的单元格之间有很大的空白距离,我们来比较一下他们的源代码:
第一个表格的代码:
cellspacing="
0"
#000000"
第二个表格的代码:
8"
比较代码,上边两个表格中只有cellspacing的设置不同,一个为“0”,一个为“8”,显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便,将表格边框设为“1”,所以单元格的真实距离是“2”,若将表格边框设为“0”,则单元格 的距离就是0了,第二个单元格同理),第二个表格的每个单元格之间的距离为8。
cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。
此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。
我们先来看看这个例子:
我们来看下面两个表格:
网页教学网
第一个表格单元格的内容与单元格边界之间没有空白距离,而第二个表格单元格的内容与单元格边界之间有空白距离,我们来比较一下他们的源代码:
240"
cellpadding="
0"
120"
>网页陶吧</td>
15"
两个表格只有红色部分代码不同。
第一个表格中"
网页陶吧"
这几个字离它所在的单元格为0,那是因为设置了cellpadding="
的原因.第一个表格中的"
这几个字离它所在的单元格比较远,那是因为cellpadding="
也就是说"
离它所在的单元格的边界的距离为20像素。
简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。
我们在以后的篇幅中会大量用到这两个属性,所以请大家不要弄混乱了,为了形象的理解,请参考下图:
表格(table)制作网页详细介绍
2005-03-0908:
51
表格最基本也最常用的属性,要用好表格,就必须熟悉和掌握这些最基本的属性。
在对这些基本的属性有了一定的了解之后,我们再来看看表格的其他几个似乎并不常用的属性,以便对表格有一个整体的认识。
事实上,即使不了解下面所讲的内容,多数情况下也不会影响你对表格的使用,所以我们只是简略的带过。
1、拆分表格
colspan表示该一储存格向右打通的栏数。
rowspan表示该一储存格向下打通的栏数。
看下面的表格:
第一行第一栏
第一行的第二、三栏
第二行及第三行的第一栏
第二行第二栏
第二行第三栏
第三行第二栏
第三行第三栏
表格代码:
2"
#009900"
<td>第一行第一栏</td>
<tdcolspan="
>第一行的第二、三栏</td>
<tdrowspan="
>第二行及第三行的第一栏</td>
<td>第二行第二栏</td>
<td>第二行第三栏</td>
<td>第三行第二栏</td>
<td>第三行第三栏</td>
你可能看的不大明白。
如果借助于Dreamweaver来再现表格制作过程,相信你会很快明白其中的奥秘。
先制作一个三行三列的表格(这可以说是上面表格的“原形”),见下图,然后将第一行的第二、三栏合并,第二行的第一栏、第三行第一栏合并,这样就得到了上例中的表格。
你可以自己动手检验一下。
第一行第二栏
第一行第三栏
第二行第一栏
第三行第一栏
熟练掌握表格的colspan、rowspan属性,可以随心所欲的制作出复杂的表格。
2、表格中的标题列
<CAPTION>的作用是为表格标示一个标题列,如同在表格上方加一没有格线的打通列,通常用来存放表格标题,参数有align、valign。
align表示表格标题列相对于表格的对齐方式(水平),可选值为:
left,center,right,top,middle,bottom,若align="
的话标题列便会出现在表格的下方,不管你的原代码是把<caption>放在<table>中的头部或尾部。
valign表示表格标题列相对于表格的对齐方式(上下),可选值为:
top,bottom。
见下例:
网页陶吧访问统计
Month
%ofIEvisitor
%ofNCvisitor
August
91%
9%
400"
<caption><fontcolor="
><b>网页陶吧访问统计</b></font></caption>
<tralign="
CENTER"
>
<th>Month</th>
<th>%ofIEvisitor</th>
<th>%ofNCvisitor</th>
<td>August</td>
<td>91%</td>
<td>9%</td>
3、行组(IE有效)
每个表格可以有一个表头、一个表尾和一个或多个表体,分别以THEAD、TFOOT和TBODY元素表示。
通常,文档中它们的次序首先是THEAD,然后是TFOOT,然后是不同数目的TBODY。
<thead>...</thead>-表的题头
<tbody>...</tbody>-表的正文
<tfoot>...</tfoot>-表的脚注
Food
Drink
Sweet
A
B
C
D
E
F
<tableborderwidth="
<thead>
<td>Food</td>
<td>Drink</td>
<td>Sweet</td></tr>
</thead>
<tbody>
<tfoot><tr>
<td>A</td>
<td>B</td>
<td>C</td></tr></tfoot>
<td>D</td>
<td>E</td>
<td>F</td><tr>
</tbody>
4、列组(IE有效)
<colgroupalign=#>#=left,right,center
<tableborderwidth=160>
<colgroupalign=left><colgroupalign=center><colgroupalign=right><thead>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</thead><tbody>
<td>C</td>
<td>F</td>
</table>
5、列的属性控制
<COL>定义一个列组中的列,以便对它们能够同时设置有关属性
<colspan=#>#=从左数起,具有指定属性的列的列数
<colalign=#>#=left,right,center
<colgroup><colalign=centerspan=2><colgroupalign=right><thead>
以上内容考虑到实用性,没有展开讨论。
在网页上制作精美的“立体表格”
2005-03-1409:
48
表格是网页内应用较多的东东,但一般我们只是用它来定位网页中的模块和排版文字。
其实表格用好了还可以做出很多漂亮的效果,如图一,承载文字的表格有一种看似立体的感觉。
下面就来介绍一下这种立体表格的制作方法。
图一
表格有立体的感觉的全是因为在表格的右边和下边有浅黑色的阴影。
所以我们只要实现了阴影就可以实现这种效果。
现在我们就开始具体讲述制作过程。
在Frontpage2000中新建一个表格,选择菜单“表格”-“属性”-“表格”,在窗口内将表格的宽度设置为150象素;
高度设置为200象素;
边框粗细设置为0;
将单元格边距设置为0,而单元格间距为1,如图二所示。
图二
完成以上设置后将表格的背景色设置为黑色,但表格内的单元格的背景色设置为白色,完成以后就回出现如图三所示的单象素黑色边框效果。
图三
接下来的工作就是要为右边和下边的黑色边框制作阴影,我们使用CSS样式的功能来实现。
在图二所示的选项窗口内点击“样式”按钮继续选择“格式”-“边框”。
在边框与阴影选项框内,分别将样式选择为“实线”;
颜色选择为“灰色”;
并在预览选项内将下边和右边的边框应用按钮选中,如图四所示。
图四
点击“预览”,你要的立体表格效果就出来了。
(注明:
我们在制作出来的最终效果可能和图一所示略有出入,这是因为我们首先制作出了如图三的单象素黑色边框,这样做的效果会更明显,更有立体感。
)
在这里我们还给出在Dreamweaver内定义的样式代码,因为Frontpage和Dreamweaver的代码机制有差别,相对之下Dreamweaver对样式代码写得更规范更合理。
表格代码如下:
<
TABLEwidth="
style="
border-right-width:
2px;
border-bottom-width:
border-right-style:
solid;
border-bottom-style:
border-right-color:
#a7a7a7;
border-bottom-color:
"
>
其中style以后的为样式代码“border-right-width”和“border-bottom-width”以后的2px代表阴影边框的宽度为2象素,border-right-color和border-bottom-color以后的#a7a7a7代表阴影线框的颜色代码,你也可以使用其他的颜色代码替换(具体请参照HTML颜色表)。
试着自己改变一下,根据你的需要制作效果。
用表格巧妙制作导航条按钮
49
天极设计在线
看到上面的导航条了吗?
你可以点击一下看看它的效果,请注意,这可是用表格做出来的,你相信吗?
其实代码很简单,现在让我们来看看该怎么做。
1.首先创建一个1x6的表格,参数为:
border=0cellspacing=3cellpadding=0;
2.在这个表格的每个单元格内分别插入一个表格,宽度和高度设为100%;
3.建立一个css样式.up和.down;
代码如下:
style>
.up{
border:
4outsetroyalblue;
color:
yellow;
background:
blue;
cursor:
hand
}
.down{
4insetroyalblue;
#33ff33;
/style>
4.对插入的表格调用样式和行为,代码如下:
class=uponMouseDown="
className='
down'
onMouseUp="
up'
onMouseOut="
onclick=window.open("
button.htm"
"
_blank"
注意:
链接请用onclick,不要用href,因为后者访问后有虚线框,不美观。
现在存盘看看效果吧!
表格使用的常见问题及解决方法
2005-03-0907:
37
初学者在使用表格时,可能会遇到各种问题,由于对标记还不是很熟悉,所以往往对这些问题感到莫名其妙,一筹莫展。
有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。
所以在这里,我们列出了表格使用过程中最常见的问题来加以分析,希望能给大家带来帮助
1.表格的变形问题
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况,这也是最另人恼火的事,怎么办呢?
秋实曾在天极网页陶吧撰文详细的阐述过这个问题,我们来看看他是怎么解决的。
A、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是:
1、在800*600的分辨率下时,一切正常,而到了1024*800时,则多个表格或者有的居中,有的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 table 表格 知识
![提示](https://static.bdocx.com/images/bang_tan.gif)