《任务1 HTML-table》任务产出汇总

任务地址

https://bbs.excellence-girls.org/topic/62/%E4%BB%BB%E5%8A%A11-html%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5%E5%92%8C%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%BA%AFhtml%E7%9A%84%E8%AF%95%E5%8D%B7%E9%A1%B5%E9%9D%A2-2%E5%91%A8

完成时间

2016-11-30

任务要求的作业

<table border="1">
    <caption>购物车</caption>
    <tr>
        <th rowspan="2" span="2">名称</th>
        <th colspan="2" span="2">2016-11-29</th>
        <th rowspan="2" pan="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" span="3">总价</th>
        <td>27元</td>
    </tr>
</table>

运行结果：

table.png

任务总结

知识总结

表格 table
表格的标题<caption>我的标题</caption>
行 tr
表头 th
数据 td
空表框 td td/(不会显示表框) td &nbsp；td就会显示表框
跨行 <th rowspan="2">两行
跨列 <th colspan="2">两列算在第一行
单元格边距 <table border="1" cellpadding="10">
单元格间距<table border="1" cellspacing="10">
表格单元中的排列，靠左右<td align="left">××</td>

任务体会

这次任务是关于表格的，看到这个表格主要还是层次的问题，然后就是跨行跨列，我大概用了三分钟完成。但是由于我记反了rowspan与colspan所以修改花了一点时间。跨行虽然是在一列占的位置大，但其实是占行数多，跨列同理，这样就不会记错了。