html5 table怎么用

HTML5表格(<table>标签)是网页中常用的一种数据展示方式，它可以让我们以结构化的方式呈现数据，方便用户阅读和理解，本文将详细介绍HTML5表格的基本用法，包括创建表格、设置表格样式、添加表格行和列等。

创建表格

要使用HTML5表格，首先需要在HTML文档中插入<table>标签。<table>标签有多个属性，如border、cellpadding和cellspacing等，用于控制表格的边框、单元格内边距和单元格间距等样式，下面是一个简单的表格示例：

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

在这个示例中，我们创建了一个包含两列(姓名和年龄)的表格，表头使用<th>标签表示，表格内容使用<tr>标签表示行，单元格内容使用<td>标签表示。

设置表格样式

除了基本的结构，我们还可以为表格添加一些样式，以提高页面的美观度，以下是一些常用的表格样式属性：

1、width:设置表格宽度。

2、height:设置表格高度。

3、background-color:设置表格背景颜色。

4、color:设置表格文字颜色。

5、border:设置表格边框。

6、border-collapse:设置表格边框合并方式。

7、border-spacing:设置表格单元格间距。

8、text-align:设置表格文字对齐方式。

9、vertical-align:设置表格单元格垂直对齐方式。

10、font-family:设置表格文字字体。

11、font-size:设置表格文字大小。

12、padding:设置单元格内边距。

13、margin:设置单元格外边距。

以下是一个带有样式的表格示例：

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
  tr:nth-child(even) {
    background-color: f2f2f2;
  }
</style>
<table>
  <tr>
    <th style="text-align: left;">姓名</th>
    <th style="text-align: left;">年龄</th>
  </tr>
  <tr>
    <td style="text-align: left;">张三</td>
    <td style="text-align: left;">25</td>
  </tr>
  <tr>
    <td style="text-align: left;">李四</td>
    <td style="text-align: left;">30</td>
  </tr>
</table>

在这个示例中，我们使用了内联CSS样式来设置表格的宽度、边框、背景颜色等样式，我们还使用了伪类选择器(如nth-child(even))来为偶数行设置背景颜色。

添加表格行和列

要向表格中添加新的行或列，可以使用<tr>和<td>标签分别表示行和单元格，以下是一个添加新行和列的示例：

<table border="1">
  <tr>
    <th>姓名</th>
  </tr>
</table> <!-这是第一行 -->
<table border="1"> <!-这是第二行 -->
</table> <!-这是第二行的内容 -->