HTML学习教程

现在的位置: 首页 > 综合 > 正文

2013年09月10日 ⁄ 综合 ⁄ 共 11584字 ⁄ 字号小中大 ⁄ 评论关闭

一、表格的基本构架

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

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

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

表格是一个可自定义的容器。一张完整的表格有表头、表体、单元格、行、列等等元素组成。下面是一个完整的表格标签代码框架：为了一目了然，清晰明白，先不对它的属性进行描述。

标签代码说明：

<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最小，它在最里层。

下面便是它们的隶属关系

二、表格的属性

1、<table>
标签中各个元素的属性设置

<table>标签中所需要设置的元素：

border

表格的边框、cellspacing单元格间距：cellpadding 单元格衬距： width表格的宽度：height表格的高度：bgcolor：
表格的背景色；

background：
表格的背景图； bordercolor：
表格的边框颜色； bordercolorlight：
亮边框颜色

bordercolordark：
暗边框颜色； align：
表格的对齐方式。

如何设置这些属性

border：

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

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

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

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

height
：
表格的高度，取值方法同width。提示：如果不是特别需要，可不设置表格的高度，由系统根据表格的内容自动设置高度。如果需要表格的高度精确则要设置，比如，要用表格的背景来发一张图片时，如果表格的高度不精确定义，图片便不可能完整或完美地显示。

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

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

bordercolor
：
表格的边框颜色，当border值不为0时设置此值有效。bordercolor

=#ff0000
或bordercolor

=red
。bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。

bordercolorlight
：
亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。取值方法：bordercolorlight

=#ff0000
或bordercolorlight

=red
。

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

=#ff0000
或bordercolordark

=red
。

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 borderColor=#ff0000 cellSpacing=10 cellPadding=8 width=400 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>
<P
class=main>本表格的属性设置：<BR>边框大小：border=1<BR>边框颜
色：bordercolor=#ff0000<BR>背景色：bgcolor=#cc9968<BR>表格宽
度：width=400<BR>单元格间距：cellspcing=16<BR>单元格衬距：cellpadding=8&
lt;BR>表格的对齐方式（居中）：align=center<BR><BR>注：其他属性未设置。</P&
gt;</TD></TR></TBODY></TABLE>

练习及实例

实例之一

未设置表格边框的代码,将其放到发文章对话框内看看效果是什么样子?

实例之二

尚未修饰的“完整的表格”

大家好（在这里添加文字）（可将内容复制粘贴在表格内）以下表格均可用复制粘贴的方法。

可以把文字添加在代码中（也可以复制在做好的表格内）

用100%比定义表格的宽度：

代码：

<TBODY>

</TBODY>

</table>

用像素定义表格的宽度

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

实例之三

简单的边框修饰

亮边框（bordercolorlight=#008000）与暗边框（borderColorLight=#008000 ），

代码：

<TBODY>

     <TR>
       <TD
width="100%">亮边框（bordercolorlight=#008000）与暗边框     （borderColorLight=#008000 ），

</TD>

</TR>

</TBODY>

</TABLE>

换边框颜色

亮边框（bordercolorlight=#ff66ff）与暗边框（borderColorLight=#9966cc ），

代码：

<TBODY>

<TR>
<TD
width="100%">亮边框（bordercolorlight=#ff66ff）与暗边框（borderColorLight=#9966cc ）

</TD>

</TR>

</TBODY>

</TABLE>

实例之四

同一颜色的边框

练习（可将内容复制粘贴在表格内）

代码：如果将内容添加在代码内，一定要添加在“<TD> </TD> 中间，请看实例。

<TABLE borderColor=#66ccff width="100%" border=10>
  <TBODY>

     <TR>
       <TD
width="100%">练习之三

</TD>

</TR>

<TBODY>

</TABLE>

实例之五

表格边框线的粗细和框边的空白

练习之四（可将内容复制粘贴在表格内）

代码：

</TBODY>

</table>

表格背景的修饰

HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主。取值方法：bgcolor=black或bgcolor=#000000。

除了使用背景色，还可使用图片修饰表格背景，这样会使表格的外观会更漂亮。但应该注意：用来作表格背景图的文件不要太大，太大了打开网页速度较慢，最好是有规则图案的小图片，或与表格大小相一致的图片。否则做出的表格也不会有理想的外观效果。

实例之六

表格背景颜色的修饰

这个表格已经有背景修饰了，比上面的好多看了吧，颜色可根据你的需要换的

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

在老师这个实例中，其中内容已经有简单的编辑了，这里面出现了一些编辑内容的标示语言，在学内容编辑时将会陆续接触到，学习要循序渐进，不要急于求成。

代码：

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00>
<tbody>
  <tr>

<td>

      <p align=left><font face=黑体 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>
      暗边框颜色：#008000<br>
      亮边框颜色：#008060</font>

</td>

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

练习之六《
色码表

》从这个色码表里找你喜欢的颜色

代码
：

</TR>

</TBODY>

</TABLE>

可以把这里的背景或边框的颜色代码（#ff9999）换成： #FF6666
#99CC66 #00FF00 等，看看会怎么样？

记住“#”字符号可别忘记了。

实例之七

用图片修饰背景

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00
background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif

>
<tbody>
  <tr>
    <td>
      <p align=left><font face=黑体 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>
      暗边框颜色：#008000<br>
      亮边框颜色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>

换过背景图片的表格

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif

>

用下面的背景图片将书面的图片换一下看看效果

http://www.53520.com/bbs/tp/1/4B264505797.gif

http://www.53520.com/bbs/tp/1/4B26169335.9.gif

备用素材！

色码表

动态背景素材

（查图片地址的方法：将鼠标放到图片上点右键，在属性中就可以找到图片的原地址）

静态背景素材

实例之八

表格内容的编辑

户外活动

回家睡觉

心韵制作于二○○五年四月三十日

代码：

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>

<TD>

<P align=left><FONT face=

黑体
color=#008000 size=5><B>

户外活动
</B>

</FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=

黑体
color=#008000 size=5><B>

回家睡觉

</B></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg"><BR>

心韵制作于二○○五年四月三十日
</P></TD>
</TR></TBODY></TABLE>

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=黑体 color=#008000 size=5><strong
>户外活动</strong
></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=黑体 color=#008000 size=5><strong
>回家睡觉</strong
></FONT><BR><BR>
<P
align=center><IMG
src="http://www.medscape.com.cn/luntan/image/uppic
/pic20040429125928.jpg"><BR>心韵制作于二○○五年四月三十日</P><
/TD></TR></TBODY></TABLE>

<b>…</b>：字体加粗，与<strong>…</strong>效果，这两个代码中的“字体加粗” 虽语法不一样，但效果一样的。

用下面的图片把代码里的图片换一下看看效果

图片素材网址：

http://biochem.oursci.org/magazine/200210/06-01s.jpg

http://www.scxxt.com.cn/ziyuan/mdv/seniorchinese/teach/g4/41009/images/p003.jpg

表格嵌套

两层边框（两张表格的嵌套
）

Table No.1(Father Table)

Table No.2(Son Table)

Table No.1(Father Table)

代码：

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
  <tr>
   <td>Table No.1(Father Table)



<table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>


Table No.1(Father Table)
   </td>
  </tr>
</tbody>
</table>

3.三层边框（三张表格的嵌套）

代码：

以上是黑马老师教的表格制作方法及代码

四个边框（四个表格嵌套，加背景）

代码：

<
TABLE
borderColor=#6633ff cellPadding=10 width="100%" bgColor=#cccc00
background=http://www.alles.or.jp/~queen/webgraph/bg/image/star_kabe_01.jpg
border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cc9966 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#663388 height=200 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003300 height=200 width="100%" border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#556633 height=100 width="100%" border=8>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>

</
TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

上下表格嵌套：

表格的嵌套这是由三个表格嵌套而成，灰色的为一级格（父格），另外两个为二级格（子格及他们包含在一级格内）一上一下，这两个完整的二级表格代码是一上一下并列放在一级表格内，即放在一级表格的<td>·····</td>之间的。

祝大家开心快乐！

欢迎光临心缘之梦！

代码：

请注意它们之间的关系。

加入背景的嵌套表格

学习要循序渐进！

只要用心，你一定会学得最好！

代码：

<TABLE borderColor=#888888 width="100%" border=6>
<TBODY>
<TR>
<TD>
<TABLE height=200 borderColorDark=#663399 cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#008000 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif
border=10>
<TBODY>
<TR>
<TD>      <FONT
color=#7fff00 size=5><EM>
学习要循序渐进！</EM></FONT></TD></TR></TBODY><
/TABLE>
<TABLE height=200 borderColorDark=#ff00cc cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B264505797.gif
border=10>
<TBODY>
<TR>
<TD>   <FONT
size=5><U><FONT
color=#ff8c00>只要用心，你一定会学得最好！</FONT></U></FONT><
/TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

左右表格嵌套
：

这也是在一级表格（父格）内放有两个表格。但这与上述的两个表格是有区别的，是左右两个表格，首先要用两个“<td>……</td>”将一级表格（父格）分隔成左右部分，在分别在这个两个部分中加入一个完整的表格，便是如下效果。

你学会了吗？

不会也没关系，慢慢来，

先搞清楚它们之间的关系

加入背景的嵌套表格

【上篇】git使用记录
【下篇】在ASP文件中调用DLL

作者: race

该日志由 race 于11年前发表在综合分类下，最后更新于 2013年09月10日.
转载请注明: HTML学习教程 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

HTML学习教程

作者: race

书签

最新文章New

本站推荐

返回首页