【表格的應用】

首先，如何寫出一個簡單的表格

以下是一個最簡單的表格，每個單元格的大小是按照裡面的内容進行自動配置設定的，是以就會出現單元格不均等的情況

<table  width="500" height="200">
   	 <tr>
		    <td>123231</td>
		    <td>2</td>
		    <td>3</td>
	   </tr>
	   <tr>
		    <td>1</td>
		    <td>2</td>
		    <td>3</td>
	  </tr>
	   
  </table>
           

這樣的表格雖然叫做表格，但是它實在太簡陋了。。。。

接下來，進行一些優化，讓它看起來美觀一些

<table  height="200" width="500">
   <thead>
	    <tr>
    		 <th>姓名</th>
   		  <th>班級</th>
    		 <th>年級</th>
 	   </tr>
   </thead>
   <tbody >
   	 <tr align="center" >
		     <td >1222</td>
		     <td >2</td>
		     <td >3</td>
	  </tr>
    <tr>
		     <td>1</td>
		     <td>2</td>
		     <td>3</td>	
	</tr>
    
   </tbody>
  </table>
           

這是一個相對完整的表格

now 做一些簡單的說明解釋吧

1、

<table></table>

标簽 就是建立出一個表格了

2、

<tr></tr>

代表表格的行

<td></td>

就是列了 （本人将其與c語言中的二維數組聯系起來，感覺很像）。

3、border 設定了表格的邊框 height width 顧名思義就是 長度和寬度的設定

4、

<th></th>

是專門設定表格的第一欄（如圖所示的姓名 班級那一欄）

下面是滿滿幹貨！！！&& 跨行合并

1、align 水準居中 table加的是讓整個表格在頁面中居中

2、valign 垂直居中

3、cellsapcing 單元格與單元格之間的間距

4、cellpadding 單元格内部填充

5、colspan 跨列合并 删除目前行後面的多餘的單元格

6、rowspan 跨行合并 删除下面行多餘的單元格

<table  width="200" cellspacing="0" cellpadding="20">
  <tr align="center">
	    <td colspan="3">123231</td>
	    <!-- <td >2</td>
	    <td >3</td> -->
  </tr>	
   <tr>
	    <td rowspan="3">1</td>
	    <td>2</td>
	    <td>3</td>
	   </tr>
   
   <tr>
    
	    <td>2</td>
	    <td>3</td>
   </tr>
   <tr>
    
	    <td>2</td>
	    <td>3</td>
   </tr>
  </table>