Table

1.作业内容

表格.png

2.定义相关用法

 <table> 标签定义 HTML 表格。
 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

3.练习

a.先实现出5行4列的表格

    <table border="1" >    
          <caption>购物车</caption>   
         <tr>        
                <td >名称</td>        
                <td >2016-11-22</td>        
                <td ></td>        
                <td >小计</td>   
       </tr>   
       <tr>        
                <td ></td>        
                <td >重量</td>        
                <td >单价</td>        
                <td ></td>    
        </tr>    
        <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 >总价</td>        
               <td></td>        
               <td></td>        
               <td>27元</td>    
    </tr>
</table>

运行结果

b.合并单元格且内容居中

  rowspan = "value" 属性规定单元格可横跨的行数。
  colspan = "value" 属性规定单元格可横跨的列数。
  value = 1、2、3..... 表示横跨的行数或列数
  align = "center"  使得内容居中

c. 改进

 <table border = "1" >    
          <caption> 购物车 </caption>   
         <tr>        
                <td  rowspan = "2" >  名称 </td>        
                <td  colspan = "2" > 2016-11-22 </td>               
                <td  rowspan = "2" > 小计 </td>   
       </tr>   
       <tr>        
                   
                <td > 重量 </td>        
                <td > 单价 </td>        
            
        </tr>    
        <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" align = "center"> 总价 </td>          
              <td> 27元 </td>    
    </tr>
</table>

运行结果

补充：<th>替换<td>表格中的文字将以粗体显示,常用表头。