博客列表 >4月24日作业 (1)创建html表格合并

4月24日作业 (1)创建html表格合并

鲨鱼辣椒的博客
鲨鱼辣椒的博客原创
2019年04月24日 15:24:50582浏览

1. 完成表格的跨行合并功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并表格</title>
</head>
<body>
    <h3>合并表格</h3>
    <table border="1px" cellspacing="0px" cellpadding="10px" width="550px">
        <!--标题-->
        <caption>购物车</caption>
        <thead>
            <tr bgcolor="aqua">
                <th>编号</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>总金额</th>
                <th width="80">分类</th>
                <th width="160">操作</th>
            </tr>
        </thead>
        <!--表格主体-->
        <tbody align="center">
            <tr>
                <td width="25" >1</td>
                <td width="50">苹果</td>
                <td width="50">2个</td>
                <td width="55">5</td>
                <td width="60">10元</td>
                <td rowspan="2">水果</td>
                <td><a href="#">删除</a>|<a href="#">编辑</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>草莓</td>
                <td>2个</td>
                <td>10</td>
                <td>20元</td>
                <td><a href="#">删除</a>|<a href="#">编辑</a></td>
                <!--<td>分类</td>-->
            </tr>
            <tr>
                <td>3</td>
                <td>毛巾</td>
                <td>1个</td>
                <td>15</td>
                <td>15元</td>
                <td rowspan="3">日用品</td>
                <td><a href="#">删除</a>|<a href="#">编辑</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>牙刷</td>
                <td>1个</td>
                <td>10元</td>
                <td>10元</td>
                <td><a href="#">删除</a>|<a href="#">编辑</a></td>
                <!--<td>分类</td>-->
            </tr>
            <tr>
                <td>5</td>
                <td>被子</td>
                <td>1个</td>
                <td>200元</td>
                <td>200元</td>
                <td><a href="#">删除</a>|<a href="#">编辑</a></td>
                <!--<td>分类</td>-->
            </tr>
        </tbody>
        <tfoot align="center">
        <tr>
            <td colspan="2">合计:</td>
            <!--<td>被子</td>-->
            <td>7个</td>
            <td>240元</td>
            <td colspan="2">255元</td>
            <td><a href="#">计算</a></td>
            <!--<td>分类</td>-->
        </tr>
        </tfoot>
    </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议