html 表格单元格的宽度和高度的设置方法

HTML 表格是一种常用的网页元素，用于展示数据和信息。在表格中，单元格的宽度和高度是非常重要的属性，可以影响表格的布局和样式。下面是关于 HTML 表格单元格宽度和高度设置的完整攻略。

1. 单元格宽度的设置方法

单元格宽度可以使用 HTML 的 width 属性来设置。width 属性可以设置单元格的宽度，可以使用像素、百分比或者其他单位来指定宽度的大小。下面是一个示例：

<table>
  <tr>
    <td width="100">单元格1</td>
    <td width="50%">单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 width 属性分别设置了三个单元格的宽度。第一个单元格的宽度为 100 像素，第二个单元格的宽度为表格宽度的一半，第三个单元格的宽度则由内容自适应。

除了使用 width 属性，还可以使用 CSS 样式来设置单元格的宽度。例如：

<style>
  td {
    width: 100px;
  }
</style>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 CSS 样式设置了所有单元格的宽度为 100 像素。

2. 单元格高度的设置方法

单元格高度可以使用 HTML 的 height 属性来设置。height 属性可以设置单元格的高度，可以使用像素、百分比或者其他单位来指定高度的大小。下面是一个示例：

<table>
  <tr>
    <td height="100">单元格1</td>
    <td height="50%">单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 height 属性分别设置了三个单元格的高度。第一个单元格的高度为 100 像素，第二个单元格的高度为表格高度的一半，第三个单元格的高度则由内容自适应。

除了使用 height 属性，还可以使用 CSS 样式来设置单元格的高度。例如：

<style>
  td {
    height: 100px;
  }
</style>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 CSS 样式设置了所有单元格的高度为 100 像素。

3. 示例说明

下面是两个示例说明，分别是使用 HTML 属性和 CSS 样式设置单元格宽度和高度的示例。

示例一：使用 HTML 属性设置单元格宽度和高度

<table>
  <tr>
    <td width="100" height="50">单元格1</td>
    <td width="50%" height="100">单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 HTML 的 width 和 height 属性分别设置了三个单元格的宽度和高度。

示例二：使用 CSS 样式设置单元格宽度和高度

<style>
  td {
    width: 100px;
    height: 50px;
  }
</style>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

上述代码中，使用 CSS 样式设置了所有单元格的宽度为 100 像素，高度为 50 像素。