html表格tr th td

在HTML（HyperText Markup Language，超文本标记语言）中，<tr> 标签用于定义表格中的一行，一个空的表格可以通过使用 <tr> 和 <td> （或 <th>）标签来创建，即使没有内容填充，这些标签也是必须的，以保持表格结构的完整性，以下是如何用 <tr> 制作一个空的表格的详细介绍。

创建基本表格结构

创建一个基本的HTML表格需要用到以下标签：<table>, <tr>, <td> 和 <th>。<table> 是表格的容器，<tr> 代表表格中的行，而 <td> 用于存放数据，<th> 通常用于表头。

<table border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

上述代码将生成一个2x2的空表格，border="1" 属性为表格添加了边框，以便我们可以看到表格的轮廓。

添加更多行和列

要增加更多的行和列，只需添加更多的 <tr> 和 <td> 标签，要创建一个3行4列的空表格，可以这样写：

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

使用标题行 <th>

通常，表格的第一行用作标题行，这可以通过替换 <td> 标签为 <th> 来实现。<th> 标签不仅用于定义表头单元格，还会自动加粗显示文字，使其更加醒目。

<table border="1">
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

样式化表格

虽然本例中的表格是空的，但在实际的网页设计中，我们可能会对表格进行样式化，可以使用CSS来改变边框颜色、单元格背景色、文字颜色等。

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: f2f2f2;
  }
</style>
<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

在这个例子中，<style> 标签包含了一些CSS规则，它们改变了表格的外观。border-collapse: collapse; 确保了表格的边框不会重叠或间隔。padding: 8px; 给单元格增加了内边距，使它们看起来不那么拥挤。text-align: center; 将单元格内容居中。

相关问题与解答

Q1: 如果我想创建一个具有不同数量列的表格，我该如何修改 <tr> 和 <td> 标签？

A1: 你可以根据需要增减每个 <tr> 内的 <td> 标签数量来控制每行的列数，若想创建一行只有两列的表格，只需在该 <tr> 内放置两个 <td> 标签即可。

Q2: 如何使表格中的文本居左而不是居中？

A2: 要改变单元格中文本的对齐方式，可以修改CSS规则中的 text-align 属性，将其值改为 left 即可使文本居左。

td {
  text-align: left;
}

通过调整HTML标签和CSS属性，你可以完全控制你的表格结构和外观，即使它们是空的。