HTML5系列-table表格

最新推荐文章于 2024-09-26 20:38:32 发布

原创最新推荐文章于 2024-09-26 20:38:32 发布 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#HTML5 #table表格

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中表格的基本使用方法，包括如何创建表格、表头、主体和尾部，以及如何进行单元格的水平和垂直合并，为网页设计提供实用指导。

1.基本使用

属性	说明
caption	表格标题
thead	表头部分
tbody	表格主体部分
tfoot	表格尾部

 <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>22</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>男</td>
            <td>19</td>
          </tr>         
        </tbody>
</table>

2.单元格合并

(1) 水平单元格合并

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>男</td>
            <td>22</td>
          </tr>
          <tr>
            <td colspan="3">王五 男 19</td>
          </tr>         
        </tbody>
      </table>

(2)垂直单元格合并

      <table border="1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">张三</td>
            <td>男</td>
            <td>22</td>
          </tr>
          <tr>
            <td>男</td>
            <td>19</td>
          </tr>
        </tbody>
      </table>