html表格

html实现下面的表格



我们可以看到表格中包括:
标题--caption
5行4列
跨行,跨列--在此用到colspan和rowspan
字体加粗--th
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <caption>购物车</caption>
    <tr>
        <th rowspan="2">名称</th>
        <th colspan="2">2016-11-22</th>
        <th rowspan="2">小计</th>
    </tr>
    <tr>
        <th>重量</th>
        <th>单价 </th>
    </tr>
    <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>
    <tr>
        <th colspan="3">总价</th>
        <td>27元</td>
    </tr>
</table>

</body>
</html>

运行图:


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

推荐阅读更多精彩内容

  • 本周学习内容:HTML表格第一章至第四章 HTML表单第一章至第四章 注:1.在搭建谷歌...
    Persistence敏捷阅读 4,012评论 0 1
  • 2017-09-07摘抄自W3school-HTML 表格希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自...
    moralok阅读 2,767评论 0 0
  • 下面我们来完成下图表格的效果 Step 1 通过学习,可以得出如下结构图: Step 2 标题是:“购物车”,表头...
    杨慧莉阅读 3,401评论 1 2
  • 表格的标签 :表格由 标签来定义。 : 每个表格均有若干行,由 标签定义。 : 表格内,每行被分割为若干单元格...
    qin7zhen阅读 3,437评论 0 2
  • 请大家指正
    须弥山颠阅读 1,850评论 0 1

友情链接更多精彩内容