表格

表格

 <table>表格最外层容器
 <tr>定义表格行
 <th>定义表头
 <td>定义表格单元
 <caption>定义表格标题

表格的html属性：
width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
bordercolor=“边框色”
cellpadding=“单元格与内容之间的距离”
cellspacing=“单元格与单元格之间的间距”
align=“表格水平对齐方式” left / center /right
valign=“垂直对齐” top / middle / bottom
bgcolor=“背景颜色”

<table border="2"  cellspacing="4" bordercolor="red">  /!-- cellspacing默认有间距，可令其为0去掉 --/
        <tr height="70" align="center" bgcolor="bisque">
            <td width="150" >左右居中 </td>
            <td width="150"> 左右居中 </td>
            <td width="150"> 左右居中 </td>
        </tr>
        <tr height="70"  align="left" bgcolor="bisque">
            <td width="150"> 默认(左对齐) </td>
            <td width="150"> 默认(左对齐)</td>
            <td width="150"> 默认(左对齐)</td>
        </tr>
        <tr height="70" align="right" bgcolor="bisque">
            <td width="150">右对齐   </td>
            <td width="150">右对齐  </td>
            <td width="150">右对齐  </td>
        </tr>  
        <tr height="70" valign="top">
            <td width="150"> 上对齐 </td>
            <td width="150"> 上对齐</td>
            <td width="150"> 上对齐 </td>
        </tr>
        <tr height="70" valign="center">
            <td width="150">上下居中(默认) </td>
            <td width="150">上下居中(默认)</td>
            <td width="150">上下居中(默认) </td>
        </tr>
        <tr height="70"  valign="center">
            <td width="150"> 下对齐 </td>
            <td width="150"> 下对齐</td>
            <td width="150"> 下对齐 </td>
        </tr>
    </table>

<table border="1" cellspacing="0"> 
        <caption>表格标题</caption>  
        <tr height="50">
            <th colspan="3">定义表头 </th>
         <!-- 合并行，删除行上被合并单元格-->
        </tr>
        <tr height="50">
            <td width="120">单元格</td>
            <td width="120">单元格</td>
            <td width="120">单元格</td>
        </tr>
        <tr height="50">
            <td></td>
            <td></td>
            <td rowspan="2"></td> <!-- 合并2列 -->
        </tr>
        <tr height="50">
            <td ></td>
            <td ></td> 
                        <!-- 删除被合并单元格 -->
        </tr>
    </table>

语义化标签：<thead>  <tbody> <tfood>并不会对表格合并列产生影响，会对表格合并行产生影响
语义化更好，一个表格table中，只能有一个thead 和 tfoot 但可以有多个tbody

<table border="1" cellspacing="0"> 
        <caption>表格标题</caption>  
        <thead height="50">
            <th colspan="3">定义表头 </th>
         <!-- 合并行，删除行上被合并单元格-->
        </thead>
        <tbody height="50">
            <td width="120">单元格</td>
            <td width="120">单元格</td>
            <td width="120">单元格</td>
        </tbody>
        <tbody height="50">
            <td></td> 
            <td></td> 
            <td rowspan="2"></td> <!-- 合并2列 -->
        </tbody>
        <tfoot height="50">    
            <td></td>    
            <td></td>    
                        <!-- 删除被合并单元格 -->
     	</tfoot>
</table>