(一)表格元素<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>