HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT

当我们创建HTML表格时，宽度和高度是非常重要的属性。对于我们的表格，确保它们的大小是正确的可以让它们更好地适应我们的页面和数据。在本教程中，我们将重点讲解HTML表格的宽度和高度属性。

WIDTH属性

语法格式

<td width="pixels">内容</td>

说明

WIDTH属性定义了单元格的宽度，可以用像素或百分比来定义。像素可以确切地指定单元格的宽度，而百分比会基于父元素的宽度来确定单元格的宽度。

示例

下面是一个实例，展示如何使用WIDTH属性定义表格单元格的宽度：

<table border="1">
  <tr>
    <th>名称</th>
    <th>类型</th>
    <th>描述</th>
  </tr>
  <tr>
    <td width="100px">姓名</td>
    <td width="50%">文本</td>
    <td width="200px">用户的姓名</td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>数字</td>
    <td>用户的年龄</td>
  </tr>
</table>

在上面的示例中，第一排都使用了TH标记进行定义，TH用于定义表格头部单元格（标题单元格）。接下来的每一行都使用TD标记定义表格单元格，通过使用WIDTH属性为每个单元格指定宽度，以确保它们是正确的大小。

HEIGHT属性

语法格式

<td height="pixels">内容</td>

说明

HEIGHT属性定义了单元格的高度，可以用像素或百分比来定义。像素可以确切地指定单元格的高度，而百分比会基于父元素的高度来确定单元格的高度。

示例

下面是一个实例，展示如何使用HEIGHT属性定义表格单元格的高度：

<table border="1">
  <tr>
    <th>名称</th>
    <th>类型</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>文本</td>
    <td height="50px">用户的姓名</td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>数字</td>
    <td>用户的年龄</td>
  </tr>
</table>

在上面的示例中，我们使用HEIGHT属性定义了第二行的第三个单元格（即用户的姓名）的高度为50像素。这将使它比其他单元格更高，以便在显示文本时更容易阅读。

通过使用WIDTH和HEIGHT属性，我们可以更好地控制表格的大小和布局。现在，你已经掌握了HTML表格的宽度和高度属性。