美文网首页
HTML表格

HTML表格

作者: 杨慧莉 | 来源:发表于2017-02-05 22:55 被阅读0次

    下面我们来完成下图表格的效果


    table.png

    Step 1

    通过学习,可以得出如下结构图:

    表格.png
    注意:从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加
    从表格效果图中可以看出,整个表格由标题,表头,表项组成,其中存在单元格跨行和跨列,并且存在边框。

    Step 2

    标题是:“购物车”,
    表头是:“名称”,“重量”,“单价”,“小计”,“2016-11-22”,“苹果”,“香蕉”,“总价”。其中“名称”,“小计”纵向跨越2行,“2016-11-22”横向跨越2列,“总价”横向跨越3列。
    其余的是表项。
    可以看出需要完成的表格是5行4列

    Step 3

    按照如下步骤完成该表格。

    • 创建表格,并添加标题。代码如下:
    <table >
        <caption>购物车</caption>
    </table>
    
    • 为表格添加边框。代码如下:
    <table  border="1">
        <caption>购物车</caption>
    </table>
    
    • 形成5行4列的表格。代码如下:
    <table border="1">
        <caption>购物车</caption>
        <tr>
            <th>名称</th>
            <th>2016-11-22</th>
            <th></th>
            <th>小计</th>
        </tr>
        <tr>
            <td></td>
            <th>重量</th>
            <th>单价</th>
            <td></td>
        </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>总价</th>
            <td></td>
            <td></td>
            <td>27元</td>
        </tr>
    </table>
    

    执行效果如下:

    5行4列.png
    • 合并单元格,用colspan 和 rowspan。代码如下:
    <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>
    

    这样就完成该表格啦!
    代码点这里
    执行效果点这里

    相关文章

      网友评论

          本文标题:HTML表格

          本文链接:https://www.haomeiwen.com/subject/gjyeittx.html