本文部分资料来源与网上资源
表格标签与结构
音画帖的内容主要用表格来打死布局。
■ 表格标签有：
★① 定义表格标签，以<TABLE>开始，以</TABLE>结束。
★② 定义表内标签：以<TBODY>开始，以</TBODY>结束。只起标识作用。）
★③ 行 标 签：以<TR>开始，以</TR>结束。
★④ 格 标 签：以<TD>开始，以</TD>结束。（其内用来放置字、画、音乐）
■ 表格标签组合结构
※表、行、格三者的关系为：先“表”再“行”后“格”，层层包含。具体结构如下：
| 表格结构标签 | 标签大略含义 | 备注 |
<TABLE> | 表示开始制作表格 | 表格开始部分 |
<TBODY> | 表示表格包含以下内容 | |
<TR> | 表示开始制作一行 | |
<TD> | 表示开始在行里制作格 | <TD>与</TD>之间用来输入内容，帖画，放置多媒体等内容 |
字、画、音乐 | 表格内输入的内容 | |
</TD> | 表示结束在行里制作格 | |
</TR> | 表示一行制作结束 | 表格结束部分 开始的标识前加“/” |
</TBODY> | 表示表里的内容到此 | |
</TABLE> | 表示到此结束表格制作 |
如果把上面这些标签按我们习惯的表格排列，形状如下： 开始制表 <TABLE> 表内包括以下内容 <TBODY> 开始制行 <TR> 行里制作格子 <TD></TD> <TD></TD> <TD></TD> <TD></TD> 这一行结束 </TR> 表内的就上面这些内容 </TBODY> 表格制作完毕 </TABLE>
上面这些标签楞以说是制作表格的骨架；而表格的边框、行、格的线还是隐形的，要看见表格的边框、行、格线的粗细，还得用到一个设定表格边框、行、格线粗细的属性标识：border 。
设定的方法分别为：<TABLE border=n> 设定表格边框的粗细；
设定的方法分别为 <TR border=n> 设定行线（横线）的粗细；
设定的方法分别为 <TD border=n> 设定格线（竖线）的粗细；
注意：两个标识之间用空格相间隔。
border＝n “n”为自然数，等于０时线条看不到。
下面代码，制作的表格如右：
| <TABLE border=5> <TBODY> <TR> <TD>这是第一行第1格 </TD> <TD>这是第一行第2格</TD> <TD>这是第一行第3格</TD> </TR> <TR> <TD>这是第二行第1格 </TD> <TD>这是第二行第2格</TD> <TD>这是第二行第3格</TD></TR> </TBODY> </TABLE> |
|
提示：分析表格内有几行，每行有几格的方法如下，就是数开始标识标签，
如：有１个<TABLE> 就是一个表格；
有１个<TR>就是表格为一行
有一个<TD>就是这一行只有一格。
例如以下代码，表示有３行，每行３格。
<TABLE border=5>……………………表格开始
<TBODY>………………………………表格包含以下内容
<TR>……………………………………第１行开始
<TD>１１</TD>………………第１行第１格
<TD>１２</TD>………………第１行第２格
<TD>１３</TD>………………第１行第３格
</TR>……………………………………第１行结束
<TR>……………………………………第２行开始
<TD>２１</TD>………………第２行第１格
<TD>２２</TD>………………第２行第２格
<TD>２３</TD>………………第２行第３格
</TR>…………………………………………第２行结束
<TR>…………………………………………第３行开始
<TD>３１</TD>………………第３行第１格
<TD>３２</TD>………………第３行第２格
<TD>３３</TD>………………第３行第３格
</TR>…………………………………………第３行结束
</TBODY>………………………………表格内容打包完毕
</TABLE>……………………………………表格结束
3、表格的有关属性及设置
■ 表格的作用主要是通过一些属性的设置，确定表格及其内容的布局，即
● 确定位置、和大小。水平靠左还是居中、靠右摆放，垂直顶齐、置中还是底齐摆放；规定摆放的宽度、高度。
1、 水平摆放标签：align=（可选值为： left左, center中，right右）
2、 垂直摆放标签：valign=（可选值为： top顶, middle中, bottom底）
3、 表、行、格、内容宽度标签：width=（可用绝对数值或相对百分比）
4、 表、行、格、内容高度标签：height=（可用绝对数值或相对百分比）
● 确定表格的风格。边框、行、格线的颜色，边框、行、格线的粗细，边距，格与格的间距，背景颜色，背景图片，表格边框向光部分的颜色，表格边框背光部分的颜色等。
1、 边框、行、格线的颜色标签：borderColor=（取值为颜色代码如：#000000）
2、 边框、行、格线向光颜色标签：bordercolorlight=（取值为颜色代码如：#000000）
3、 边框、行、格线背光颜色标签：bordercolordark=（取值为颜色代码如：#000000）
4、 边框、行、格线的粗细标签：border=（取值为绝对数值如：0、1……10等）
5、 与边的距离标签：cellPadding=（取值为绝对数值如：0、1……10等）
6、 格与格的间距标签：cellSpacing=（取值为绝对数值如：0、1……10等）
7、 背景颜色标签：bgColor=（取值为颜色代码如：#000000）
8、 背景图片标签：background=（取值为图片在网上的地址，http://……）
■ 设置属性的方法是在表格、行、格的开头标签的尖括号内设置，各属性标签中间以空格隔开。如：
●<TABLE align=center borderColor=#000000 cellSpacing=2 cellPadding=0 width=100% background=http://www.123.com/bbs/x123.jpge border=10 >
● <TR align=RIGHT valign=MIDDLE ><TD align=RIGHT width=48% height=400 >
二、行、格的合并（删除）标识
表格是由行、格构成的，由于系统的规定， 制作的表格是很规整的，上、下行的格子数相同，上一行有几格，下一行一定也是几格，并且自动对齐。同时，表格还会根据格内填充物的大小、多少自动扩大或缩小（和Word文字处理系统中的表格一样）。而在实际应用中，我们却还常需要一些特殊的行或格，如，上一行需要１格，下一行需要２格或３格；左边需要１格，右边需要２格或３格等。这是就需要合并（删除）一些行或格。合并可以分为水平合并，即把水平的几个格合并为一格；也可在上下合并，即把上下几格合并一格。
●水平合并的标识：COLSPAN，表达式为：COLSPAN＝Ｎ（Ｎ为所要合并的格子数）
●上下合并的标识：ROWSPAN，表达式为：ROWSPAN＝Ｎ（Ｎ为所要合并的格子数）
合并格时，把合并格的标识写在要合并的格的第一格标签内，即:
<TD COLSPAN＝Ｎ>
例如要把规整的一个2行每行3格的表格：
分别改为：1、第一行１格，第2行3格；２、左边1格（列），右边2格（列）。
代码及结果如下：
| 规整表格代码 | 合并第１行格代码 | 合并左边第一格代码 | |||||||||||||||||
| <TABLE border=1> <TBODY> <TR> <TD >11</TD> <TD>12</TD> <TD>13</TD> </TR> <TR> <TD>21</TD> <TD>22</TD> <TD>23</TD> </TR> </TBODY> </TABLE> | <TABLE border=1> <TBODY> <TR> <TD COLSPAN=3>11、12、13</TD> </TR> <TR> <TD>21</TD> <TD>22</TD> <TD>23</TD> </TR> </TBODY> </TABLE> | <TABLE border=1> <TBODY> <TR> <TD ROWSPAN=2>11、21</TD> <TD>12</TD> <TD>13</TD> </TR> <TR> <TD>22</TD> <TD>23</TD> </TR> </TBODY> </TABLE> | |||||||||||||||||
| 规整表格 | 合并第1行格的表格 | 合并左边上下格的表格 | |||||||||||||||||
|
|
| |||||||||||||||||
三、给<TD>格内填充内容
格标签<TD>与</TD>中间是用来放字、画、音乐等内容的。所有的设置都是为了放内容而服务的。这些内容物必须放在你所建立的<TD>与</TD>格子里， 才能按你所设想的在IE显示出来给大家看。如果你放错了位置，将被视为“不速之客”而被驱逐出表格，看看下面的情形吧。
<TABLE align=center border=1>
<TBODY>
<TR>**我被放错地方了吗？**
<TD >哈哈!我在楼上</TD>
<TR>
<TD>哈哈!我在楼下</TD>
</TR>##看看我又哪里？
</TBODY>这又是在那里呢？
</TABLE>
你把这段代码复制后，按下“
”按钮，粘帖到代码框里，然后按“
”按钮，看看显示些什么。
显示的结果是，表格里除了写在<TD >哈哈!我在楼上</TD>和<TD>哈哈!我在楼下</TD>中间的内容外（见下面结果），其他内容都跑了吧？
| 哈哈!我在楼上 |
| 哈哈!我在楼下 |
既然格标签<TD>与</TD>中间是用来放字、画、音乐等的，这里就说说“字”的有关排列格式标识标签和相关属性。
■ ■ 格式标志
1、<p></p>
2、<br>
3、<dl></dl><dt></dt><dd></dd>
4、<ol></ol><ul></ul><li></li>
5、<div></div>
●<p></p>标志对是用来创建一个段落，在此标志对之间加入的文本、音、画将按照段落的格式显示在浏览器。<p></p>有align对齐方式属性
●<br>是一个很简单的标志，它没有结束标志，它用来创建一个回车换行。
●<dl></dl>用来创建一个普通的列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。
看下例：
| 代码结构 | 运行后显示的结果 |
| <dl> <dt>中国城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>广州 </dd> <dt>美国城市</dt> <dd>华盛顿 </dd> <dd>芝加哥 </dd> <dd>纽约 </dd> </dl> |
|
● <ol></ol>标志对用来创建一个标有数字的列表；<ul></ul>标志对用来创建一个标有圆点的列表；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项，若<li></li>放在<ol></ol>之间则每个列表项加上一个数字，若在<ul></ul>之间则每个列表项加上一个圆点。请看下边的例子：
| 代码结构 | 运行后显示的结果 |
| <ol> <p>中国城市</p> <li>北京</li> <li>上海</li> <li>广州</li> </ol> <ul> <p>美国城市</p> <li>华盛顿</li> <li>芝加哥</li> <li>纽约</li> </ul> |
中国城市
美国城市 |
● <div></div>标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与<p></p>标志对非常相似，同样有align对齐方式属性
■
● <STRONG>加粗字符
，结束标签：</STRONG>
● <FONT>字符标签。设写字形、字号、颜色。结束标签：</FONT>
字号标识：size =（取值自然数，数字越大，字越大）
字颜色标识：color=（取值为颜色代码如：#000000）
● 字符设定方法：<FONT size =2 color=#000000>文字内容</FONT>
■ <IMG>图形标志。汉有结束结束标签。<img>标志有以下几个属性：src="../ 图象地址图象名。alt="当鼠标移动到图像上时显示的文本"。align=对齐方式，与文本相同。border=图像的边框粗细。width和height=图像的宽和高。
● 图象的设定方法：<IMG align=对齐方式 alt="？" src="../king/home/图象.gif" width=N height=N border=N>
■ <EMBED>多媒体标志。插入格式如mp3、wav、rm、FLASH等多媒体。<EMBED>标志除了有和图形一样的属性和属性设定方法外，还有下面属性：
● 插入音乐后地址后，可添加以下属性：
1、是否自动播放autostart=（可取值：true、false）"true表示“是”， false表示“否”
2、是否重复播放loop=（可取值：true、false）
3、是否完全隐藏控制面板：hidden=（可取值：true、false）
4、设定歌曲开始播放的时间starttime="分：:秒"如 starttime="00:30"
5、设定音量的大小volume="0-100" 数值是0到100之间。
6、console 一般正常的面板
7、smallconsole 较小的面板
8、playbutton 只显示播放按钮
9、pausecutton 只显示暂停按钮
10、stopbutton 只显示停止按钮
11、volumelever 只显示音量调整钮
■ ■ <TD> </TD内部填充结构举例如下：
1、<TD>
<P align=center>
<FONT face=隶书 color=#ff0000 size=4>
<STRONG>填充字符</STRONG>
</FONT>
</P>
</TD>
2、<TD colSpan=3>
<DIV align=center>
<IMG height=80 src="http://www.citychinese.com/bbs/UpladFile/2006-8/2006823937579.gif" width=600>
</DIV>
</TD>
3、<TD colSpan=3 height=50>
<DIV align=center>
<IMG height=112 src="http://www.citychinese.com/bbs/20068220371766064.gif" width=222>
</DIV>
</TD>
字的标志还有，这里也介绍一些：
| 标志及其作用 | 运行后效果 |
| <h1>最大的标题</h1> <h3>使用h3的标题</h3> <h6>最小的标题</h6> <b>黑体字文本</b> <i>斜体字文本</i> <u>下加一划线文本</u> <tt>打字机风格的文本</tt> <cite>引用方式的文本</cite> <em>强调的文本</em> <strong>加重的文本</strong> <font size="+1" color="red">size取值“+1”、color取值“red”时的文本</font> <p><font size=4 face=楷体_gb2312 color=blue>size取值4 、color取值blue、字体为楷体</font> | 最大的标题使用h3的标题最小的标题黑体字文本 斜体字文本 下加一划线文本 打字机风格的文本 引用方式的文本 强调的文本 加重的文本 size取值“+1”、color取值“red”时的文本 size取值4 、color取值blue、字体为楷体 |
四、实战制作表格（一）:简单的帖图帖子
前面学习了表格的结构，表格、行、格的标识标签，介绍了相关属性，知道了格子是用来填充字、画、音乐等内容。这节就开始实习制作简单的图画帖子。
一、帖图的格式
1、背景帖图格式
★★★在学习制作表格时，我们知道表格属性里有一个背景颜色标签：bgColor=（取值为颜色代码如：#000000），和 背景图片标签：background=（背景图片）。在制作图画帖时用背景图片标签：background。这个标签表达为：
background=http://……/图片名。
如：background=http://bbs.muwen.com/fileuploaddir/4B398384622.jpg
2、格子里帖图格式
★★★在学习在格里填充内容时已经介绍过，图象标签<IMG>。<IMG>没有结束标签，有以下几个属性：src="../ 图象地址图象名。alt="当鼠标移动到图像上时显示的文本"。align=对齐方式，与文本相同。border=图像的边框粗细。width和height=图像的宽和高。
图象的设定方法：<IMG align=对齐方式 alt="？" src="../king/home/图象" width=N height=N border=N>
如：<IMG align=center alt="女军人" src="http://www.citychinese.com/bbs/UploadFile/2006-7/20067301041271870.jpg" width=200 height=250 border=0>
二、背景和格子帖图的区别
1、背景帖图，在格子的最低层，主要是：①可以在图上面写字；②可以利用表格间距制作边框；③可以装饰帖子。
2、格子帖图，图和字在格子的一个层里，不能重叠放一起，只能铺展摆放，只起装饰帖子作用。
三、制作一个简单图画帖子
1、收集一个背景图片，并把图片地址复制下来备用。如：
http://bbs.muwen.com/fileuploaddir/4B398384622.jpg
2、根据帖子主题，收集一个主题图片，并把图片地址复制备用。如
http://www.citychinese.com/bbs/UploadFile/2006-7/20067301041271870.jpg
3、在写字板分别按背景帖图和格子帖图格式把两张图片格式写好备用。如
①背景图 background=http://bbs.muwen.com/fileuploaddir/4B398384622.jpg
②格子图 <IMG align=center alt="女军人" src="http://www.citychinese.com/bbs/UploadFile/2006-7/20067301041271870.jpg" width=200 height=250 border=0>
3、在写字板用制作表格标签写出表格代码。如写一个表格的代码如下
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
4、在表格标签中定制表格摆放位置、边框粗细、表格高宽、边距间距、颜色等属性。如：
<table align=center width=200 height=250 cellSpacing=5 border=0>
再把背景图格式加入到里边
<table align=center width=200 height=250 cellSpacing=5 background=http://bbs.muwen.com/fileuploaddir/4B398384622.jpg border=0>
5、在格子标签中间加入格子帖图格式。如：
<td><IMG align=center alt="女军人" src="http://www.citychinese.com/bbs/UploadFile/2006-7/20067301041271870.jpg" width=200 height=250 border=0></td>
完成的表格代码如下：
<table align=center width=200 height=250 cellSpacing=5 background=http://bbs.muwen.com/fileuploaddir/4B398384622.jpg border=0>
<tbody>
<tr>
<td><IMG align=center alt="女军人" src="http://www.citychinese.com/bbs/UploadFile/2006-7/20067301041271870.jpg" width=200 height=250 border=0></td>
</tr>
</tbody>
</table>
 |
| 欢迎光临 云水论坛 (http://www.yunshui.net/) | Powered by Discuz! X2.5 |