一、創(chuàng)建表格的基本語(yǔ)法：
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
總結(jié)：
- 表格的主要目的是用來(lái)顯示特殊數(shù)據(jù)的
- 一個(gè)完整的表格有表格標(biāo)簽（table），行標(biāo)簽（tr），單元格標(biāo)簽（td）組成，沒有列的標(biāo)簽
- <tr></tr>中只能嵌套<td></td> 類的單元格
- <td></td>標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素
二、表格屬性
重點(diǎn)記住 cellspacing 、 cellpadding
tt.png
我們經(jīng)常有個(gè)說法，是三參為0， 平時(shí)開發(fā)的我們這三個(gè)參數(shù) border cellpadding cellspacing 為 0
07table表格屬性.jpg
例子
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>劉德華</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>張學(xué)友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>劉曉慶</td> <td>女</td> <td>63</td> </tr>
</table>
三、表頭單元格標(biāo)簽th
- 作用：
- 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中
- 語(yǔ)法：
- 只需用表頭標(biāo)簽<th></th>替代相應(yīng)的單元格標(biāo)簽<td></td>即可。
四、表格標(biāo)題caption
定義和用法
<table>
<caption>我是表格標(biāo)題</caption>
</table>
注意：
- caption 元素定義表格標(biāo)題，通常這個(gè)標(biāo)題會(huì)被居中且顯示于表格之上。
- caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。
- 這個(gè)標(biāo)簽只存在 表格里面才有意義。你是風(fēng)兒我是沙
五、合并單元格(難點(diǎn))
1.合并單元格2種方式
- 跨行合并：rowspan="合并單元格的個(gè)數(shù)"
- 跨列合并：colspan="合并單元格的個(gè)數(shù)"
2.合并單元格順序
合并的順序我們按照 先上 后下 先左 后右 的順序
3.合并單元格三步曲
- 先確定是跨行還是跨列合并
- 根據(jù) 先上 后下 先左 后右的原則找到目標(biāo)單元格 然后寫上 合并方式 還有 要合并的單元格數(shù)量 比如 ： <td colspan="3"> </td>
- 刪除多余的單元格 單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 個(gè)人簡(jiǎn)歷 </caption>
<tr>
<td>劉德華</td>
<td>男</td>
<td>18</td>
<!-- 目標(biāo)單元格 先上后下 -->
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 180</td>
<td>漢族</td>
<td>已婚</td>
<!-- <td>照片</td> 這個(gè)單元格是多余的 -->
</tr>
<tr>
<td>個(gè)人作品</td>
<!-- 第二個(gè)單元格是目標(biāo)單元格 -->
<td colspan="3">個(gè)人作品</td>
</tr>
<tr>
<td>個(gè)人簡(jiǎn)歷</td>
<td colspan="3">個(gè)人簡(jiǎn)歷</td>
</tr>
</table>
</body>
</html>
合并表格.png
六、總結(jié)表格
| 標(biāo)簽名 | 定義 | 說明 |
|---|---|---|
| <table></table> | 表格標(biāo)簽 | 就是一個(gè)四方的盒子 |
| <tr></tr> | 表格行標(biāo)簽 | 行標(biāo)簽要再table標(biāo)簽內(nèi)部才有意義 |
| <td></td> | 單元格標(biāo)簽 | 單元格標(biāo)簽是個(gè)容器級(jí)元素，可以放任何東西 |
| <th></th> | 表頭單元格標(biāo)簽 | 它還是一個(gè)單元格，但是里面的文字會(huì)居中且加粗 |
| <caption></caption> | 表格標(biāo)題標(biāo)簽 | 表格的標(biāo)題，跟著表格一起走，和表格居中對(duì)齊 |
| clospan 和 rowspan | 合并屬性 | 用來(lái)合并單元格的 |
七、表格劃分結(jié)構(gòu)（了解）
對(duì)于比較復(fù)雜的表格，表格的結(jié)構(gòu)也就相對(duì)的復(fù)雜了，所以又將表格分割成三個(gè)部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來(lái)標(biāo)注， 這樣更好的分清表格結(jié)構(gòu)
注意：
- <thead></thead>：用于定義表格的頭部。用來(lái)放標(biāo)題之類的東西。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！
- <tbody></tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
- <tfoot></tfoot>放表格的腳注之類。
- 以上標(biāo)簽都是放到table標(biāo)簽中。
