html基础学习第九节-表格定义的深入讲解

<table border="1" height="150" width="200">
<tr>
<td>A1</td><td colspan="2" rowspan="2">A2A3<br />B2B3</td>
</tr>
<tr>
<td>B1</td>
</tr>
<tr align="center">
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

那么,这个效果是怎么样的呢?如下图,大家可以看到,这个表格C1到C3都是居中对齐的,这就是灵活运用咯,大家要自己大胆灵活运用了!

A1 A2A3
B2B3
B1
C1 C2 C3

这里大家也看到了,这些都很简单,难道只有这些设定吗?不,还有很多,下面我们来举例讲讲valign,分别有top,middle,bottom这三个属性,对应的就是垂直靠上,垂直居中,垂直靠右对齐,大家可以通过代码和实例图来看看效果,下面是先看代码

<table border="1" height="150" width="200">
<tr valign="top">
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr valign="middle">
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr valign="bottom">
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

大家看到,这里分别对A,B,C三行设定了垂直向上对齐,垂直居中对齐和垂直向下对齐,看看效果,大家会明白,这里只需要定义tr的valign属性即可

A1 A2 A3
B1 B2 B3
C1 C2 C3

接下来就靠你们了,你们可以自己去设定tr和td的各种属性,包括下面我们要讲的颜色,请往下看

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:3   其中:访客  0   博主  0   引用   1

  1. avatar Jr 4

    哈哈,抢到个沙发 :grin:

    • avatar yumanutong 5

      @Jr 呵呵,好吧,谢谢哈!

评论加载中...

来自外部的引用: 1

  • 导读-HTML基础学习教程整合 | yumanutong blog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情