【表格的應用】

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

以下是一個最簡單的表格,每個單元格的大小是按照裏面的內容進行自動分配的,所以就會出現單元格不均等的情況

  <table border="1" 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 border="1" 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 border="1" 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>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章