HTML标记【表格属性的控制】！

最新推荐文章于 2024-06-19 10:23:02 发布

zmqhbd

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量3.1k

点赞数

分类专栏： .NET 文章标签： html border table

.NET 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

行高度的控制——height属性
<tr height=数值>
<html>
<body>
<table border=3>
<tr><th>日期</th><th>课程名称</th><th>必选修</th></tr>
<tr height=50><td>星期一</td><td>统计学</td><td>必修</td></tr>
<tr height=80><td>星期二</td><td>生产管理</td><td>必修</td></tr>
<tr height=50><td>星期三</td><td>经济学</td><td>必修</td></tr>
<tr height=80><td>星期四</td><td>商务英语</td><td>必修</td></tr>
<tr height=50><td>星期五</td><td>组织行为</td><td>选修</td></tr>
<table>
</body>
</html>

==============================================================
行的外框颜色——bordercolor属性
<tr bordercolor=颜色值>
例：
<html>
<body>
<table border=3>
<tr><th>日期</th><th>课程名称</th><th>必选修</th></tr>
<tr bordercolor=red><td>星期一</td><td>统计学</td><td>必修</td></tr>
<tr bordercolor=navy><td>星期二</td><td>生产管理</td><td>必修</td></tr>
<tr bordercolor=blue><td>星期三</td><td>经济学</td><td>必修</td></tr>
<tr bordercolor=yellow><td>星期四</td><td>商务英语</td><td>必修</td></tr>
<tr bordercolor=red><td>星期五</td><td>组织行为</td><td>选修</td></tr>
<table>
</body>
</html>
=================================================================
行的背景颜色——bgcolor属性
<tr bgcolor=颜色值>
例：
<html>
<body>
<table border=3>
<tr><th>日期</th><th>课程名称</th><th>必选修</th></tr>
<tr bgcolor=red><td>星期一</td><td>统计学</td><td>必修</td></tr>
<tr bgcolor=navy><td>星期二</td><td>生产管理</td><td>必修</td></tr>
<tr bgcolor=blue><td>星期三</td><td>经济学</td><td>必修</td></tr>
<tr bgcolor=yellow><td>星期四</td><td>商务英语</td><td>必修</td></tr>
<tr bgcolor=red><td>星期五</td><td>组织行为</td><td>选修</td></tr>
<table>
</body>
</html>
=============================================================
行的文字水平对齐方式——align属性
<tr align=left或center或right>

例：
<html>
<body>
<table border=3 width=50%>
<tr align=left><td>此行文字靠左对齐</td></tr>
<tr align=center><td>此行文字居中对齐</td></tr>
<tr align=right><td>此行文字靠右对齐</td></tr>
<table>
</body>
</html>

====================================================================

行的文字垂直对齐方式——valign属性
<tr valign=top或middle或bottom>
例：
<html>
<body>
<b>行的文字垂直对齐方式—valign属性</b>
<br><br>
<table border=3 height=30%></tr>
<tr valign=top><td>此行文字靠上对齐</td></tr>
<tr valign=middle><td>此行文字置中对齐</td></tr>
<tr valign=bottom><td>此行文字靠下对齐</td></tr>
</table>
</body>
</html>

=============================================================
单元格的边框颜色——bordercolor属性
<td bordercolor=颜色值>
<th bordercolor=颜色值>

例：
<html>
<body>
<table border=6>
<tr><th>日期</th><th>课程课程</th><th>必选修</th></tr>
<tr><td bordercolor=red>星期一</td><td>统计学</td><td>必修</td></tr>
<tr><td bordercolor=green>星期二</td><td>生产管理</td><td>必修</td></tr>
<tr><td>星期三</td><td>经济学</td><td>必修</td></tr>
<tr><td>星期四</td><td>商务英语</td><td>必修</td></tr>
<tr><td>星期五</td><td>组织行为</td><td>选修</td></tr>
</table>
</body>
</html>
=========================================================
单元格的背景颜色——bgcolor属性
当bgcolor属性使用在<td>或<th>标记时
<td bgcolor=颜色值>
<th bgcolor=颜色值>
例：
当bgcolor属性设置在<td>标记
<html>
<body>
<table border=3>
<tr><th>日期</th><th>课程名称</th><th>必选修</th></tr>
<tr>
<td bgcolor=yellow>星期一</td>
<td bgcolor=pink>统计学</td>
<td>必修</td>
</tr>
<tr>
<td>星期二</td><td>生产管理</td><td>必修</td>
</tr>
<tr>
<td>星期三</td><td>经济学</td><td>必修</td>
</tr>
<tr>
<td>星期四</td><td>商用英语</td><td>必修</td>
</tr>
<tr>
<td>星期五</td><td>组织行为</td><td>必修</td>
</tr>
</body>
</html>
========================================================
单元格文字的水平对齐——align属性
在<td>或<th>标记中运用align属性
<td align=left或center或right>
<th align=left或center或right>

在<td>标记中运用align属性
例:
<html>
<body>
<table border=3>
<tr>
<th>星座</th><th>日期</th><th>幸运色</th>
</tr>
<tr>
<td align=left width=60%>巨蟹座</td><td>6/22-7/22</td><td><font color=green>绿色</font></td>
</tr>
<tr>
<td align=center width=60%>狮子座</td><td>7/23-8/22</td><td><font color=red>红色</font></td>
</tr>
<tr>
<td align=right width=60%>处女座</td><td>8/23-9/22</td><td><font color=gray>灰色</font></td>
</tr>
</table>
</body>
</html>
===============================================================
单元格式文字的垂直对齐——valign属性
<td valign=top或middle或bottom>
<th valign=top或middle或bottom>
在<td>标记中运用valign属性
例：
<html>
<body>
<table border=3>
<tr>
<th>星座</th><th>日期</th><th>幸运色</th>
</tr>
<tr>
<td valign=top height=80>巨蟹座</td><td>6/22-7/22</td><td>绿色</td>
</tr>
<tr>
<td valign=middle height=80>狮子座</td><td>7/23-/22</td><td>红色</td>
</tr>
<tr>
<td valign=bottom height=80>处女座</td><td>8/23-9/22</td><td>灰色</td>
</tr>
</body>
</html>
====================================================================
水平延伸单元格——colspan
<td colspan=n>
<th colspan=n>
例：
在<td>标记中
<html>
<body>
<table border=3>
<tr>
<td colspan=2>价目表</td>
</tr>
<tr><td>汉堡</td><td>25元</td></tr>
<tr><td>三明治</td><td>15元</td></tr>
<tr><td>厚片土司</td><td>15元</td></tr>
</table>
</body>
</html>