首先,如何寫出一個簡單的表格
以下是一個最簡單的表格,每個單元格的大小是按照裏面的內容進行自動分配的,所以就會出現單元格不均等的情況
<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>