HTML 表格：如何用属性和实例制作美观易读的数据展示

梦梦贝莉雅 2023-06-12 14:07:25 浏览数 (2692)

反馈

当今的网页设计中，表格是一个至关重要的元素。HTML 表格可用于显示具有结构化信息的数据，并且它们可以被轻松地组织和定制。在本文中，我们将深入探讨 HTML 表格的用法、属性和实例。

首先，让我们来看一下如何创建一个基本的 HTML 表格。以下是一个简单的表格示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

在上面的代码中，<table> 标签用于定义一个表格，<tr> 标签用于定义表格中的行，而 <th> 和 <td> 标签则用于定义每个单元格中的内容。其中，<th> 标签表示表头单元格，<td> 标签表示普通单元格。

接下来，让我们来了解一些常用的表格属性。这些属性可以帮助您更好地控制表格的外观和行为。

border 属性：设置表格边框的宽度。
cellspacing 属性：设置单元格之间的间距。
width 和 height 属性：设置表格宽度和高度。
colspan 和 rowspan 属性：合并单元格，使其跨越多个行或列。
align 和 valign 属性：设置单元格中内容的对齐方式。

下面是一个应用了上述属性的表格示例：

<table border="1" cellspacing="0" width="60%" height="200">
  <tr>
    <th colspan="2" align="center">学生成绩表</th>
  </tr>
  <tr>
    <td rowspan="2" valign="middle" align="center">姓名<br>年龄</td>
    <td align="center">语文</td>
  </tr>
  <tr>
    <td align="center">数学</td>
  </tr>
  <tr>
    <td>小明<br>18</td>
    <td align="center">90</td>
  </tr>
  <tr>
    <td>小红<br>20</td>
    <td align="center">95</td>
  </tr>
</table>

在上面的代码中，我们为表格添加了边框、设置了单元格之间的间距、以及定义了表格的宽度和高度。我们还使用了 colspan 和 rowspan 属性来合并单元格，以及使用了 valign 和 align 属性来设置单元格中内容的对齐方式。

总的来说，在现代网页设计中，HTML 表格仍然是一个非常有用的工具。通过结合各种属性和实例，您可以轻松地制作出美观、易于阅读的表格。

如果你是HTML初学者，可以来试试HTML入门课程，零基础也能轻松学会！