HTML表格
HTML表允许Web作者将文本,图像,链接,其他表等数据排列到单元格的行和列中。
HTML表是使用
<表格>
标签中
这将产生以下结果:
在这里,
border
是
表格标题可以使用
这将产生以下结果:
有两个属性称为
细胞填充
and
细胞间隔
你将使用它来调整表格单元格中的空白。 cellspacing属性定义表单元格之间的空间,而cellpadding表示单元格边界与单元格内的内容之间的距离。
这将产生以下结果:
你将使用
colspan
如果要将两个或多个列合并到一个列中,请使用属性。你将使用类似的方式
rowspan
如果要合并两行或更多行。
这将产生以下结果:
你可以使用以下两种方式之一设置表格背景:
bgcolor
属性:你可以为整个表格或仅为一个单元格设置背景色。
背景
属性:你可以为整个表格或仅为一个单元格设置背景图像。
你也可以使用
边框颜色
属性。
注意
: The
bgcolor
,
背景
, and
边框颜色
HTML5中弃用的属性。不要使用这些属性。
这将产生以下结果:
这是使用的示例
背景
属性。在这里,我们将使用/ images目录中可用的图像。
这将产生以下结果。这里的背景图片不适用于表格的标题。
你可以使用以下方式设置表格的宽度和高度
width
and
height
属性。你可以根据像素或可用屏幕区域的百分比来指定表格的宽度或高度。
这将产生以下结果:
The
caption
标签将用作表格的标题或说明,并显示在表格的顶部。较新版本的HTML / XHTML中不推荐使用此标记。
这将产生以下结果:
桌子可以分为三部分:表头,身体和脚。头和脚与经过字处理的文档中的页眉和页脚非常相似,它们的每一页都保持不变,而正文是表的主要内容持有者。
分隔桌子的头,身体和脚的三个元素是:
<身体>
:表示表格的主体。
<脚>
:创建一个单独的表页脚。
一个表可能包含几个
这将产生以下结果:
以下是在表格单元格内使用另一个表格和其他标签的示例。
这将产生以下结果:
标签用于创建表格行和
标签用于创建数据单元。 下的元素是常规元素,默认情况下保持左对齐
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
标签的属性,用于在所有单元格之间放置边框。如果不需要边框,则可以使用border =“ 0”。
表格标题
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding和Cellspacing属性
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan和Rowspan属性
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
表格背景
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
桌子的高度和宽度
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
表格标题
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
表页眉,正文和页脚
:创建一个单独的表头。
元素以指示
不同的页面
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
嵌套表
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>