返回列表 发帖

<MARQUEE direction=up width=400 bgColor=#ffffff height=300>
<MARQUEE width="100%" height=35><FONT style="FONT-SIZE: 40px; COLOR: #ff0000">让大家都会用代码</FONT></MARQUEE></MARQUEE>

 

让大家都会用代码

TOP

图片的基本格式

1、 HTML的一般图片格式(不改变大小)

 代码:<IMG SRC=图片网址>

举例:代码:
<p align=center><IMG SRC=图片地址></p>

显示效果(保持原图一样):

 

 

补充术语解释:
代码:
<p  align=center>图片网址</p>:表示图片居中。

2、 有缩小和放大功能的图片格式


代码:
<IMG height=高度 src=图片网址 width=宽度 ;>

1)缩小图片

代码:
<IMG height=100 src=图片地址 ;>   

显示效果:

 

 

2)放大图片

代码:
<IMG height=250 src=图片地址 ;>

显示效果:

 

<IMG> 的一般参数设定:

  例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,

width=100 height=100
设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小,以免失真,若需要改图片大小最好使用图像编辑工具。(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)

hspace=5 vspace=5
设定图片边沿空白,以免文字或其它图片贴近。hspace 是设定图片左右的空间,vspace 是设定图片上下的空间,高度采用 pixels 作单位。

border=2
图片边框厚度

align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。

alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字 将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。

lowsrc="pre_logo.gif"
设定先显示低解析度的图片,若加入的是一张很大的图片,下载要很长的时间,这张低解析度的图片会先被显示以免浏览者失去兴趣,通常是原图的黑白版本。

 例如

<IMG height=150 alt="Logo of PenPals Garden" hspace=5 src=图片地址 width=150 align=top lowsrc=pre_logo.gif vspace=5 border=8>

Logo of PenPals Garden

 

[ 本帖最后由 wzyh 于 2007-12-20 21:44 编辑 ]

TOP

代码:

<DIV style="LEFT: 80px; OVERFLOW: hidden; WIDTH: 350px; POSITION: relative; TOP: 0px; HEIGHT: 270px">
<DIV style="LEFT: -50px; POSITION: absolute; TOP: -130px">
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=499>
<MARQUEE scrollAmount=1 behavior=alternate width="100%"><IMG src=http://bbs.muwen.com/fileuploaddir/4B398344013.jpg></MARQUEE></MARQUEE></DIV></DIV></DIV>

 

TOP

代码

<MARQUEE scrollAmount=3 direction=right width=400 height=234>
<MARQUEE scrollAmount=3 width=280 height=234>
<DIV align=center><IMG src="
http://bbs.muwen.com/fileuploaddir/4B398344013.jpg"> </DIV></MARQUEE></MARQUEE>

 

 

TOP

<MARQUEE scrollAmount=2 direction=up behavior=alternate height=250>
<MARQUEE scrollAmount=2 direction=up height=234>
<DIV align=center><IMG src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg"></DIV></MARQUEE></MARQUEE>

 

TOP

<p align=center>
<TABLE height=462 width=560 background=http://www.webvip.cn/photo2/m/027/011/0270110015.jpg>
<TBODY>
<TR>
<TD>
<CENTER>
<MARQUEE scrollAmount=3 scrollDelay=100 direction=down behavior=slide width=524 height=388>
<MARQUEE scrollAmount=3 direction=up width=480 height=388>
<p align=center><IMG src="http://pop.pcpop.com/upimg2/2004/3/18/1298033307.jpg"></P></MARQUEE>
<CENTER></CENTER></CENTER></TD></TR></TBODY>
<p></P></P>

TOP

一.表格初步

    表格是在论坛做帖的重要武器。这原因是,论坛里提供给用户操作的区域是非常有限的,用户只能在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。

    把表格称作容器缘于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,我们对表格的理解和运用可能会增加一些概念,但并非复杂,在学习本教程的过程中,通过领会和实践,相信是很容易掌握的。

    表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。

    现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架,为了能够一目了然,各元素尚未引入它们的属性:

<table>
  <tbody>
    <tr>
       <td>内容</td>
    </tr>
  </tbody>
</table>

    说明:

    <table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>

    <tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

    <tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>

    <td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

    </td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。

    从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。

二.表格属性设置

    本节所指的表格属性设置其概念等同于在本论坛"即见即所得"编辑器的表格属性设置,在“即见即所得”模式下,通过点击位于工具栏上的图标,可以方便地设置表格的属性,只是,它没有通过代码设置来的的灵活多变。

    我们先看看<table>标签里都有哪些需要设置的属性。

    border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

    cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

    cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。

    width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。

    height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。

    bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。

    background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

    bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。

    bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

    bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

    align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。

    表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。

    下面给出一个表格式样和代码,表格中有一些简单的说明。

本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#ff0000
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center

注:其他属性未设置。

代码:

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
  <tbody>
    <tr>
      <td>表格里的内容写在这里面</td>
    </tr>
  </tbody>
</table>

三.单元格属性设置

    在上一节对表格属性设置的介绍中,我们提到,有一些属于表格的属性单元格也有,比如,背景色、宽度和高度等等。本节我们学习单元格的属性设置,但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。

    从表格的整体外观上看,单元格是表格的基本构成单元,一张表格至少要有一个单元格。单元格由<tr><td></td></tr>共同组成,但在一组tr里,可以拥有多组td,我们前面说过,有多少组td该表格就有多少列;同样,一张表格可以拥有多组tr,表格有多少组tr就有多少行。显而易见,构成表格最小单元的td,它的属性设置是不可忽视的。

    单元格的属性设置主要体现在<td>里,除了我们在上一节学到的bgcolor等之外,还有许多属性需要掌握,令人高兴的是,很多属性的设置方法都是和<table>属性设置一样的,如width、height、bordercolor等。关于width,我们在此着重讨论一下。好的习惯是,如果是一个单元格的表格,假设我们在<table>里设置了其宽度,那么,就不必再设置<td>的宽度了,因为这是多余的,且这么设置:<td width="100%">,显然只是增加了帖子的代码量,它没有任何作用——当有了表格宽度,单元格的宽度会自动占满表格的宽度。但是,在多列表格里,<td>的宽度就应该设置,如若不设置,系统会自动按各单元格里的内容的占位情况自行分配宽度,效果是可想而知的。

    单元格的bordercolor设置有些讲究,主要用于实现单像素的表格边框——要实现这种效果,要求表格的border为1,且<table>里设置了bordercolor颜色值,cellpadding和cellspacing都设置为0,然后将<td>的bordercolor颜色值设置为与<td>的背景色相一致。

    单元格的最为重要的属性应该为align和valign,align规范单元格里的内容的水平对齐方式,valign则规定垂直方向的对齐方式——请特别注意:它们规定的对齐方式是单元格里面的内容,而不象表格里的align那样定义自身的位置!align取值方法和前面介绍的一样,valign的取值方法主要有:left(左对齐)、middle(居中)、top(靠顶)、bottom(靠底)等。

TOP

四.表格组合

    表格组合不是一个轻而易举的技术,所以,我们极少见到论坛各种精美的帖子会用到它,但表格组合技术是一个很有趣的技术,掌握它具有一定的挑战性,所以,如果你觉得不需要,可以跳过这一节。

    表格组合更多的用于布局,当然,也有少数情形需要用到它。本节不想探讨什么时候用到表格组合,只从实现手段方面进行讨论。

    要顺利地实现N张表格的纵向组合,至少有三种方法:一是,令参与排列的表格都居中(即在<table>里加入align=center),上例就是;二是,不定义表格的对齐属性,即<table>里没有align属性,这样给出的N张表格代码,它们都是上下排列的,表格的自身位置全是左对齐(但若定义了align=left,情形不是这样,大家可以用论坛的表格设置功能试试)

    表格的水平排列更需要精确地计算参与排列的表格的宽度,它们的宽度的总和不能超过其所属容器所能装载的宽度,表格和其他元素的混排情形下更应该严格考虑。

    一个好的习惯是,还是用一张表格来规范并列组合的表格,这张表格,最好宽度设置为100%,然后将里面要并列组合的表格通通设置为左对齐(但注意:它们的宽度总和不能超过可显示的宽度)。

    本节从某个角度分析了表格的组合问题,它是一个主要用于排版的技术,要求计算精确,并不十分适用于论坛。只是起个抛砖引玉的作用。

五.多单元格表格

    在页面布局方面,比起表格组合,多单元格更能灵活和方便地进行控制,为此,使用多单元格布局帖子是一个不错的习惯。

    我们前面提过,表格代码里,有多少组<tr>...</tr>,表格就有多少行,有多少组<td>...</td>,表格就有多少列。为此,在代码里,我们将根据需要利用表格代码里的<tr><td>...</td></tr>来创建单元格。我们先来制作一个1×3即一行三列的表格。

    代码:

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
  <tbody>
    <tr>
      <td align=center>单元格一(即列1)</td>
      <td align=center>单元格二(即列2)</td>
      <td align=center>单元格三(即列3)</td>
    </tr>
  </tbody>
</table>

    效果:(1×3表格)

单元格一(即列1) 单元格二(即列2) 单元格三(即列3)

   在上述示例里,只有一组<tr>,故而表格只有一行,<tr>...</tr>里有三组td,因此,表格有三列,这就是所谓的1×3表格。现在我们把代码扩展一下,即增加一组tr,请看代码和效果:

    代码:

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
  <tbody>
    <tr>
      <td align=center>单元格一(即列1)</td>
      <td align=center>单元格二(即列2)</td>
      <td align=center>单元格三(即列3)</td>
    </tr>
    <tr>
      <td align=center>单元格四(即列4)</td>
      <td align=center>单元格五(即列5)</td>
      <td align=center>单元格六(即列6)</td>
    </tr>
  </tbody>
</table>

    效果:(2×3表格)

单元格一(即列1) 单元格二(即列2) 单元格三(即列3)
单元格四(即列4) 单元格五(即列5) 单元格六(即列6)

我们可以定义<td>里的宽度和高度值,从而让表格以我们的预设在其所在区域进行布局,以便达到有效的排版目的。在多行多列的表格里,当某一列的第一个单元格已经定义了宽度,那么,往下各单元格的宽度将跟它一致,如果同一列的所有单元格都设置了宽度,该列的最终宽度以width值最大的那个单元格为标准,——可见,我们只需设置某列的第一个单元格的宽度即可,其他同列的<td>不必给出width属性,这样一可以节省代码,二不会出现无效设置;表格的行的高度情形也是一样:当定义了某一行头一个单元格的高度之后,该行其他单元格会自动得到相同的高度值,不必再一一设置<td>的height属性。尽量减少代码量总是一个好习惯,一来可以节省空间,二来打开速度也会得到改善——代码越多,系统处理代码的时间就越长,同时也更耗可贵的系统资源。

    我们还应该注意的是,如果不设置<td>的width和height属性,表格各单元格将根据里面的内容的占位情况拓宽自己,表格给各单元格的宽度分配将由系统自动进行,这样就容易出现不合理的情况,因此,应该根据需要设置单元格的高度和宽度。

    多单元格表格里一个有趣的问题是单元格合并,其概念与Excel的合并单元格是一致的,只是实现方法不同。在HTML代码里,我们用colspan属性合并左右单元格,记作:colspan=数值,“数值”即为需要合并的单元格总数;而rowspan属性则合并上下单元格,记作:rowspan=数值。

    让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——

    代码:

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
  <tbody>
    <tr>
      <td align=center colspan=2>1,2单元格合并了</td>
      <td align=center>3</td>
    </tr>
    <tr>
      <td align=center>4</td>
      <td align=center>5</td>
      <td align=center>6</td>
    </tr>
  </tbody>
</table>

    效果:

1,2单元格合并了 3
4 5 6

下面是表格的上下单元格合并——

    代码:

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
  <tbody>
    <tr>
      <td align=center rowspan=2>1,4单元格合并了</td>
      <td align=center>2</td>
      <td align=center>3</td>
    </tr>
    <tr>
      <td align=center>5</td>
      <td align=center>6</td>
    </tr>
  </tbody>
</table>

    效果:

1,4单元格合并了 2 3
5 6

通过HTML代码实现单元格的合并略显抽象一些,你可以研究本示例代码和第二组代码(2×3表格)的区别并比较两组表格的样式来慢慢领会,要完全掌握这一技术,你还需要亲自做些尝试。最后顺便提一下:有些论坛可能不支持表格单元格的合并。

六.表格嵌套

    论坛所有精美的帖子,几乎无一例外地都用到表格的嵌套技术,其中的原因,如前所述,论坛中给用户提供施展身手的余地十分有限,只有通过表格的修饰,帖子才能既成为独立的显示单位,又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色,兼管帖子的布局的同时还承载着表达帖子信息元素的重任。

    作为容器,表格可以往里放置可以放置的元素。表格也是一个元素,故而表格放在表格里是合理的,因此就有了表格的嵌套。表格的嵌套还可以是另外的形式,那就是,一个表格的单元格里还有表格。不论是哪种形式的嵌套,理论上嵌套的层可以是无穷尽的,但现实中并不会这么做,我们总是根据需要有限制地使用嵌套,不会没完没了。

    表格嵌套其实也不复杂。如果你能够独立用代码做一张表格(强烈建议练出这样的本事),那么,你就可以做一个两张表格的嵌套,很简单,把代码复制一下,粘贴在原代码的<td>和</td>之间(亦即在“和”的位置)。试看以下代码和两个表格的嵌套效

<table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
 <tr>
   <td>
表一
   
  <table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
      <tr>
        <td>表二</td>
      </tr>
    </tbody></table>

 </td>
 </tr>
</tbody>
</table>

表一
表二

  从上面的表格效果上看,如果我们把文字“表一”删除掉,表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值,加上背景色和背景图,或通过其他手段来修饰,那么,里表和外表之间,就会出现非常漂亮的边框,帖子的外框就这么搞掂了。当然,这是一个细活,你需要做反复的尝试,直到效果满意为止。或许你还需要更多层的嵌套,这就看你的想象力了——实现手段是不难的,因为你已经会了第一层的嵌套,第二层、第三层……第N层,无非就是如此。

    现在我们来看看多单元格表格中,在单元格是嵌入表格的示例。先看代码:

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center><tbody>
 <tr>
  <td class=red>单元格一:无表格嵌套</td>
  <td>
  
<table border=1 bgcolor=#ccc1cc width="100%"><tbody>
    <tr><td class=red>我嵌套在单元格二里</td>
   </tr></tbody></table>

  </td>
 </tr>
</tbody></table>

    以下是效果:

单元格一:无表格嵌套
我嵌套在单元格二里

    上面的两个例子里,都将处于外层的表格(即外表)的宽度设置为450个像素,这是由于本页面的限制。在实际制作中,我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值,因为,你的帖子里边的内容宽度非常可能是绝对的,譬如图片有着自己固定的宽度, Flash影片也是使用绝对的width值,为了不让正文四周出现太多的空余,采用绝对值规范外表的宽度是有必要的。当然,还有一个好的做法,那就是,根本不用规定外表的宽度,而是让里边的内容自行撑宽外表,这么做至少要求我们注意两个方法的问题:一是,利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景,二是,外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙,不是用语言能够一一道明的,只有在不断地实践中才能逐一领悟和掌握。

    当今用户的的显示器分辨率有两大标准:800×600和1024×768,这两种分辨率下,用户发帖后帖子可显示的区域宽度是有区别的。为此,你需要通过尝试获知具体宽度,从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子,比如超过510个像素的宽度,分辨率设置为800×600的浏览者将看不到帖子右边的内容,而太小的宽度,又可能令帖子显得小里小气,也不理想。

深入学习表格

    表格还有一些重要的内容需要彻底弄懂。实际上,这些内容,前面几节我们已经接触过,但我们还需要进一步去探讨一下。

    我们先来做个实验。

    下面给出一条长度为450个像素的分隔线,然后在分隔线下面放置一张表格,其宽度亦为450个像素:


border=1
cesllpadding=15
cellspacing=8
width=450

   现在,我们看到,表格的总宽度仍然是450个像素(它没有超越分隔线),因此,我们可以得出这样的结论:表格的border、cellpadding和cellspacing虽然都是占位元素,但它们不会使得表格变得更宽,换一个更生动的说法,表格的这些元素是往里占位的,而不是往外占位。

    第二个实验:设定表格的宽度为400个像素,然后在里面放置一个可视元素,令其宽度为450,看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。


本表格设定宽度为400个像素,但因表格里的分隔线宽度为450个像素,表格的实际显示宽度发生了变化。

现在我们看到,虽然在<table>标签里设定了width=400,但表格的总宽度并不是400个像素,而是被表格里面的那条分隔线的实际宽度(450个像素)撑宽了。你可能会觉得奇怪:为什么表格总宽度超过了450个像素呢?道理是这样:表格设置了cellpadding值为10,cellpadding区域是不可放进任何可视内容的。细心比较一下,你将发现,表格宽出的部分正是留空的部分,即表格的单元格衬距。

    可见,表格里面的内容会影响到表格的宽度。实际上,如果我们设置好表格里面的内容的宽度,表格的width值是完全可以不设置的,但这不是一个好的习惯,我们通常仍然需要合理地设置表格的宽度,但必须留意一个问题:表格的总体宽度是否超过了可显示的范围。

    实验三:设定一个450个像素宽度的表格,表格的边框、单元格间距和衬距都为实值,该表格有三个单元格,每个单元格设定宽度为150(加起来恰好的450个像素),看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照


width=150 width=150 width=150

   上面的表格,我们设置border=1,cellpadding=10,cellspacing=6,三个单元格的宽度均为150个像素,结果是:表格的总体宽度未发生变化。由此我们得出结论:多单元格表格里,只要各单元格的宽度相加起来不超过<table>里的宽度赋值,它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。

    本节通过实验的方式,从表格的宽度角度剖析了表格的一些深层特征,估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象,加上用分隔线做对照标准和实例的讲解,悉心阅读和比较后,你会很容易掌握的。

TOP

框(表格)的制作


表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容.
主要讲边框做法,背景图处理方法和内容的排列要点.

一.表格的基本语法.

先看一个最简单的表格:

文字和图片


代码为:
<table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td>文字和图片</td></tr></table>

代码里的:
<table.........><tr><td>文字和图片</td></tr></table>
就组成表格的基本语法:开始标签,内容,结束标签.

这三个标记<table><tr><td>是定义表格的最重要的标记,可以说只学这三个己足够了.

先看懂这个代码:
table
这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里,
tr
描述列的元素.
td
描述格的元素.
列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内.

它的属性常用的有:
width=
表格宽度,接受绝对值(如180)及相对值(如 80%,相对可显示的宽度)
height=
表格高度,接受绝对值(如 180)
border=
表格框的厚度.
cellspacing=
表格格线离边框距离
cellpadding=
文字图片离格线的距离.
align=
表格的摆放位置(水平),可选值为: left, right,center(左,右,中心)
valign=
表格内字画等的摆放贴位置(垂直)可选值为: top, middle, bottom。(顶,中间,底部 )
background=
表格的背景图,与 bgcolor 不要同用。
bgcolor=
表格背景颜色,与background 不要同用.
bordercolor=
表格边框颜色.
bordercolorlight=
表格边框向光部分的颜色.
bordercolordark=
表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

TOP

二.边框的制作.

1.颜色框:

简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.据此写一个代码:

<table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>

显示效果为:

文字和图片


这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的.

下面讲几个有关框的常识问题.

居中:将位置属性align=center放到开始标签里,这个框就居中了:

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>

显示效果为:

文字和图片


定好尺寸的框仍会被撑大:框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片:

<table align=center bordercolor=#00FF00 border=8 width=360  height=250  cellspacing=0><tr><td>
<img src=http://img.tomgame.com/news/1000009053/2005109155734143.jpg  width=500>
</td></tr></table>

显示效果为:



这个原理要注意两点:
a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.
b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写width=360  height=250效果是一样的)

TOP

返回列表