html5常用標簽table表格布局

一、總結

一句話總結：

 

 

二、html5常用標簽table表格布局

　用表格顯示信息調理清楚，使瀏覽者一目了然。表格在網頁中還有協助布局的作用，可以把文字、圖像等組織到表格的不同行列。那么，接下來我將講解一下表格的常用屬性。

 

1、首先，表格命令

 

　　表格的行：tr  每行中的列：td

　　表格的表頭：<th></th>  默認加粗，單元格居中（居中、加粗）

　　表格標題：caption

　　跨列：colspan，當某個格跨n列時，其右邊n-1個單元格需刪除

跨行：rowspan，當某個格跨n行時，其下方n-1個單元格需刪除（看每一行有幾個上邊線，有幾條畫幾個）

   

 

2、<table>標簽的常用屬性

 

1、border：給表格添加邊框，當border屬性增大時，只有外圍框線增加，單元格的邊框始終為1px（一個像素）

2、cellspacing：單元格與單元格之間的間隙距離。當cellspacing="0"，只會使單元格間隙為0，但不會合並邊框線。【表格邊框合並】，無需再寫cellspacing="0"。

3、cellpadding：每個單元格中的內容，與邊框線的距離。

4、weight/height：表格的寬高

5、align：表格在屏幕的左中右位置顯示，left、center、right（給表格加上align，相當於讓表格浮動，會直接打破表格后面元素的原有排列方式）

6、bgcolor：背景色    等同於

7、background：background="img/aaa.png"背景圖片     等同於，且背景圖會覆蓋背景色

8、bordercolor="blue"邊框顏色

以上都可以用樣式表代替

 

 

3、近者優先原則

 

　　當表格屬性與行列屬性沖突時，以行列屬性為准；

表格的align屬性，是控制表格自身在瀏覽器的顯示位置；行和列的align屬性，是控制單元格中文字在單元格的對齊方式

表格的align屬性，並不影響表格內，文字的水平對齊方式；tr和align屬性，可以控制一行中所有單元格的水平對齊方式。

caption：表格標題

 

 

4、【tr和td相關的屬性】

 

 

1、weight、height單元格的寬高

2、bgcolor：單元格的背景顏色

3、align：left center right 單元格中的文字，水平對齊方式

4、valign：top middle bottom單元格中的文字，垂直對齊方式

5、nowrap：nowrap="nowrap"單元格中文字不換行

 

 

5、練習

 

　　　　接下來，我們制作一個簡單的表格。

　　　　代碼：<table border="2" cellspacing="0" >
   <tr>
    <th>序號</th>
    <th>日期</th>
    <th>姓名</th>
    <th>時間</th>
    <th>身份證號</th>
    <th>單位</th>
    <th>來訪事由</th>
    <th>記錄人</th>
    <th>備注</th>
   </tr>
   <tr>
    
    <td >1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td colspan="9" align="middle">經被訪人核實，外來人員登記后方可入內。</td>
   </tr>
  </table>

 

上圖制作中， 說幾個比較容易出錯的地方（其實是樓主打錯的地方qwq）。

　　1.行列弄混，表頭出現在了第一列，呈現縱向排列。

　　2.空格子顯示不出來，這可能是沒有打<td></td>。

　　3.還有表格數字的居中設置，這個在td里設置，可以用樣式設置。

　　4.最后就是表格的跨行與跨列，也就是colspan和rowspan，這個需要特別注意，不要錯用，可以通過簡單記col和row來實現。

　　最后呢，這是本博主寫的第一篇博客，寫的比較丑陋，板式啊什么的都沒有。當然了，隨着博主的學習，這些在以后博客更新中會有所改善。大家需要轉載的話，請注明本篇文章的鏈接。