html实现一个简单表格

目标效果

html标签

<tr>标签定义表格中的一行
<th>标签定义表格中的表头
<td>标签定义表格中的一列
<thead>标签定义表格的页头
<tbody>标签定义表格的主体
<tfoot>标签定义表格的页脚
rowspan和colspan属性分别设置表格的占用标准表格的几行和几列

详细的教程请点击这里：HTML Table学习

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
    </head>
    <body>
        <table border="1">
            <caption>购物车</caption>
            <thead>
                <tr>
                    <td rowspan="2">名称</td>
                    <td colspan="2">2016-11-22</td>
                    <td rowspan="2">小计</td>
                </tr>
                <tr>
                    <td>重量</td>
                    <td>单价</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>苹果</th>
                    <th>3公斤</th>
                    <th>5元/公斤</th>
                    <th>15元</th>
                </tr>
                <tr>
                    <th>香蕉</th>
                    <th>2公斤</th>
                    <th>6元/公斤</th>
                    <th>12元</th>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">总价</td>
                    <td>27元</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

最后编辑于：2017.12.05 00:25:02

html实现一个简单表格

目标效果

html标签

实现代码

推荐阅读更多精彩内容