HTML实现表格

任务内容

用html实现以下内容

任务拆分

  • 显示表格
  • 合并单元格

<table>学习

在w3school学习了一下<table>,感觉受益匪浅。

实现任务

  • 显示表格
    代码如下:
<table border="1">
    <caption>购物车</caption>
    <tr>
        <td>名称</td>
        <td>2016-11-22</td>
        <td>小计</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>重量</td>
        <td>单价</td>
        <td></td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>2公斤</td>
        <td>6元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <td>总价</td>
        <td>27元</td>
        <td></td>
        <td></td>
    </tr>
</table>

显示效果:

  • 合并单元格
    代码如下:
<table border="1">
    <caption>购物车</caption>
    <tr>
        <td rowspan="2">名称</td>
        <td colspan="2">2016-11-22</td>
        <td rowspan="2">小计</td>
    </tr>
    <tr>
        <td>重量</td>
        <td>单价</td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>2公斤</td>
        <td>6元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <td colspan="3">总价</td>
        <td>27元</td>
    </tr>
</table>

显示效果:


总结

分解任务还是很重要

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 下面我们来完成下图表格的效果 Step 1 通过学习,可以得出如下结构图: Step 2 标题是:“购物车”,表头...
    杨慧莉阅读 497评论 1 2
  • 在上一篇文章中我们介绍了列表的实现,戳这里列表实现。在网页中,我们经常能看到各式各样的表格,所以我们就来学习一下表...
    TW张苗阅读 449评论 3 2
  • 一个简单表格的创建 创建一个HTML表格需要三个元素,这三个元素结合使用就可以创建一个HTML表格。第一个元素用来...
    落花的季节阅读 397评论 1 1
  • PMP第五版考点汇总冲刺版 第一章引论 P2:《PMI道德与专业行为规范》详细描述从业者在责任、尊重、公正、诚实方...
    文小梦阅读 21,142评论 5 102
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,184评论 6 13