簡單解析表格table標簽的用法

1.表格加上邊框并且效果如下圖所示:

cellspacing(單元格間距): 表格邊框與單元格的邊框之間的縫隙

cellpadding(單元格邊距): 單元格內容與單元格邊框之間的距離

這兩個屬性默認是有值的,當設置border它會顯化出來

因此要使表格是單層框線(如上圖所示的效果)的話,

那么它編寫的代碼應該如下所示:

<table cellspacing="0px" cellpadding="0px" border="1px">
    
</table>

2.表格如何合并列

關鍵屬性為:colspan(合并幾個colspan的值就為幾)

思想:

? 1.在合并開始位置(i)單元格設置colspan=“合并個數”

? 2.從合并開始位置的后一個位置起,把與合并開始位置保證同一行(tr中的第i+1個位置)的那個單元格去掉.直到去掉到合并的最后一個位置

<table cellspacing="0px" cellpadding="0px" border="1px">
    <tr>
        <!-- 第一行的三個單元格合并-->
        <td colspan="3"></td>
    </tr>
     <tr>
        <!-- 第二行的前兩個單元格合并-->
        <td colspan="2"></td>
        <td></td>
    </tr>
     <tr>
        <!-- 第三行的后兩個單元格合并-->
        <td></td>
        <td colspan="2"></td>
    </tr>
</table>

? 顯示效果如下圖所示

3.表格如何合并行

關鍵屬性為:rowspan(合并幾個rowspan的值就為幾)

思想:

? 1.在合并開始位置(i)單元格設置rowspan=“合并個數”

? 2.從合并開始位置的后一個位置起,把與合并開始位置保證同一行(tr中的第i個位置)的那個單元格去掉.直到去掉到合并的最后一個位置

<table cellspacing="0px" cellpadding="0px" border="1px">
  <tr>
     <td rowspan="2" height="200px">友愛</td>
     <td height="100px">友愛</td>
     <td rowspan="3" height="300px">友愛</td>
  </tr>
  <tr>
     <td rowspan="2" height="200px">友愛</td>
  </tr>
  <tr>
     <td height="100px">友愛</td>
  </tr>
</table>

? 顯示效果如下圖所示

4.表格如何保證文件文字居中

<!-- 
   對每一行的tr設置align=center(默認為left)
      設置tr會對里面所有的td生效
   對每一行的tr設置valign=middle(默認為middle,還有top,bottom兩個屬性)
-->
<tr align=center>
    <td>12</td>
    <td>13</td>
    <td>14</td>
</tr>