美文网首页
html表格

html表格

作者: 张鸽 | 来源:发表于2017-05-17 22:05 被阅读0次

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>

运行图：


相关文章