注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

回音壁

赏识音画文章 悟析古今沧桑

 
 
 

日志

 
 

【转载】HTML表格标记详解3:TD参数设定  

2015-12-27 13:14:27|  分类: 【学习摘录】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 
 

 

 

            表格标记详解3

 
三、HTML表格标签<TD>的参数设定(常用):

 

ALIGN                             单元格内容的水平对齐
VALIGN                           单元格内容的垂直对齐 
BORDERCOLOR            单元格的边框颜色
BORDERCOLORLIGHT 单元格的亮边框颜色
BORDERCOLORDARK  单元格的暗边框颜色

BGCOLOR                      单元格的背景颜色 
BACKGROUND              单元格的背景图象
WIDTH                            单元格的宽度
HEIGHT                          单元格的高度

ALIGN

单元格内容

的水平对齐

       

       在水平方向上,可以设定单元格的对齐方式,分别有居左、居中、居右3种。

基本语法
<TD ALIGN="LEFT">
<TD ALIGN="CENTER">
<TD ALIGN="RIGHT">

语法解释
LEFT为居左,CENTER为居中, RIGHT为居右。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=20 Bordercolor=#003333>
<TR>
<TD ALIGN=LEFT>文本编辑</TD><TD ALIGN=LEFT>文本编辑</TD>
</TR>
<TR>
<TD ALIGN=CENTER>文本编辑</TD><TD ALIGN=CENTER>文本编辑</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>文本编辑</TD><TD ALIGN=RIGHT>文本编辑</TD>
</TR></TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

VALIGN

单元格内容

的垂直对齐

 

        在垂直方向上,可以设定单元格的对齐方式,分别有居上、居中、居下3种。

基本语法
<TD VLIGN="TOP">
<TD VLIGN="MIDDLE">
<TD VLIGN="BOTTOM">

语法解释
       TOP为居上,MIDDLE为居中,BOTTOM为居下。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=200 Bordercolor=#003333>
<TR>
<TD VALIGN=TOP>文本编辑</TD><TD VALIGN=TOP>文本编辑</TD>
</TR>
<TR>
<TD VALIGN=MIDDLE>文本编辑</TD><TD VALIGN=MIDDLE>文本编辑</TD>
</TR>
<TR>
<TD VALIGN=BOTTOM>文本编辑</TD><TD VALIGN=BOTTOM>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

BORDERCOLOR

单元格的边框颜色

      

        为了美化表格,可以为单元格设定不同的边框颜色。

基本语法
<TD Bordercolor=color_VALUE>

语法解释
        定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=20 Bordercolor=#003333>
<TR>
<TD Bordercolor=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

BORDERCOLORLIGHT

单元格的亮边框颜色

BORDERCOLORDARK

单元格的暗边框颜色

 

        在单元格中,可以单独定义亮边框色。

基本语法
<TD Bordercolorlight=color_VALUE>
<TD Bordercolodark=color_VALUE>

语法解释
        定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=20 Bordercolor=#003333>
<TR>
<TD Bordercolorlight=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699>文本编辑</TD><TD Bordercolor=#990099>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

BGCOLOR

单元格的背景颜色

 

       通过BGCOLOR属性,可以设定单元格的背景颜色。

基本语法
<TD BGcolor=color_value>

语法解释
定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=20 Bordercolor=#003333>
<TR>
<TD Bordercolor=#336699 BGcolor=#330033>文本编辑</TD><TD Bordercolor=#336699 BGcolor=#6633FF>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699 BGcolor=#FFFFCC>文本编辑</TD><TD Bordercolor=#336699 BGcolor=#FF0000>文本编辑</TD>
</TR>
<TR>
<TD Bordercolor=#336699 BGcolor=#330066>文本编辑</TD><TD Bordercolor=#336699 BGcolor=#660000>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

BACKGROUND

单元格的背景图象

    

        我们可以为单元格设置背景图像,可以使用任何GIF或者JPEG图片文件。

基本语法
<TD BACKGROUND=FILE_name>

语法解释
        定义背景图象时,写下图片文件的完整路径或者相对路径。

 

<TABLE BORDER=2 WIDTH=80 HEIGHT=20 Bordercolor=#003333>
<TR>
<TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD><TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD></TR>
<TR>
<TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD><TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD><TR>
<TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD><TD Bordercolor=#336699 Background=完整路径或者相对路径>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

WIDTH

单元格的宽度

HEIGHT

单元格的高度

       

        默认情况下,单元格的宽度和高度根据内容自动调整,我们也可以手动设置单元格的宽度和高度。

基本语法
<TD WIDTH=value HEIGHT=value>

语法解释
        通过WIDTH属性定义单元格的宽度,HEIGHT属性定义单元格的高度,单位为像素或百分比。

 

<TABLE BORDER=2 Bordercolor=#003333>
<TR>
<TD  WIDTH=30 HEIGHT=200>文本编辑</TD><TD WIDTH=50 HEIGHT=200>文本编辑</TD>
</TR>
<TR>
<TD  WIDTH=30 HEIGHT=20>文本编辑</TD><TD WIDTH=50 HEIGHT=20>文本编辑</TD>
</TR>
<TR>
<TD  WIDTH=30 HEIGHT=100>文本编辑</TD><TD WIDTH=50 HEIGHT=100>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑
HTML表格制作相关文章链接:

点击相关文章链接查看:

欢迎光临启野博客!
  评论这张
 
阅读(19)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017