|
表格标记详解★TD参数设定
|
|
HTML表格标签<TD>的参数设定（常用）:
|
ALIGN 单元格内容的水平对齐
VALIGN 单元格内容的垂直对齐
BORDERCOLOR 单元格的边框颜色
BORDERCOLORLIGHT 单元格的亮边框颜色
BORDERCOLORDARK 单元格的暗边框颜色
BGCOLOR 单元格的背景颜色
BACKGROUND 单元格的背景图象
WIDTH 单元格的宽度
HEIGHT 单元格的高度
COLSPAN 跨列属性
ROWSPAN 跨行属性 |
|
标记 |
基本语法释义 |
代码实例 |
效果 |
|
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=CE>文本内容</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> |
|
|
标记 |
基本语法释义 |
代码实例 |
效果 |
|
COLSPAN
跨列属性 |
在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性COLSPAN。
基本语法
<TD COLSPAN=VALUE>
语法解释
VALUE代表单元格跨的列数。 |
<TABLE borderColor=#003333 height=200 width=100 border=2>
<TBODY>
<TR>
<TD COLSPAN=3>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR></TBODY></TABLE> |
| 文本编辑 |
| 文本编辑 |
文本编辑 |
文本编辑 |
| 文本编辑 |
文本编辑 |
文本编辑 | |
|
标记 |
基本语法释义 |
代码实例 |
效果 |
|
ROWSPAN
跨行属性 |
|
<TABLE borderColor=#003333 height=200 width=100 border=2>
<TBODY>
<TR>
<TD ROWSPAN=3>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR></TBODY></TABLE> |
| 文本编辑 |
| 文本编辑 |
文本编辑 |
文本编辑 |
| 文本编辑 |
文本编辑 |
文本编辑 | |
