html入门教程(初学者) -HTML表格 - 书目录

html入门教程(初学者) -HTML表格

HTML表格

<!DOCTYPE html>

<html>

<head>

	<title>HTML Tables</title>

	<style type="text/css">

	table {

		border-collapse:collapse;

		}

	td, th { 

		border:1px solid black;

		padding:5px;

	 }

	</style>

</head>

<body>

	<table>

		<tr>

			<th>Header Cell 1</th>

			<th>Header Cell 2</th>			

		</tr>

		<tr>

			<td>Cell 1</td>

			<td>Cell 2</td>		

		</tr>

		<tr>

			<td>Cell 3</td>

			<td>Cell 4</td>		

		</tr>

	</table>

</body>

</html>

以上是HTML表格的一个例子。该表已应用了一些样式(使用<style>文档中的<head>元素)元素。

HTML表格如何工作

在HTML中,您可以通过使用<table>标签<tr>和和<td>标签来创建表格:

<table>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>		
	</tr>
</table>

每个<tr>元素代表一个表格行。每个<td>元素代表一个数据单元。

还有其他表相关的元素,你可以用你的表使用,如<th>,<thead>,<tfoot>,<tbody>,<caption>,和<colgroup>。

以下是使用这些元素的表格的示例:

<table>
	<caption>
		Caption here...
	</caption>
	<colgroup span="2" class="first2cols"></colgroup>
	<thead>
		<tr>
			<th>Header Cell 1</th>
			<th>Header Cell 2</th>
			<th>Header Cell 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>	
			<td>Cell 3</td>		
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Footer Cell 1</td>
			<td>Footer Cell 2</td>	
			<td>Footer Cell 3</td>		
		</tr>
	</tfoot>
</table>

正如你所看到的,许多额外的元素允许你将它们中的其他元素分组。例如,该<thead>元素用于对表格的列标题,<tfoot>列脚注等组进行分组。

该<colgroup>元素可以让你组列在一起。这对于将样式应用于列中的所有单元格可能非常方便。在上面的例子中,我们使用span=”2″前两列进行分组。我们也将一个类应用于该组列。因此,如果我们要向该类应用背景颜色,背景颜色将仅应用于前两列。

属性

该<table>元素支持border和sortable属性(还有全局属性和)和事件处理的内容属性。

使用该border属性通常会导致浏览器在表格及其单元格周围呈现基本边框。喜欢这个:

<table border="1">

	<tr>

		<th>Header Cell 1</th>

		<th>Header Cell 2</th>			

	</tr>

	<tr>

		<td>Cell 1</td>

		<td>Cell 2</td>		

	</tr>

	<tr>

		<td>Cell 3</td>

		<td>Cell 4</td>		

	</tr>

</table>
然而,该border属性正在失去人气,有利于CSS。你可以使用CSS做更多的事情。另外,从HTML5开始,该border属性仅用于向浏览器传达该表未用于布局目的。

该sortable属性旨在允许表格的排序界面。

使用表格时可能会发现的其他两个属性是colspan和rowspan属性。这些可以<th>和<td>元素一起使用。它们允许您指定单元格应该跨越多少个列或行。下面的例子。

colspan属性:

在这个例子中,第一个标题单元跨越两列。

<table border="1">

	<tr>

		<th colspan="2">Header Cell 1</th>

		<th>Header Cell 2</th>			

	</tr>

	<tr>

		<td>Cell 1</td>

		<td>Cell 2</td>	

		<td>Cell 3</td>		

	</tr>

	<tr>

		<td>Cell 4</td>

		<td>Cell 5</td>		

		<td>Cell 6</td>	

	</tr>

</table>

行跨度:

这里我们应用rowspan=””到第一个标题单元格。这导致标题单元跨越所有3行。

<table border="1">

	<tr>

		<th rowspan="3">Header Cell 1</th>

		<th>Header Cell 2</th>	

		<th>Header Cell 3</th>		

	</tr>

	<tr>

		

		<td>Cell 1</td>	

		<td>Cell 2</td>		

	</tr>

	<tr>

		

		<td>Cell 3</td>		

		<td>Cell 4</td>	

	</tr>

</table>

避免布局的HTML表格

HTML表格仅用于呈现具有多个维度的表格数据数据。这些数据需要行和列才能正确显示。

HTML表格不打算用于布局目的。尽管使用它们来创建布局可能很诱人,但不建议这样做。您应该使用适当的HTML元素以及CSS来确定您的页面布局。有关HTML Layouts的更多内容。