开始使用 HTML 制作简单的表格

HTML 表是迄今为止创建的最好的 HTML 语句之一。 使用表格语句格式化网页的能力令人惊叹！ 学习他们，使用他们，爱他们！

基本表：

让我们把我们在列表教程中使用的杂货清单做成一个表格。 我们将把商品放在第一列，将价格放在第二列。

这是实现它的代码。 实际代码在左边，英文描述在右边。 描述缩进以显示表语句的“结构”。

使困惑？ 好的，让我们看看上面的表格。 这个表其实很简单。 你建立表格的方式与阅读书籍的方式非常相似； 从左到右，从上到下。 表格以<table>标记开始，以</table>标记结束。 每行以<tr>标记开始，以</tr>标记结束。 每条表数据都以<td>标记开始，以</td>标记结束。

但是，那不是一张桌子，你说！ 它没有边框！ 其实就是一张桌子。 这是一个没有边框或BORDER=”0″的表格。 当您想使用TABLE语句来格式化您的网页时，这个概念非常重要。 你并不总是想要一个厚边框。 好的，这次让我们用BORDER制作一张桌子。

此表与上一个表之间的唯一区别是<table>语句，如下所示。

<表格边框=”7″>

很容易吧？ 边框的大小以像素表示。 好的，现在让我们来多一点CELLSPACING 。 这是我们表格单元格之间的间距。 您也可以将其视为表格单元格之间的壁厚。

那看起来好多了。 你能看到差别吗？ 同样，唯一的变化是在<table>语句中，如下所示。

<表格边框=”7″ 单元格间距=”7″>

CELLSPACING与BORDER一样，也以像素为单位。 但是，你说，文字看起来太靠近桌墙了！ 好的，好的，我们也可以解决这个问题。 它被称为CELLPADDING 。 它是细胞内容物和细胞壁边缘之间的空间。

啊，现在是你想要的方式吗？ 不？ 好吧，我不得不夸大一些数字，但这只是为了说明一点。 我希望你能看到不同之处。 上一个表是使用如下所示的<table>语句创建的。

<表格边框=”7″ 单元格间距=”7″ 单元格填充=”7″>

构图：

现在我们想进入更有趣的东西。 构图是增强图片的好方法。 这让他们似乎直接跳出页面。 这是我的5秒杰作。

很酷的艺术品，它甚至让我讨厌的照片看起来不错。 这是实现它的代码。

<表格边框=”7″ alt=””>
<tr>
<td><img src=”image.gif”></td>
</tr>
</table>

如果您愿意，可以省略<tr>标签和</tr>标签。 它仍然可以正常工作。 HTML 纯粹主义者可能会争辩说这些标签需要在那里。 如果您像我通常那样有这种感觉，请使用它们。

或者您也可以使用如下所示的文字框住您的图片。

内托，哈！ 代码如下所示。

<表格边框=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=””></td>
<td>真是一个<br>杰作！</td>
</tr>
</table>

我还有一个关于构图的注意事项。 如果您在将图像居中时遇到问题，请尝试以下操作。

<td align=”center”><img src=”image.gif”></td>

装帧链接：

您还可以将链接放在表格中。 事实上，如果你愿意的话，你可以将整个页面放在一堆表格命令中，并且使用BORDER=”0”没有人能真正分辨出来。 你问为什么要这样做？ 用于在您的页面上将图像和文本一起格式化； 想想看。 好的，回到链接框架。

这是执行此操作的代码。

<表格边框=”7″ cellpadding=”10″>
<tr>
<td><a href=”http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>雅虎！</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">JJW 设计</a></td>
<td><a href=”http://www.iproundup.com/”>IP 综述</a></td>
</tr>
</table>

好吧，我希望你喜欢<table>语句的这一小节。 您可以使用<table>语句做的事情比本教程所能做的要多得多。 不过，我希望这有所帮助。

链接到本教程！

您觉得本教程有帮助吗？ 如果是这样，请帮助我通过链接与他人分享。 只需将下面的 HTML 代码放到您自己的网页上即可创建指向本教程的链接。