table表格（实例）：跨行跨列布局

最新推荐文章于 2025-05-13 14:19:17 发布

duc_?

最新推荐文章于 2025-05-13 14:19:17 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html css 文章标签：随堂笔记

本文链接：https://blog.csdn.net/qq_40662457/article/details/95217654

css 同时被 2 个专栏收录

10 篇文章

订阅专栏

html

6 篇文章

订阅专栏

这篇博客介绍了HTML中创建表格的基本元素，包括thead、tbody、tfoot、tr、td和th。同时，详细讲解了如何通过cellspacing和cellpadding设置单元格间距和内边距，以及使用border设定表格边框。此外，重点阐述了colspan和rowspan属性，用于实现单元格的跨列和跨行效果，以达到复杂布局的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格 table

表头 thead

表体 tbody

表尾 tfoot

行 tr

列 td

列 th

表格属性
cellspacing: 单元格与单元格之间的间距
cellpadding: 单元格的内边距
border: 1 表格边框大小
width: 表格宽度

单元格属性
colspan: 单元格跨列
rowspan: 单元格跨行

如图：

 
  <!-- 表格 -->
  <table border="1" cellspacing="0" cellpadding="10">

    <!-- 表头 -->
    <thead>
      <!-- 行 -->
      <tr>
        <th width="100">序号</th>
        <th width="100">地区</th>
        <th width="100">销售金额</th>
        <th width="100">备注</th>
      </tr>
    </thead>

    <!-- 表体 -->
    <tbody>
      <tr>
        <td>1</td>
        <td colspan="2">华北</td>
        <td>暂无</td>
      </tr>
      <tr>
          <td>2</td>
          <td rowspan="2" colspan="2">华南</td>
          <td>暂无</td>
        </tr>
        <tr>
            <td>3</td>
            <td>暂无</td>
          </tr>
    </tbody>

    <!-- 表脚 -->
    <tfoot>
      <tr>
        <td>12</td>
        <td>23</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </tfoot>

  </table>