清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程

# 表格(TABLE)标记(TAGS)

## 表格的基本语法

### <table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

带边框的表格：

    <table border>
    <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>
    <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></tr>
    <tr><th>Food</th>  <th>Drink</th>  <th>Sweet</th></tr>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    </table>

Morning Menu
Food | Drink | Sweet
--- | --- | ---
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>

Morning Menu | Food | A
Drink | B
Sweet | C

## 表格尺寸设置

### <table border=#>

边框尺寸设置：

    <table border=10>
    <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 border width=# height=#>

表格尺寸设置：

    <table border width=170 height=100>
    <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 border cellspacing=#>

表元间距设置：

    <table border cellspacing=10>
    <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 border cellpadding=#>

表元内部填充设置：

    <table border cellpadding=10>
    <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

## 表格内文字的对齐/布局

### <tr align=#>

### <th align=#> #=left, center, right

### <td align=#>

    <table border width=160>
    <tr>
                    <th>Food</th><th>Drink</th><th>Sweet</th></tr>
    <tr>
                    <td align=left>A</td>
                    <td align=center>B</td>
                    <td align=right>C</td></tr>
    </table>

Food | Drink | Sweet
--- | --- | ---
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>
    <tr>
                    <td valign=top>A</td>
                    <td valign=middle>B</td>
                    <td valign=bottom>C</td>
                    <td valign=baseline>D</td></tr>
    </table>

Food | Drink | Sweet | Other
--- | --- | --- | ---
A | B | C | D

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

### <table align=left>

    <table align="left" border>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    </table>
    My favorites...<br>
    cookies, chocolates, and more.

Food | Drink | Sweet
--- | --- | ---
A | B | C

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

### <table align=right>

Food | Drink | Sweet
--- | --- | ---
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>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    </table>
    My favorites...<br>
    cookies, chocolates, and more.

Food | Drink | Sweet
--- | --- | ---
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>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    </table>

Lunch

Food | Drink | Sweet
--- | --- | ---
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>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    </table>

Lunch

Food | Drink | Sweet
--- | --- | ---
A | B | C

HTML Design Guide Main Page
Contents || Page || Font || Text Style || Image || Form || Table || Table Advanced
|| Frames || Marquee || Alternative Inline Elements
Tag Index || What's New

Network Communication Design
http://www.newasp.net/
C&P 1994-2006 Xin Yun newasp.net@gmail.com