站长资源网页制作

简介表格的基本语法... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)带边框的表格： 复制代码代码如下: A B C

不带边框的表格：

复制代码代码如下:
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

A B C

 跨多行、多列的表元(Table Span)

跨多列的表元 <th colspan=#>

复制代码代码如下:
<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

A B C

跨多行的表元 <th rowspan=#>

复制代码代码如下:
<table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
A B C

 表格尺寸设置

<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>
A B C

<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>
A B C

<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>
A B C

<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>
A B C

 表格内文字的对齐/布局

<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>

A B C

<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>

A B C D

 表格在页面中的对齐/布局(Floating Table)

<table align=left>

复制代码代码如下:
<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

My favorites...<br> cookies, chocolates, and more.

A B C

My favorites...
cookies, chocolates, and more.

<table align=right>

A B C

My favorites...
cookies, chocolates, and more.

<table vspace=# hspace=#> #=space value

复制代码代码如下:
<table align="left" border vspace=20 hspace=30>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

 My favorites...<br> cookies, chocolates, and more.

A B C

My favorites...
cookies, chocolates, and more.

 表格的标题

<caption align=#> ... </caption> #=left, center, right

复制代码代码如下:
<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

A B C

<caption valign=#> ... </caption> #=top, bottom

valign=top is default.

复制代码代码如下:
<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

A B C Lunch

Lunch

Food	Drink	Sweet 表格的基本语法 <table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元(表格的具体数据) 带边框的表格：  复制代码代码如下: <table border> <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> </table>	Food	Drink	Sweet	Food	Drink	Sweet	Morning Menu			Food	Drink	Sweet	Morning Menu	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet	Other	Food	Drink	Sweet	Food	Drink	Sweet	Food	Drink	Sweet
Food	Drink	Sweet	Food	Drink	Sweet