表格,一般的用于對網頁的內容進行排版,比如文字放在頁面的某個位置,你就可以做個表格,然后設置一下表格的屬性,它文字放在表格的某個單元個里,就行了;其實用過word的朋友應該非常明白的。除了頁面的排版外,表格還可以制作出非常好看的效果,比如按鈕、變色、邊線等等。大家要會靈活的運用。
看看表格的基本語法:<table>...</table> - 定義表格
<tr> ...</tr>- 定義表行
<th> ...</th>- 定義表頭
<td> ...</td>- 定義表元
下面看看它的示例:
<table border="1"> <!--border是表格的邊框屬性,=“1”,即邊框的寬為一象素-->
<tr> <!--定義表格的行-->
<th>Food</th><th>Drink</th><th>Sweet</th><!--定義表格的表頭,即標題-->
</tr> <!--行結束-->
<tr>
<td>A</td><td>B</td><td>C</td> <!--定義表格的表元-->
</tr>
</table>
不帶邊框的表格:
<table>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
Food Drink Sweet
A B C
跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th> <!--colspan=3,跨三列表元-->
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th><!--rowspan=3,跨三行表元-->
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
表格尺寸設置 <table border=#>邊框尺寸設置:
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
<table border width=# height=#>表格尺寸設置:
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
<table border cellspacing=#>表元間隙設置:
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
<table border cellpadding=#>表元內部空白設置:
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表格內文字的對齊/布局
<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<table border width=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>
<tr valign=#>
<th valign=#> #=top, middle, bottom, baseline
<td valign=#>
<table border height=100>
<tr>
<th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</table>