HTML学习之表格

实现如下表格

分析:

该表格为五行四列,其中头部包括两行,内容为两行,最后一行为统计的内容;
  其中“名称”、“2016-11-22”、“重量”、“单价”、“小计”、“苹果”、“香蕉”、“总价”均加粗可视为标题,
  第一行中时间横跨两列,最后一行中“总价”横跨三列;
  第一行的“名称”竖跨两行,最后一列中的“小计”竖跨两行。

代码内容

<table border="1">
    <theader>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>
        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <th>苹果</th>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>
        <tr>
            <th>香蕉</th>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>
    </tbody>
    <tfoot>
        <th colspan="3">总价</th>
        <td>27元</td>
    </tfoot>
</table>

代码分析:

通过colspan以及rowspan实现跨列和跨行;
  使用th标签达到加粗的标题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在上一篇文章中我们介绍了列表的实现,戳这里列表实现。在网页中,我们经常能看到各式各样的表格,所以我们就来学习一下表...
    TW张苗阅读 3,192评论 3 2
  • 虽然这次作业仅仅只用到了ul和ol,对大部分大佬来说都十分简单,但作为大一的一个萌新,感觉有必要练习和学习,同时也...
    做笔记的地方阅读 4,253评论 3 4
  • 下面我们来完成下图表格的效果 Step 1 通过学习,可以得出如下结构图: Step 2 标题是:“购物车”,表头...
    杨慧莉阅读 3,405评论 1 2
  • 本节将为大家讲解 HTML 如何实现下图所示表格效果,先来看看最终实现效果吧! 新建 table.html 文件,...
    TW安洋阅读 10,262评论 0 0
  • 在HTML 中定义了表格布局。说到 table 标签,我们可以想到的大致有以下几个元素: 、 、 、 、 、 接下...
    斐硕人阅读 9,081评论 1 4

友情链接更多精彩内容