HTML中表格標簽的使用
表格的結構
HTML中的表格和我們平時用的excel表格的結構基本是一致的，由行和列以及單元格構成。
通常情況下，同行的高度一致，同列的寬度一致。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。（col、colgroup兩個元素在CSS中再講）
表格的相關元素
1、<table>標簽
HTML表格以<table>標簽開始，以<table>標簽結束。其中table有不少屬性，比如：border,bordercolor,cellspacing,width,height,bgcolor。
boder表示外框邊線的粗細，bodercolor表示邊線的顏色，cellspacing表示單元格之間的空隙,width表示表格的寬，height表示表格的高，bgcolor表示背景色。Align表示水平對齊方式，在行或單元格中還有valign表示垂直對獎方式 .
2、表格里一般由多行組成，行由<tr>標簽進行表示，因此<tr>標簽一般有多行。在<tr>中只能包含<td>或是<th>兩種元素。
3、<td>表示單元格，假設一個表格有一行五列即有5個單元格，有5個<td>。
<td>中有兩個重要的屬性為：
colspan：指定單元格跨多少列，簡稱跨列
rowspan：指定單元格可橫跨的行數，簡稱跨行
如果一個td中沒有數據時，可以使用一個空白符 放入到td中，否則瀏覽器可能無法顯示出表格的邊框來。
4、表格的標題用<caption>表示，表格的標題一般為0或1個。
5、表格頁眉的單元格用<th>表示，與<td>標簽類似，放在<tr>標簽里。
6、在HTML5時代，按照表格的結構，一般可以分為三個模塊：
<tbody>定義表格的主體，內容
<thead>定義表格頭，即表頭
<tfoot>定義表格的腳
上述各標簽組成一個基礎表格，如下圖所示一一對應
<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150"> <caption>我最喜歡的歌曲</caption> <thead> <tr align="center"> <th>歌名</th> <th>作者</th> </tr> </thead> <tbody> <tr> <td>光輝歲月</td> <td>Beyond</td> </tr> <tr> <td>紅豆</td> <td>王菲</td> </tr> <tr> <td>我只在乎你</td> <td>鄧麗君</td> </tr> <tr> <td>倩女幽魂</td> <td rowspan="2">張國榮</td> </tr> <tr> <td>有誰共鳴</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">現總共：5首歌曲</td> </tr> </tfoot> </table>
解析：
1、在<thead>中有歌名和作者，用的是<th>標簽進行修飾。<th>標簽一般都是粗體字，居中顯示
2、藍框部分的內容用的是<td>標簽，<td>標簽的內容一般都是居左顯示，不加粗字體。
3、藍框中的每一行即為<tr>標簽
4、“張國榮”這一個單元格跨越了2行，即表示為rowspan=“2”
5、紫框部分為<tfoot>標簽，跨越了2列，即表示為colspan=“2”
表格標簽一般在什么情況下使用？
1、主要用於規則的數據顯示
2、適當的時候可以在表單頁面中使用
作業練習
制作表格
讀代碼，繪表格
<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
<tr><td colspan="3" align="center">個人信息</td></tr>
<tr align="center"><td>姓名</td><td>性別</td><td>年齡</td> </tr>
<tr><td>carson</td><td>男</td><td rowspan="3">24</td></tr>
<tr><td>thl</td><td>女</td></tr>
<tr><td>Alice</td><td>女</td></tr>
</table>