HTML 设置表格行高

在本文中，我们将介绍如何使用HTML设置表格的行高。

阅读更多：HTML 教程

什么是HTML表格？

HTML表格是由行（row）和列（column）组成的网页元素，用于展示和组织数据。在HTML中，可以使用

table>元素来创建表格，并使用

元素定义表格的行，使用

元素定义行中的单元格。

HTML设置表格行高

HTML提供了多种方式来设置表格行的高度。下面我们将详细介绍这些方式。

使用行高属性

在HTML中，可以使用行高（height）属性来设置表格行的高度。行高属性可以在

元素中使用，并通过设置具体的像素值或百分比值来定义行高。

示例代码如下所示：

<table>
  <tr style="height: 50px;">
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr style="height: 30%;">
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

在上面的示例中，第一行的行高设置为50像素，第二行的行高设置为父元素高度的30%。

使用CSS样式表

除了行高属性，还可以通过CSS样式表来设置表格行的高度。可以为表格的行定义一个特定的类（class）或ID，并在样式表中对该类或ID进行样式定义。通过CSS样式表，可以更加灵活地控制行高的设置。

示例代码如下所示：

<style>
  .row1 {
    height: 50px;
  }
  .row2 {
    height: 30%;
  }
</style>

<table>
  <tr class="row1">
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr class="row2">
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

在上面的示例中，通过定义类“row1”和“row2”，并在CSS样式表中设置相应的行高，实现了对表格行高的设置。

使用表格样式属性

同时，还可以使用CSS中的表格样式属性来设置表格行的高度。使用表格样式属性时，需要使用“border-collapse: collapse;”属性来确保表格行高属性生效。

示例代码如下所示：

<style>
  table {
    border-collapse: collapse;
  }
  table td {
    padding: 10px;
  }
</style>

<table style="height: 100px;">
  <col style="height: 30px;" />
  <col style="height: 50%;" />
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

在上面的示例中，通过设置表格样式属性“height”，实现了对整个表格以及单个行的高度设置。