HTML教程 #6：表格基础——学习如何创建HTML表格以展示数据

2023-06-30

摘要: 当使用 HTML 创建表格来展示结构化数据时，可以使用以下标签和属性：1. `table`：用于创建表格的容器。2. `tr`：用于定义表格的行。3. `th`：用于定义表格的表头单元格。4. `td`：用于定义表格的数据单元格。下面是 ...

当使用 HTML 创建表格来展示结构化数据时，可以使用以下标签和属性：

1. `<table>`：用于创建表格的容器。

2. `<tr>`：用于定义表格的行。

3. `<th>`：用于定义表格的表头单元格。

4. `<td>`：用于定义表格的数据单元格。

下面是一个简单的表格示例，展示了学生信息：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>孙尚香</td>
    <td>20</td>
    <td>85</td>
  </tr>
  <tr>
    <td>关羽</td>
    <td>22</td>
    <td>90</td>
  </tr>
  <tr>
    <td>蒙犽</td>
    <td>19</td>
    <td>78</td>
  </tr>
</table>

在这个例子中，`<table>` 标签用于创建表格容器。每一行使用 `<tr>` 标签定义，其中包含了表格的行数据。表头使用 `<th>` 标签定义，表格数据使用 `<td>` 标签定义。

可以通过添加更多的 `<tr>`、`<th>` 和 `<td>` 标签来扩展表格，并在其中填充具体的数据。

另外，可以使用 CSS 样式表来进一步自定义表格的样式，如调整边框、背景色、文本对齐等。以下是一个例子：

HTML 代码：

<table class="custom-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>明世隐</td>
    <td>20</td>
    <td>85</td>
  </tr>
  <tr>
    <td>王昭君</td>
    <td>22</td>
    <td>90</td>
  </tr>
  <tr>
    <td>老夫子</td>
    <td>19</td>
    <td>78</td>
  </tr>
</table>

CSS 代码：

.custom-table {
  border-collapse: collapse;
  width: 100%;
}

.custom-table th, .custom-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

.custom-table th {
  background-color: #f2f2f2;
}

在这个示例中，给 `<table>` 标签添加了一个名为 "custom-table" 的类名，以便在 CSS 中进行选择。

同时，在 CSS 中，使用 `.custom-table` 来选择这个表格，并设置了一些样式属性：

- `border-collapse: collapse;`：设置表格的边框合并在一起，使得表格边框更紧凑。

- `width: 100%;`：设置表格宽度为 100% ，使得表格占满其容器的宽度。

然后使用 `.custom-table th, .custom-table td` 选择器来选择表头和数据单元格，并设置了一些共同的样式属性：

- `border: 1px solid black;`：设置单元格边框为 1 像素宽的黑色实线边框。

- `padding: 8px;`：设置单元格内边距为 8 像素，增加单元格内容与边框之间的间距。

- `text-align: center;`：设置单元格内文本内容居中对齐。

最后，使用 `.custom-table th` 选择器来选择表头单元格，并设置了一个特定的样式属性：

- `background-color: #f2f2f2;`：设置表头单元格的背景颜色为浅灰色，实现背景色的自定义。

通过这些 CSS 样式，可以对表格进行进一步的样式定制，使其更符合自己的设计需求。可以根据需要调整这些样式属性，添加更多的样式规则，以实现自定义的表格样式。

查看全文

上一篇：HTML教程 #5：使用HTML标签和属性来创建并格式化HTML内容下一篇：HTML教程 #7：掌握表格标签（ table、tr、td）的使用方法

HTML教程 #6：表格基础——学习如何创建HTML表格以展示数据

相关阅读

热门文章