上课思考题,大家想过吗?答案是否定的。因为有对齐方式的是block类,
block类将另起一段,所以几个不同对齐方式的block不可能在同一行里
于是我们再介绍一个排版十分重要标签——
表格
例子:
<table border=1>
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
</table>
浏览器显示:
1行1列 | 1行2列 |
2行1列 | 2行2列 |
说明:
table是block类标签,这意味着,你可以用align来指定他的对齐方式。
比如:
<table border=1 align=center>
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
</table>
显示:
1行1列 | 1行2列 |
2行1列 | 2行2列 |
以后我们只说明一个新标签的类别,而不再说明align了。
tr括起来的是一行,每个td是该行中的一格,tr和td都可以不断重复,
而显示更多的行和列,很好理解,不用多讲。border=1说明了表格线宽度。
如果border=0或者不写,则效果如下:
1行1列 | 1行2列 |
2行1列 | 2行2列 |
下面为了看起来清楚都加上边框。
宽度width
例子:
<table border=1 width=100%>
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
</table>
显示:
1行1列 | 1行2列 |
2行1列 | 2行2列 |
width可以指定任意百分比,表明占当前页面宽度的百分比。如果不指定宽度,
则表格会随着内容的的增减而自动收缩。
你应该可以马上举一反三,td也该有width!
例子:
<table border=1 width=100%>
<tr><td width=33%>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
</table>
显示:
1行1列 | 1行2列 |
2行1列 | 2行2列 |
td的width是一行的百分比,最好和table的width一起使用。
而且显然因为表格线的缘故,只要在第一行指定宽度就可以了。
表格内对齐方式
例子:
<table border=1 width=100%>
<tr>
<td>1行1列<BR>2行</td><td>1行2列<BR>2行</td>
<td>1行3列<BR>2行</td><td>1行4列<BR>2行<br>3行<br>4行</td>
</tr>
<tr>
<td align=left>align=left<BR>左对齐</td><td align=center>align=center<BR>居中</td>
<td align=right>align=right<BR>右对齐</td><td>2行4列<BR>2行<br>3行<br>4行</td>
</tr>
<tr>
<td valign=top>valign=top<BR>上</td><td valign=center>valign=center<BR>中</td>
<td valign=bottom>valign=bottom<BR>下</td>
<td>3行4列<BR>2行<br>3行<br>4行<br>5行</td>
</tr>
<tr>
<td align=center valign=top>align=center<br>valign=top<BR>中上</td>
<td align=right valign=bottom>align=right<br>valign=bottom<BR>右下</td>
<td align=right valign=top>align=right<br>valign=top<BR>右上</td>
<td>3行4列<BR>2行<br>3行<br>4行<br>5行</td>
</tr>
</table>
显示:
1行1列 2行 | 1行2列 2行 | 1行3列 2行 | 1行4列 2行 3行 4行 |
align=left 左对齐 | align=center 居中 | align=right 右对齐 | 2行4列 2行 3行 4行 |
valign=top 上 | valign=center 中 | valign=bottom 下 | 3行4列 2行 3行 4行 5行 |
align=center valign=top 中上 | align=right valign=bottom 右下 | align=right valign=top 右上 | 3行4列 2行 3行 4行 5行 |
说明:
第一行不设置对齐方式,第二行用align,第二行用特别一些的valign(垂直),
第三行则同时使用两种对齐方式。可以看出默认的是左中。
第四列只是为了多有几行,可以看出对齐效果(如果只有一行则无所谓上中下了。)
总结
今天可能东西比较多和乱。其实主要就是宽度(width)和对齐方式(align valign)。
表格主要两个用途,一个用来规则的显示一些数据,比如报表一类的东西;
另一个用途,是用来排版,将东西显示在希望显示的地方。
练习题
试着使用表格和其他各种对齐方式。
思考题
让你来设计HTML的话,如何实现不规则表格?比如: