首页 > 好文分享 > 技术教程内容详情
久久优惠网

table表格(实例):跨行跨列布局

2020-12-15 16:44:51 技术教程

表格 table

表头 thead

表体 tbody

表尾 tfoot

行 tr

列 td

列 th

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

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

如图:

table表格(实例):跨行跨列布局


<!-- 表格 -->
  <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>

相关标签: table表格 跨行跨列布局

发布评论