如何在HTML中显示表格主体-猿码集

介绍

HTML中的表格是一种用于展示数据的可视化形式，是网页设计可以用来显示各种数据的常见方式。表格由行与列组成，每个单元格都可以包括一些文本、图片或链接等元素。本文将介绍如何在HTML中显示表格主体。

HTML中的表格标签

在HTML中，用于创建表格的标签是<table>。在其中，每行用<tr>标签表示，每个单元格则用<td>标签表示。除此之外，还有一些其他的标签用于修饰表格的样式，例如<th>、<thead>、<tbody>和<tfoot>等。下面我们将详细介绍这些标签的用法。

表格基本结构

一个基本的HTML表格需要使用三个基本标签：table、tr和td。


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

以上代码将会生成一个含有两列和两行的表格。

表格标题

使用标签<caption>可以为表格添加标题：


<table>
  <caption>这是一个表格标题</caption>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

以上代码会生成一个带标题的表格。

表头和表体

一个表格通常包括表头和表体。表格表头使用标签<thead>表示，而表体使用标签<tbody>表示。表头和表体标签都可以有多个行 (<tr>)。下面的代码演示了如何创建一个包含表头和表体的表格:


<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
    </tr>
  </tbody>
</table>

以上代码将会生成一个包含表头和表体的表格。

表格尾部

表格尾部可使用标签<tfoot>进行表示。与表头和表体相似，表格尾部也可有多行 (<tr>)。下面的代码演示了如何创建一个包含表头、表体和表尾的表格：


<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾1</td>
      <td>表尾2</td>
    </tr>
  </tfoot>
</table>

以上代码将会生成一个包含表头、表体和表尾的表格。

表格样式

可以在HTML和CSS中对表格进行样式设置。下面是一些基本的表格样式的选项：

表格行边框

使用CSS为表格添加行边框非常简单。如下所示：


table, td, th {
  border: 1px solid black;
}

这个CSS选择器适用于所有的<table>、<td>、以及<th>元素，并为它们添加了一个1像素的实线边框。

表格单元格对齐

表格单元格中的内容可以通过使用 CSS 的 text-align 属性进行对齐。


td {
  text-align: center;
}

以上的 CSS 代码将表格单元格中的内容居中对齐。

表格宽度和高度

表格宽度和高度可以通过CSS的宽度和高度属性进行设置。如果要设定表格的宽度和高度，可以用如下所示的CSS代码：


table {
  width: 100%;
  height: 100%;
}

这个CSS属性选择器适用于所有的<table>元素，并将其宽度和高度设置为100%。

表格间距与边框

将表格与其他元素保持一定的距离以及设置边框，可以使用CSS中的margin和border属性，使用如下所示的CSS：


table {
  margin: 10px auto;
  border-collapse: collapse;
}
table th, td {
  border: 1px solid #ccc;
  padding: 10px;
}
table th {
  background-color: #eee;
}

以上代码会将表格与其他元素保持10个像素的距离，同时给每个单元格设置1像素宽的边框，单元格内的内容则有10像素的内边距。表头还将具有淡灰色背景色。

总结

本文介绍了如何在HTML中显示表格主体的方法以及如何使用CSS对表格样式进行设置。如果您需要在网页中展示数据，表格可以是一个非常有用的工具。在制作表格时，我们需要选择使用哪些HTML标签和CSS属性来完成我们想要实现的功能。

如何在HTML中显示表格主体

介绍