HTML快速入门4——表格入门

　　上课思考题，大家想过吗？答案是否定的。因为有对齐方式的是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>１行１列<BR>２行</td><td>１行２列<BR>２行</td>
<td>１行３列<BR>２行</td><td>１行４列<BR>２行<br>３行<br>４行</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>２行４列<BR>２行<br>３行<br>４行</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>３行４列<BR>２行<br>３行<br>４行<br>５行</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>３行４列<BR>２行<br>３行<br>４行<br>５行</td>
</tr>
</table>

显示：

１行１列 ２行	１行２列 ２行	１行３列 ２行	１行４列 ２行 ３行 ４行
align=left 左对齐	align=center 居中	align=right 右对齐	２行４列 ２行 ３行 ４行
valign=top 上	valign=center 中	valign=bottom 下	３行４列 ２行 ３行 ４行 ５行
align=center valign=top 中上	align=right valign=bottom 右下	align=right valign=top 右上	３行４列 ２行 ３行 ４行 ５行

　

说明：

　　第一行不设置对齐方式，第二行用align，第二行用特别一些的valign（垂直），
第三行则同时使用两种对齐方式。可以看出默认的是左中。
　　第四列只是为了多有几行，可以看出对齐效果（如果只有一行则无所谓上中下了。）

　

总结

　　今天可能东西比较多和乱。其实主要就是宽度（width）和对齐方式（align valign）。

　　表格主要两个用途，一个用来规则的显示一些数据，比如报表一类的东西；
另一个用途，是用来排版，将东西显示在希望显示的地方。

练习题

　　试着使用表格和其他各种对齐方式。

　

思考题

　　让你来设计HTML的话，如何实现不规则表格？比如：