表格是网页中常用的一种元素,用于展示数据和信息。在HTML 5中,可以使用一些新的标签来创建和设计表格。在本教程中,将重点介绍HTML 5中表格的结构和标签。

表格结构

一个基本的表格结构包含以下几个部分:

  1. <table>:用来定义整个表格。
  2. <thead>:用来定义表格的标题行。
  3. <tbody>:用来定义表格的主体内容。
  4. <tr>:用来定义表格的行。
  5. <th>:用来定义表格的标题单元格。
  6. <td>:用来定义表格的数据单元格。

示例代码

下面是一个简单的表格示例,包含一个标题行和两行数据内容:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

表格样式

在HTML 5中,可以使用CSS来为表格添加样式,包括设置边框、背景色、文字对齐等。例如,可以通过以下CSS代码来为表格添加边框和设置单元格文字居中:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  text-align: center;
}

总结

通过本教程,你应该了解到HTML 5中表格的基本结构和标签的使用方法,以及如何通过CSS来为表格添加样式。继续学习和实践,你将能够创建出更加复杂和美观的表格。