《HTML教程》08章表格

表格的基本语法

<table> - 定义表格
    <thead> - 定义表头部分
        <tr> - 定义表行
            <th> - 定义表头
            </th>
        </tr>
    </thead>
    <tbody> - 定义表体部分
        <tr> - 定义表行
            <td> - 定义表元(表格的具体数据)
            </td>
        </tr>
    </tbody>
    <tfoot> - 定义表尾部分
        <tr> - 定义表行
            <td> - 定义表元
            </td>
        </tr>
    </tfoot>
</table>

不带边框和带边框的表格：
<table>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>

苏州无锡常州
A B C

<table border>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>

苏州无锡常州
A B C

跨多行、多列的表元(Table Span)
<table border><tr>
<td colspan=6>江苏</td>
</tr><tr>
<td>苏南 colspan=3</td><td colspan=3>苏北</td>
</tr><tr>
<td>苏</td><td>锡</td><td>常</td>
<td>扬</td><td>通</td><td>徐</td>
</tr><tr>
<td>A</td><td>B</td><td>C</td>
<td>D</td><td>E</td><td>F</td>
</tr></table>

江苏
苏南苏北
苏锡常扬通徐
A B C D E F

<TABLE border><tr>
<td rowspan=6>江苏</td><td rowspan=3>苏南</td>
<td>苏</td><td>A</td>
</tr><tr>
<td>锡</td><td>B</td>
</tr><tr>
<td>常</td><td>C</td>
</tr><tr>
<td rowspan=3>苏北</td><td>扬</td><td>D</td>
</tr><tr>
<td>通</td><td>E</td>
</tr><tr>
<td>徐</td><td>F</td>
</tr></TABLE>

江苏苏南苏 A
锡 B
常 C
苏北扬 D
通 E
徐 F

表格尺寸设置
    <table border=#>边框尺寸设置
    <table border width=# height=#>表格尺寸设置
    <table border cellspacing=#>表元间隙设置
    <table border cellpadding=#>表元内部空白设置

苏州	无锡	常州
A	B	C

苏州	无锡	常州
A	B	C

苏州	无锡	常州
A	B	C

苏州	无锡	常州
A	B	C

表格内文字的对齐/布局
    <tr align=# valign=#> 默认：水平:left 垂直:middle
    <th align=# valign=#> 默认：水平:center 垂直:middle
    <td align=# valign=#> 默认：水平:left 垂直:middle
    水平值：左(left)/中(center)/右(right)/两端对齐(justify)
    垂直值：上(top)/中(middle)/下(bottom)/baseline

左上	无锡	常州
中中	B	C
右下	E	F

苏州	无锡	常州
A	B	C

表格在页面中的对齐/布局(Floating Table)
<table align=left/center/right>文字环绕时center无效

<table border align=left>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>文字省略

苏州	无锡	常州
A	B	C

美国军方官员23日证实，美军驻科威特北部沙漠的一个101空降师营地当天凌晨遭袭击，13名士兵受伤。

<table border align=center>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>文字省略

苏州	无锡	常州
A	B	C

美国军方官员23日证实，美军驻科威特北部沙漠的一个101空降师营地当天凌晨遭袭击，13名士兵受伤。

<table border align=right>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>文字省略

苏州	无锡	常州
A	B	C

美国军方官员23日证实，美军驻科威特北部沙漠的一个101空降师营地当天凌晨遭袭击，13名士兵受伤。

表格环绕取消
<br clear=left/right>

<table border align=left>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>据报道<br clear=left>文字省略

苏州	无锡	常州
A	B	C

据报道
美国军方官员23日证实，美军驻科威特北部沙漠的一个101空降师营地当天凌晨遭袭击，13名士兵受伤。

<table border align=right>
<tr>
<th>苏州</th><th>无锡</th><th>常州</th>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>据报道<br clear=right>文字省略

苏州	无锡	常州
A	B	C

据报道
美国军方官员23日证实，美军驻科威特北部沙漠的一个101空降师营地当天凌晨遭袭击，13名士兵受伤。

表格的标题
<caption align=left/center/right valign=top/bottom> ... </caption>

江苏
苏州	无锡	常州
A	B	C

江苏
苏州	无锡	常州
A	B	C

表元的改行
<caption align=left/center/right valign=top/bottom> ... </caption>

<table border>
<tr>
<th>本单元允许改行，请改变你的浏览器宽度，看一看改行结果</th>
</tr></table>

本单元允许改行，请改变你的浏览器宽度，看一看改行结果

<table border><tr>
<TD nowrap>本单元禁止改行，请改变你的浏览器宽度，看一看改行结果</TD> </tr></table>

本单元禁止改行，请改变你的浏览器宽度，看一看改行结果

《HTML教程》08章 表格

《HTML教程》08章表格