创建表格
目前,最广泛使用的用于巧妙排布网页的HTML工具之一是表格。通过掌握表格,您不再只是“创建”一个页面,而是“设计”一个页面。
您可以使用的表格种类繁多,从简单的方框到非常复杂的设计布局。在本文中,我们将讨论表格基础知识,以及一些您可以尝试的技巧和提示,以设计出人们喜爱访问的精彩页面。
广告
同样,与所有您希望在浏览器窗口中显示的信息一样,请确保您的表格位于HTML文档的<body>和</body>标签之间。使用以下标签开始您的表格:
<table>
表格中的每个水平行以以下标签开始:
<tr>
而且,行内的每个数据项都以以下标签开始:
<td>
考虑以下表格图:
A1 A2
B1 B2
C1 C2
这里有三行两列。
要编写此图的骨架代码,请按以下顺序使用以下标签:
<table> 开始表格
<tr> 开始第一行
<td> 开始第一个数据“单元格”(A1)
</td> 关闭A1单元格
<td> 开始第二个单元格(A2)
</td> 关闭A2单元格
</tr> 关闭第一行
<tr> 开始第二行
<td> 开始第二行中的第一个数据单元格(B1)
</td> 关闭B1单元格
<td> 开始B2单元格
</td> 关闭B2单元格
</tr> 关闭第二行
<tr> 开始第三行
<td> 开始第三行中的第一个数据单元格(C1)
</td> 关闭C1单元格
<td> 开始C2单元格
</td> 关闭C2单元格
</tr> 关闭第三行
</table> 关闭表格
许多设计师喜欢对表格的部分内容进行缩进,以使代码更易于阅读。示例如下。
现在我们将在表格骨架中添加数据和边框。边框是表格的轮廓。边框标签 (border="value") 放置在初始表格标签内。您可以通过分配特定值来指定边框的厚度(我们将分配值为“1”)。建议您尝试不同的值,看看它们在浏览器中显示的效果。如果您不希望显示边框,请分配“0”值。
(注意:即使您不打算让表格显示边框,最好还是先使用可见边框,至少在解决可能影响表格显示方式的任何“错误”之前。)
将以下代码和数据键入(或剪切并粘贴)到您的HTML文档中
<table border=1> <tr><td>A1 </td> <td>A2</td> </tr> <tr><td>B1 </td> <td>B2</td> </tr> <tr><td>C1 </td> <td>C2</td> </tr> </table>
在您的浏览器中显示的表格应该与前面所示的图表非常相似。
您可以为表格分配许多属性。接下来将讨论允许您以多种创意方式格式化表格的标签。
在下一节中,我们将了解如何更改表格的背景颜色。