您的位置：首页 > Web前端 > HTML

（9）HTML表格

2014-04-17 01:02 211 查看

（一）表格元素<table> <tr> <td> <th>

<tr>表示行；<td>创建单元格；<th>与<td>类似，用于表示标题单元格，形式上为加粗居中显示（<td>为左对齐）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<th>第二行第一列</th>
<th>第二行第二列</th>
<th>第二行第三列</th>
</tr>
</table>
</body>
</html>

以上代码效果如下：

（二）table元素的特性

1. align特性（可由CSS实现，已被弃用）

用于指明该table在窗口中处于左边（align=left）、右边（align=right）还是居中（align=center）的位置。

2. bgcolor特性用于指明表格的背景颜色（值可以为颜色名或6位16进制数字）

3. border特性用于在表格的周围以及每个单元格的周围添加边框，默认情况以及border=“0”的情况下，边框不显示。

4. cellpadding特性用于单元格内边距，值可以为像素或者百分比。

5. cellspacing特性用于创建单元格边框间的空间量，值可以为像素或者百分比。

6. dir特性用于指明表格中文本的方向。（dir=“rtl”为从右向左；ltr表示从左向右）

7. rules用于指示内边框外观，frame用于指示外边框外观，均可由CSS实现。

8. width用于指明表格宽度，该值通常为像素值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1" align="center" bgcolor="red" cellpadding="10%" cellspacing="5" dir="rtl" width="800">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<th>第二行第一列</th>
<th>第二行第二列</th>
<th>第二行第三列</th>
</tr>
</table>
</body>
</html>

效果图如下：

（三）tr元素的特性

1. align特性（可由CSS实现，已被弃用）用于指明该某行所有单元格内容的位置：左对齐（align=eft）、右对齐（align=right）、居中（align=center）、两端对齐（align=justify）。

2. bgcolor特性用于指明该行的背景颜色，通常用于颜色交替，便于辨别不同行（值可以为颜色名或6位16进制数字）

3. valign特性用于指明每个单元格内容的垂直对其方式：单元格顶部对齐（top）、单元格中心对其（middle）、单元格底部对齐（bottom）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1" width="600">
<tr align="right" bgcolor="red">
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr align="center" bgcolor="green">
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
</body>
</html>

（四）td元素的特性

1. align特性（可由CSS实现，已被弃用）用于指明该某单元格内容的水平对其方式：左对齐（align=eft）、右对齐（align=right）、居中（align=center）、两端对齐（align=justify）。
2. bgcolor特性用于指明该单元格的背景颜色，（值可以为颜色名或6位16进制数字）
3. colspan特性用于一个单元格跨越多列时使用（合并单元格）如：colspan=“2”。
4. rowspan特性用于一个单元格跨多行时使用，如：rowspan=“2”。
5. height特性用于指定单元格高度（其值可为像素值或百分比）。
6. width特性用于指定单元格宽度（其值可为像素值或百分比）。
3. valign特性用于指明每个单元格内容的垂直对其方式：单元格顶部对齐（top）、单元格中心对其（middle）、单元格底部对齐（bottom）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1" width="800">
<tr >
<td align="left" height="30">第一行第一列</td>
<td align="center">第一行第二列</td>
<td align="right">第一行第三列</td>
</tr>
<tr >
<td colspan="2" width="500">两列合并</td>
<td rowspan="2">两行合并</td>
</tr>
<tr >
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
</body>
</html>

（五）为表格添加标题（<caption>元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1" align="center">
<caption>表格学习</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<th>第二行第一列</th>
<th>第二行第二列</th>
<th>第二行第三列</th>
</tr>
</table>
</body>
</html>

（六）对表格进行分组，便于对一组表格进行格式调整（与CSS结合）

使用<colgroup>对列进行分组，可用特性有：align，span，valign，width等。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>表格学习</title>
</head>

<body>
<table border="1" align="center" width="900">
<caption>表格学习</caption>
<colgroup span="2" class="first_part" width="40%" ></colgroup>
<colgroup span="1" class="second_part" width="20%"></colgroup>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr >
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航