HTML - 表格

  »   HTML  »   HTML教程 - 表格,创造而使用它们

初次,表格是会显得难,但有点耐心和练习,你将会看到那些东西是并不难的。 其<table> 标签用于打开一个表格。在这标签内部我们将会发现2个不同类型的标签就是 <tr> (表格的行) 和 <td> (表格的列). 但最好的说明还是一个例子:

html<table border="1">
	<tr>
		<td>Row 1 Cell 1</td>
		<td>Row 1 Cell 2</td>
	</tr>
	<tr>
		<td>Row 2 Cell 1</td>
		<td>Row 2 Cell 2</td>
	</tr>
</table>

Demo

Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2

其内容将会放在表格的行内部。一个行是显示在 <td> 与 </td>之间的。其边界属性制定表格边界的长度。

HTML - 不对称表格

要形成表格我们将会使用 'rowspan' 横跨一个以上的行而使用 'colspan' 横跨一个以上的列。并且,如果我们要以第一个行为献于整个列的标题,我们将会使用 <th> 标签的。这些将会写成我们在如下例子里所看到的粗字。

html<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>

Demo

Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

HTML - 细胞间距

于“cellpadding”的帮助和“cellspacing”属性我们将建立细胞之间的距离。 'Cellspacing'确立了边缘尺寸,并 'cellpadding'边缘和内容之间的距离。在下面的例子中一点点颜色也被添加。

与'cellpadding'和 'cellspacing'属性我们将会制定cell之间的距离。 'Cellspacing'制定其边界尺寸而'cellpadding'制定其边界与内容之间的距离。
html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> 
	<tr> 
		<th>Column 1</th>
		<th>Column 2</th> 
	</tr> 
	<tr>
		<td>Row 1 Cell 1</td>
		<td>Row 1 Cell 2</td>
	</tr>
	<tr>
		<td>Row 2 Cell 1</td>
		<td>Row 2 Cell 2</td>
	</tr> 
</table>

为了易于区别,我们将察掉其以前例子中的边界。

cell与边界尺寸之间的距离,将在图素里由浏览器会解释的。 使用这'law'的10意味着实际上的10个图素。这个属性不仅使用于图素的测量单位而且我们将以通过下一课程的其他进度会学习到。