HTML表格标签从入门到精通：轻松驾驭数据展示

演示代码：

<table border="1" cellpadding="5" cellspacing="0" width="300px">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

5. 表格对齐

表格的对齐方式可以使用align属性来指定，align属性的值可以是left、center或right，分别表示左对齐、居中对齐和右对齐。

演示代码：

<table border="1" cellpadding="5" cellspacing="0" width="300px" align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

6. 表格边框

表格的边框可以使用border属性来指定，border属性的值可以是数字或none，数字表示边框的宽度，none表示没有边框。

演示代码：

<table border="1" cellpadding="5" cellspacing="0" width="300px">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

<table border="0" cellpadding="5" cellspacing="0" width="300px">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

7. 表格合并单元格

表格的单元格可以使用colspan和rowspan属性来合并，colspan属性指定单元格所占用的列数，rowspan属性指定单元格所占用的行数。

演示代码：

<table border="1" cellpadding="5" cellspacing="0" width="300px">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td colspan="2">张三</td>
    <td>男</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
  <tr>
    <td>26</td>
    <td>女</td>
  </tr>
</table>

8. 表格样式

表格的样式可以使用CSS来定义，可以使用border、padding、margin等属性来设置表格的边框、内边距和外边距，也可以使用background-color属性来设置表格的背景颜色。

演示代码：

<style>
table {
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
  background-color: #ffffff;
}

th {
  background-color: #f0f0f0;
  text-align: center;
}

td {
  text-align: center;
}
</style>

<table border="1" cellpadding="5" cellspacing="0" width="300px">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

结语：

通过本篇文章的介绍，相信您已经对HTML表格标签有了深入的了解，希望您能够灵活运用这些知识来构建出美观实用的表格，让您的网页更加清晰易读。

猜你喜欢

AI推送时光机

HTML表格标签从入门到精通：轻松驾驭数据展示

后端开发2024-02-11

首页课程

资料下载问答资讯