任务二

作者: KoalaT | 来源:发表于2016-11-23 16:19 被阅读38次

    任务完成前

    • 同样是接上一个任务
    • 任务的题目如下:
    作业题目.png
    • 估时:5mins
    • 我的思考:采用caption,table,tr,th,td,thead,tbody标签,名称,2016-11-22,小计,总价需要采用rowspan,colspan,其中,rowspan是合并两个竖行,colspan是合并两个横行

    开始写代码

    <!DOCTYPE html><html lang="en">
      <head>    
        <meta charset="UTF-8">    
        <title>Title</title>
     </head>
     <body>    
        <table border="1">        
           <caption>购物车</caption>        
              <thead>            
                 <tr>                
                  <th rowspan="2">名称</th>                
                  <th colspan="2">2016-11-22</th>                
                  <th rowspan="2">小计</th>            
              </tr>            
              <tr>               
                 <th>重量</th>                
                  <th>单价</th>            
              </tr>        
          </thead>       
          <tbody>           
               <tr>                
                <td>苹果</td>               
                <td>3公斤</td>                
                <td>5元/公斤</td>                
                <td>15元</td>            
              </tr>            
              <tr>                
                 <td>香蕉</td>                
                <td>2公斤</td>                
                <td>6元/公斤</td>                
                <td>12元</td>            
              </tr>            
              <tr>                
                  <td colspan="3" style="text-align: center">总价</td>   
                  <td>27元</td>                                                                        
            </tr>        
            </tbody>    
        </table>
    </body>
    </html>
    
    我的代码.png

    任务完成

    • 用时:14mins
    • 分析原因:对制表可能没有理解的很深,但自己觉得开了codefordream上的东西已经理解了,所以导致我估时不准。
    • 总价那里我使用了css的字体居中,但是老师似乎要求不使用css,在这里是一个问题。

    相关文章

      网友评论

      • 6d96978eeefb:赞估时!这个作业写的非常棒。

        关于居中那块儿,不要使用css,直接使用html中提供的属性

      本文标题:任务二

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