表格制作全攻略

丹云uk3j340ama 2018-02-20

展开全文

一、基本概念：

1.表格控制代码单词含义：
   【table】起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>；
   【tbody】：表体的起始符。紧跟在<table>之后，表示表体开始；
   【BORDER】边框，用数据控制其粗细度（默认以像素我单位），

0表示无边框；
   【BORDER-RIGHT】右边框线;
   【LEFT】左边框线;
   【TOP】上边框线;
   【BOTTOM】下边框线;
   【#0000ff】边框线颜色,《颜色速查表》；
   【7pt】边框线的粗细度；
   【solid】单线边框；
   【double】双线边框；
   【outset】凸型边框；
   【inset】凹槽边框；
   【dashed】虚线型边框等；
   【align=center】边框在日志中位置居中（日志页面720至

800之间.小于700以下时,边框才会出现居左、居右或居中

的现象出现）；
【bgColor=#ffffff代码】边框内部背景颜色.如果改变颜

色代码，背景色随之改变；
【tr】是table row的简称（行）；代码中有多少组<tr>

……</tr>，这张表格就有多少行；
【td】是table down的简称（列），down另解为（向下）

代码中有多少组<td>……</td>，这张表就有多少列。第一

个<td>紧跟在<tr>之后；从表格的代码框架分析得出：表格

标签里，所有元素都成对出现，而这些元素是按照从大到小

的顺序从外往里层层包裹的。table最大（表示下面的内容

是表格），tbody是老二（表示制作开始），tr是老三表示

第一行开始，td最小表示第一行中的第一个单元格开始，它

在最里层；
　【cellspacing】单元格间距；
　【cellpadding】单元格里内容与cellspacing区域的距离；
　【width】表格的宽度；当表格设置成超过ie自身像素的宽度，

得出的效果将导致IE的横向滚动条出现；
【widht="100%"】表格的宽度将根据可显示的宽度来自我调整

宽度；
【height】表格的高度，取值方法同width。（提示：如没有

特别需要，一般不设表格高度，系统会根据表格的内容自动

调节高度；
【background】表格的背景图地址链接控制按钮；
　【bordercolor】表格的边框颜色，当border值不为0时设置

此值有效；
　【bordercolorlight】亮边框颜色，亮边框指表格的左边和

上边的边框；
　【bordercolordark】暗边框颜色，暗边框指表格的右边和

下边的边框；
【align】表格的对齐方式，left（左对齐，默认）、

center、middle

（居中）、right（右对齐）、top(居上)、bottom(居下)。
     2、表格语法：
    <table aling=left>...</table>表格位置,置左；
    <TABLE aling=center>...</table>表格位置,置中；
    <table background=图片路径>...</table>背景图片的

URL=就是路径网址；
<table border=边框大小>...</table>设定表格边框大

小(使用数字)；
<table bgcolor=颜色码>...</table>设定表格的背景颜色；
<table borderclor=颜色码>...</table>设定表格边框

的颜色；
<table borderclordark=颜色码>...</table>设定表格

暗边框的颜色；
<table borderclorlight=颜色码>...</table>设定表格

亮边框的颜色；
<table cellpadding=参数>...</table>指定内容与网格

线之间的

间距(使用数字)；
<table cellspacing=参数>...</table>指定网格线与

网格线之间

的距离(使用数字)；
<table cols=参数>...</table>指定表格的栏数；
<table frame=参数>...</table>设定表格外框线的显

示方式；
<table width=宽度>...</table>指定表格的宽度大小

(使用数字)；
<table height=高度>...</table>指定表格的高度大小

(使用数字)；
<td colspan=参数>...</td>指定储存格合并栏的栏数

(使用数字)；
<td rowspan=参数>...</td>指定储存格合并列的列数

(使用数字)；
<!>分割窗口；
<frameset cols="20%,*">左右分割,将左边框架分割大

小为20%右边

框架的大小浏览器会自动调整；
<frameset rows="20%,*">上下分割,将上面框架分割大

小为20%下面

框架的大小浏览器会自动调整；
    <frameset cols="20%,*">分割左右两个框架；
    <frameset cols="20%,*,20%">分割左中右三个框架；
    <分割上下两个框架；
    <frameset rows="20%,*,20%">分割上中下三个框架；

批注；

<a href target>指定超链接的分割窗口；

<a href =#锚的名称>指定锚的超级链接；

<a href >指定超级链接；

    3、补充参考代码诠释：
    <CAPTION> ● 表格标题做成一打通列以填入表格标题；
    <TH> ● 表格标头相等于<TD>，但其内之字体会变粗；
    <FORM> ● 表单标记决定单一表单的运作模式；
    <TEXTAREA> ● 文字区块提供文字方盒以输入较大量文字；
    <INPUT> ○ 输入标记决定输入形式；
    <SELECT> ● 选择标记建立 pop-up 卷动清单；
    <OPTION> ○ 选项每一标记标示一个选项；
    <IMG> ○ 图形标记用以插入图形及设定图形属性；
    <A> ● 连结标记加入连结；
    <BASE> ○ 基准标记可将相对 URL 转绝对及指定连

结目标；
    <FRAMESET> ● 框架设定设定框架；
    <FRAME> ○ 框窗设定设定框窗；
    <IFRAME> ○ 页内框架于网页中间插入框架；
    <NOFRAMES> ● 不支援框架设定当浏览器不支援框架时

的提示；
　　<TD align=middle>时文字得位置。当中。同align=cneter

(居中）；
　　<FONT color=#ff0000 size=6>时文字得属性。

【color=#ff0000，字的色彩；size=6字体大小】；
　　<MARQUEE >是文字的移动代码；
<scrollamount=3>文字滚动速度，数字越大速度越快
<direction=UP> 文字滚动方向，UP（向上），

down(向下），left（向左），right(向右）

一个单元格的制作代码：

内容

<TR>和</TR>，这一组表示设定一行表格的开始，<TD>和

</TD>，这一组表示是一个格子，如果在<TR>和</TR>中间

加几组<TD>和</TD>，就表示设置了结果单元格。

如设置三个，效果代码：

内容</TD></TR></TABLE>

内容

增加一组<TR>和</TR>，表示增加一排表格

如要设置两行表格的效果代码：

内容</TD></TR><TR><TD>内容</TD><TD>内容</TD><TD>

内容</TD></TR></TABLE>

内容	内容	内容
内容	内容	内容

二、大小对齐：

1.表格大小控制代码：

宽度：WIDTH 高度：HEIGHT 值越大则表格越大

如设置宽300，高80的表格效果代码：

内容</TD></TR></TABLE>

内容

2.表格内容位置控制代码：

内容居左：align=left 内容居右：align=right

内容居中：align=center 内容居上：VALIGN=TOP

内容居下：VALIGN=BOTTOM

如设置内容居中同时居上的效果代码：

内容

三、框线控制代码：

1.框线颜色：BORDERCOLOR="颜色码"

如设置框线是红色的效果代码：

内容</TD></TR></TABLE>

内容

2.框线粗细：BORDER="粗细值"，"粗细值"越大，框线

越粗如设置框线为10个单位的效果代码：<TABLE

BORDER=10><TR><TD>内容</TD></TR></TABLE>

内容

3.表格栏位格线距：CELLSPACING=10 即相邻两个单

元格之间的距离如设置相邻单元格距离为10的效果代码：

<TABLE cellSpacing=10 align=center

border=1><TBODY><TR><TD>内容

</TD><TD>内容</TD></TR></TBODY></TABLE>

内容

四、单元格合并控制代码：

1.左右单元格合并【同一行单元格合并】：

colspan 就是“左右栏位合并”

如将第一行三个单元格合并为一个单元格的效

果代码：

<TBODY>

<TR><TD colSpan=3>1【这里必须注意：因为2和3两个

单元格已经被合并，所以它的代码必须同时去掉，否则

出现的表格就会错乱了】</TD></TR>

<TR>

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

1
4	5	6

2.同一列单元格合并：

rowspan 就是“上下栏位合并”

如将第一列上下两个单元格合并的效果代码：

<TBODY>

<TR>【同样因为单元格4被合并掉，所以第二行里面必

须去除一个单元格】<TD>5</TD><TD>6</TD>

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

1	2	3
1	5	6

五、表格背景设置：

1.设定全部表格背景底色控制代码：

bgcolor="颜色码"，代码：

如设置表格背景为红色的效果代码：

内容	内容
内容	内容

2.设定一列表格背景色的控制代码：

bgcolor="颜色码"

注：此代码必须加在列的控制代码<TR>中，即为

<TR bgcolor="颜色码">，

如设置第一行的表格为红色的效果代码：

<TABLE align=center border=1><TBODY><TR

bgColor=#ff0000>

内容	内容
内容	内容

3.设定其中一个单元格背景色的控制代码：

将颜色控制代码【bgColor="颜色码"】加在指定的

单元格控制代码中<TD>中。

如设置第一行第一列的单元格为红色的效果代码：

<TBODY><TR><TD bgColor=#ff0000>内容</TD><TD>内容

</TD></TR><TR><TD>内容</TD><TD>内容

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

内容	内容
内容	内容

4.用图片作表格背景的控制代码：

将图片地址控制代码<BACKGROUND="图片地址">加到

表格代码中，

如设置表格背景颜色一样，可以任意设定表格全部

或者某一行、某一列、某个单元格背景图片

（1）图片设置为整个表格背景：把<BACKGROUND=

"图址">（加在<TABLE>中）；

（2）图片设置为指定一行背景，把<BACKGROUND=

"图址">（加在<TD>中）；

（3）图片设置为指定一列背景：把<BACKGROUND=

"图址">（加在<TR>中）如设置整个表格的背景图片效

果代码：

<TABLE align=center background="图片地址" WIDTH

=“宽度”：

HEIGHT="高度" border=1>

</TABLE>

表格设置举例：

如设置两列表格的背景图片不同的效果代码：

<TBODY>

</TBODY></TABLE>

内容	内容
内容	内容

双线型边框:

代码:

<TABLE style="BORDER-RIGHT: #0000ff 7pt double;

BORDER-TOP:

#0000ff 7pt double; BORDER-LEFT: #0000ff 7pt

double;

BORDER-BOTTOM: #0000ff 7pt double" width="99%">

</TABLE>

效果图

填写内容

凸出型边框:

代码:

<TABLE style="BORDER-RIGHT: #33CC33 11pt outset;

BORDER-TOP:

#33CC33 11pt outset; BORDER-LEFT: #33CC33 11pt

outset;

BORDER-BOTTOM: #33CC33 11pt outset"width="99%" align=center>

</TABLE>

效果图

填写内容

凹陷型边框:

代码:

<TABLE style="BORDER-RIGHT: #00ff00 11pt inset;

BORDER-TOP:

#00ff00 11pt inset; BORDER-LEFT: #00ff00 11pt

inset;

BORDER-BOTTOM: #00ff00 11pt inset" width="99%"

align=center>
<TBODY>
<TR>
<TD bgColor=#ffc9cc>填写内容</TD></TR></TBODY>

</TABLE>

效果图

填写内容

虚线型边框:

代码:

<TABLE style="BORDER-RIGHT: #cc33ff 4pt dashed;

BORDER-TOP:

#cc33ff 4pt dashed; BORDER-LEFT: #cc33ff 4pt

dashed;

BORDER-BOTTOM: #cc33ff 4pt dashed" width="99%"

align=center>
<TBODY>
<TR>
<TD bgColor=#99ff00>填写内容</TD></TR></TBODY>

</TABLE>

效果图

填写内容

脊状立体型边框:

代码:

<TABLE style="BORDER-RIGHT: #cc9933 14pt ridge;

BORDER-TOP:

#cc9933 14pt ridge; BORDER-LEFT: #cc9933 14pt

ridge;

BORDER-BOTTOM: #cc9933 14pt ridge" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#cc9000>填写内容</TD></TR></TBODY>

</TABLE>

效果图

填写内容

粒状阴影框: 代码:

<TABLE style="FILTER: progid:DXImageTransform.

Microsoft.

Glow(color=#ccFF66, strength=20" height=55

cellSpacing=6

cellPadding=0

width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=#cc9933>正文</TD></TR></TBODY></TABLE>

效果图

填写内容

立体阴影框:

代码:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:

#f6ae56,direction:145, strength:15)" height=55

cellSpacing=6

width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff>填写内容</TD></TR></TBODY>

</TABLE>效果图

填写内容

邮票型边框:

代码:

<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed;

BORDER-TOP: #f6ae56 3px

dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH:

780px;

BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT:

50px" cellSpacing=8 bgColor=#f6ae56>
<TBODY>
<TR bgColor=#33ccff >
<TD>填写内容</TD></TR></TBODY></TABLE>

效果图

填写内容

凹状双内虚线框:

代码:

<TABLE borderColor=#0000ff cellSpacing=2 cellSpacing=1 width=780 align=center

border=10>

<TBODY>

<TR>

效果图：

填写内容

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自：丹云uk3j340ama > 《待分类》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多

丹云uk3j340ama

关注对话

TA的最新馆藏

[转] 糖尿病18年，1种方子这样用，2个月后血糖平稳了，肝肾也健康了
[转] 老和尚给我的祖传专治糖尿病秘方
[转] ?糖尿病有救了！这个秘方不仅急降血糖，还能降血压、防心梗
[转] 血瘀了心梗，痰郁了脑梗，肝郁了脸斑，送你3个中成药
[转] 血压再高，1个方子连用20天，血压稳如线！
[转] 15个小方子，太珍贵了！救人无数，用过的人都说好！

喜欢该文的人也喜欢更多

热门阅读换一换