美文网首页
html实现一个简单表格

html实现一个简单表格

作者: Gotogo | 来源:发表于2016-12-07 21:13 被阅读0次

目标效果

目标效果

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>

相关文章