版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第4章
表格
4.1創(chuàng)建表格
4.2表格屬性
4.3表格邊框
4.4設(shè)置表格行的對(duì)齊方式
4.5列和行的合并
4.6表格結(jié)構(gòu)
4.7表格標(biāo)題
4.8表格嵌套
4.9小結(jié)
4.1創(chuàng)建表格<table>
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-1】創(chuàng)建一個(gè)兩行三列的表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>在頁面中添加表格</title>5
</head>6
<body>7 表格主要是為了進(jìn)行頁面布局，有時(shí)候也可以讓頁面中的內(nèi)容更加整齊。8
<p>9
<table>10
<tr>11
<td>首行第一列</td>12
<td>首行第二列</td>13
<td>首行第三列</td>14
</tr>15
<tr>16
<td>第二行的第一列</td>17
<td>第二行的第二列</td>18
<td>第二行的第三列</td>19
</tr>20
</table>21
</body>22
</html>4.2表格屬性4.2.1表格寬度
4.2.2表格高度
4.2.3表格背景圖片
4.2.4單元格間距
4.2.5表格內(nèi)單元格與文字的距離4.2.1表格寬度width屬性<tablewidth="表格寬度">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-2】設(shè)置兩個(gè)不同寬度的表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置表格的寬度</title>5
</head>6
<body>7 表格主要是為了進(jìn)行頁面布局，有時(shí)候也可以讓頁面中的內(nèi)容更加整齊。8
<p>9 表格寬度為400px：10
<tableborder="2"
bordercolor="blue"width="400px">11
<tr>12
<td>首行第一列</td>13
<td>首行第二列</td>14
<td>首行第三列</td>15
</tr>16
<tr>17
<td>第二行的第一列</td>18
<td>第二行的第二列</td>19
<td>第二行的第三列</td>20
</tr>21
</table>22
<p>23 表格寬度占窗口寬度的80%：24
<tableborder="3"
width="80%">25
<tr>26
<td>首行第一列</td>27
<td>首行第二列</td>28
<td>首行第三列</td>29
</tr>30
<tr>31
<td>第二行的第一列</td>32
<td>第二行的第二列</td>33
<td>第二行的第三列</td>34
</tr>35
</table>36
</body>37
</html>4.2.2表格高度<table>標(biāo)簽的height屬性<tableheight="表格高度">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-3】設(shè)置兩個(gè)不同高度的表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表格高度</title>5
</head>6
<body>7
<tableborder="1">8
<tr>9
<th>學(xué)號(hào)</th>10
<th>姓名</th>11
<th>語文</th>12
<th>數(shù)學(xué)</th>13
<th>英語</th>14
</tr>15
<tr>16
<td>200601001</td>17
<td>張三</td>18
<td>89</td>19
<td>87</td>20
<td>77</td>21
</tr>22
<tr>23
<td>200601002</td>24
<td>李四</td>25
<td>78</td>26
<td>98</td>27
<td>67</td>28
</tr>29
<tr>30
<td>200601003</td>31
<td>王五</td>32
<td>67</td>33
<td>88</td>34
<td>99</td>35
</tr>36
</table><br/>37
<tableborder="1"height="300">38
<tr>39
<th>學(xué)號(hào)</th>40
<th>姓名</th>41
<th>語文</th>42
<th>數(shù)學(xué)</th>43
<th>英語</th>44
</tr>45
<tr>46
<td>200601001</td>47
<td>張三</td>48
<td>89</td>49
<td>87</td>50
<td>77</td>51
</tr>52
<tr>53
<td>200601002</td>54
<td>李四</td>55
<td>78</td>56
<td>98</td>57
<td>67</td>58
</tr>59
<tr>60
<td>200601003</td>61
<td>王五</td>62
<td>67</td>63
<td>88</td>64
<td>99</td>65
</tr>66
</table>67
</body>68
</html>4.2.3表格背景圖片<tablebackground="圖像源文件地址">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-4】設(shè)置表格背景圖片。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表格背景圖片</title>5
</head>6
<body>7
<tableborder="1"background="4.2.jpg">8
<tr>9
<th>學(xué)號(hào)</th>10
<th>姓名</th>11
<th>語文</th>12
<th>數(shù)學(xué)</th>13
<th>英語</th>14
</tr>15
<tr>16
<td>200601001</td>17
<td>張三</td>18
<td>89</td>19
<td>87</td>20
<td>77</td>21
</tr>22
<tr>23
<td>200601002</td>24
<td>李四</td>25
<td>78</td>26
<td>98</td>27
<td>67</td>28
</tr>29
</table>30
</body>31
</html>4.2.4單元格間距<table>標(biāo)簽的cellspacing屬性<table
cellspacing="間距大小">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-5】設(shè)置單元格間距不同的兩個(gè)表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>單元格間距</title>5
</head>6
<body>7
<tableborder="1"
cellspacing="7">8
<tr>9
<th>學(xué)號(hào)</th>10
<th>姓名</th>11
<th>語文</th>12
<th>數(shù)學(xué)</th>13
<th>英語</th>14
</tr>15
<tr>16
<td>200601001</td>17
<td>張三</td>18
<td>89</td>19
<td>66</td>20
<td>76</td>21
</tr>22
<tr>23
<td>200601002</td>24
<td>李四</td>25
<td>78</td>26
<td>98</td>27
<td>67</td>28
</tr>29
</table><br/>30
<tableborder="1">31
<tr>32
<th>學(xué)號(hào)</th>33
<th>姓名</th>34
<th>語文</th>35
<th>數(shù)學(xué)</th>36
<th>英語</th>37
</tr>38
<tr>39
<td>200601001</td>40
<td>張三</td>41
<td>89</td>42
<td>66</td>43
<td>76</td>44
</tr>45
<tr>46
<td>200601002</td>47
<td>李四</td>48
<td>78</td>49
<td>98</td>50
<td>67</td>51
</tr>52
</table>53
</body>54
</html>4.2.5表格內(nèi)單元格與文字的距離<table>標(biāo)簽的cellpadding屬性<tablecellpadding="單元格與文字距離的值">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-6】設(shè)置單元格與文字距離不同的兩個(gè)表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置單元格與文字的距離</title>5
</head>6
<body>7
<tableborder="2"
bordercolor="red">8
<tr>9
<td>首行第一列</td>10
<td>首行第二列</td>11
<td>首行第三列</td>12
</tr>13
<tr>14
<td>第二行的第一列</td>15
<td>第二行的第二列</td>16
<td>第二行的第三列</td>17
</tr>18
</table>19
<p><hrcolor="blue">20
<tableborder="2"
bordercolor="red"cellpadding="10px">21
<tr>22
<td>首行第一列</td>23
<td>首行第二列</td>24
<td>首行第三列</td>25
</tr>26
<tr>27
<td>第二行的第一列</td>28
<td>第二行的第二列</td>29
<td>第二行的第三列</td>30
</tr>31
</table>32
</body>33
</html>4.3表格邊框4.3.1邊框?qū)挾?/p>
4.3.2邊框顏色
4.3.1邊框?qū)挾?lt;table>標(biāo)簽的border屬性<tableborder="表格的邊框?qū)挾?>
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-7】設(shè)置邊框?qū)挾炔煌膬蓚€(gè)表格。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表格邊框?qū)挾?lt;/title>5
</head>6
<body>7
<tableborder="1">8
<tr>9
<th>學(xué)號(hào)</th>10
<th>姓名</th>11
<th>語文</th>12
<th>數(shù)學(xué)</th>13
<th>英語</th>14
</tr>15
<tr>16
<td>200601001</td>17
<td>張三</td>18
<td>89</td>19
<td>87</td>20
<td>77</td>21
</tr>22
<tr>23
<td>200601002</td>24
<td>李四</td>25
<td>78</td>26
<td>98</td>27
<td>67</td>28
</tr>29
<tr>30
<td>200601003</td>31
<td>王五</td>32
<td>67</td>33
<td>88</td>34
<td>99</td>35
</tr>36
</table><br/>37
<tableborder="10">38
<tr>39
<th>學(xué)號(hào)</th>40
<th>姓名</th>41
<th>語文</th>42
<th>數(shù)學(xué)</th>43
<th>英語</th>44
</tr>45
<tr>46
<td>200601001</td>47
<td>張三</td>48
<td>89</td>49
<td>87</td>50
<td>77</td>51
</tr>52
<tr>53
<td>200601002</td>54
<td>李四</td>55
<td>78</td>56
<td>98</td>57
<td>67</td>58
</tr>59
<tr>60
<td>200601003</td>61
<td>王五</td>62
<td>67</td>63
<td>88</td>64
<td>99</td>65
</tr>66
</table>67
</body>68
</html>4.3.2邊框顏色
<table>標(biāo)簽的bordercolor屬性<tableborder="表格的邊框?qū)挾?bordercolor="邊框顏色">
<tr>
<td>表格的內(nèi)容</td>
</tr></table>【示例4-8】設(shè)置表格邊框顏色為藍(lán)色。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置表格的邊框顏色</title>5
</head>6
<body>7 表格主要是為了進(jìn)行頁面布局，有時(shí)候也可以讓頁面中的內(nèi)容更加整齊。8
<tableborder="5"
bordercolor="blue">9
<tr>10
<td>首行第一列</td>11
<td>首行第二列</td>12
<td>首行第三列</td>13
</tr>14
<tr>15
<td>第二行的第一列</td>16
<td>第二行的第二列</td>17
<td>第二行的第三列</td>18
</tr>19
</table>20
</body>21
</html>4.4設(shè)置表格行的對(duì)齊方式4.4.1垂直對(duì)齊方式
4.4.2水平對(duì)齊方式4.4.1垂直對(duì)齊方式valign屬性<table>
<trvalign="">
<td>表格內(nèi)容</td>
</tr></table>【示例4-9】通過例子來說明這3個(gè)屬性值的用法。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置行的垂直對(duì)齊方式</title>5
</head>6
<body>7
<tableborder="2"
width="420px"
height="230px">8
<tr
valign="top">9
<td>首行第一列</td>10
<td>首行第二列</td>11
<td>首行第三列</td>12
</tr>13
<tr
valign="middle">14
<td>第二行的第一列</td>15
<td>第二行的第二列</td>16
<td>第二行的第三列</td>17
</tr>18
<trvalign="bottom">19
<td>第三行的第一列</td>20
<td>第三行的第二列</td>21
<td>第三行的第三列</td>22
</tr>23
</table>24
</body>25
</html>4.4.2水平對(duì)齊方式align屬性<table>
<tralign="">
<td>表格內(nèi)容</td>
</tr></table>【示例4-10】通過例子來說明這3個(gè)屬性值的用法。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置行的水平對(duì)齊方式</title>5
</head>6
<body>7
<tableborder="2"
width="600px"
height="150px">8
<tralign="center">9
<td>首行第一列</td>10
<td>首行第二列</td>11
<td>首行第三列</td>12
</tr>13
<tralign="right">14
<td>第二行的第一列</td>15
<td>第二行的第二列</td>16
<td>第二行的第三列</td>17
</tr>18
<tralign="left">19
<td>第三行的第一列</td>20
<td>第三行的第二列</td>21
<td>第三行的第三列</td>22
</tr>23
</table>24
</body>25
</html>4.5列和行的合并4.5.1列的合并
4.5.2行的合并
4.5.1列的合并colspan屬性<table>
<tr>
<td
colspan="所跨的列數(shù)">表格的內(nèi)容</td>
</tr></table>【示例4-11】合并表格的列。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置單元格的水平跨度合并</title>5
</head>6
<body>7
<tableborder="2"
width="400px"
height="120px">8
<tr>9
<tdcolspan="3">首行1列</td>10
</tr>11
<tr>12
<td
colspan="2">2行1列</td>13
<td>2行2列</td>14
</tr>15
<tr>16
<td>3行1列</td>17
<td>3行2列</td>18
<td>3行3列</td>19
</tr>20
</table>21
</body>22
</html>4.5.2行的合并rowspan屬性<table>
<tr>
<td
rowspan="所跨的行數(shù)">表格的內(nèi)容</td>
</tr></table>【示例4-12】合并表格的行。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置單元格的跨行合并</title>5
</head>6
<body>7
<tableborder="1"width="350"height="150">8
<tr>9
<th>部門</th>10
<th>姓名</th>11
<th>通信地址</th>12
</tr>13
<tr>14
<td
rowspan="3">技術(shù)部</td>15
<td>張三</td>16
<td>北京市北三環(huán)東路</td>17
</tr>18
<tr>19
<td>李四</td>20
<td>北京市朝陽區(qū)</td>21
</tr>22
<tr>23
<td>王五</td>24
<td>北京市和平街北口</td>25
</tr>26
<tr>27
<td
rowspan="2">教學(xué)部</td>28
<td>錢六</td>29
<td>北京市櫻花東街</td>30
</tr>31
<tr>32
<td>趙七</td>33
<td>北京市櫻花西街</td>34
</tr>35
</table>36
</body>37
</html>4.6表格結(jié)構(gòu)4.6.1表頭
4.6.2主體
4.6.3表尾4.6.1表頭表頭標(biāo)簽<thead><thead>
<tr>
<td>單元格內(nèi)的文字</td>
</tr></thead>【示例4-13】為表格設(shè)置表頭。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表頭</title>5
</head>6
<body>7
<tableborder="1"width="350"height="100">8
<thead>9
<tr>10
<td>學(xué)號(hào)</td>11
<td>姓名</td>12
<td>語文</td>13
<td>數(shù)學(xué)</td>14
<td>英語</td>15
</tr>16
</thead>17
<tr>18
<td>200601001</td>19
<td>張三</td>20
<td>89</td>21
<td>66</td>22
<td>76</td>23
</tr>24
<tr>25
<td>200601002</td>26
<td>李四</td>27
<td>78</td>28
<td>98</td>29
<td>67</td>30
</tr>31
</table>32
</body>33
</html>4.6.2主體主體標(biāo)簽<tbody><tbody>
<tr>
<td>單元格內(nèi)的文字</td>
</tr></tbody>【示例4-14】為表格設(shè)置主體部分。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表格主體</title>5
</head>6
<body>7
<tableborder="1"width="350"height="150">8
<caption>通信錄</caption>9
<tr>10
<th>部門</th>11
<th>姓名</th>12
<th>通信地址</th>13
</tr>14
<tbody>15
<tr>16
<tdrowspan="3">技術(shù)部</td>17
<td>張三</td>18
<td>北京市北三環(huán)東路</td>19
</tr>20
<tr>21
<td>李四</td>22
<td>北京市朝陽區(qū)</td>23
</tr>24
<tr>25
<td>王五</td>26
<td>北京市和平街北口</td>27
</tr>28
</tbody>29
<tbody>30
<tr>31
<tdrowspan="2">教學(xué)部</td>32
<td>錢六</td>33
<td>北京市櫻花東街</td>34
</tr>35
<tr>36
<td>趙七</td>37
<td>北京市櫻花西街</td>38
</tr>39
</tbody>40
</table>41
</body>42
</html>4.6.3表尾表尾標(biāo)簽<tfoot><tfoot>
<tr>
<td>單元格內(nèi)的文字</td>
</tr></tfoot>【示例4-15】為表格添加表尾。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表尾</title>5
</head>6
<body>7
<tableborder="1"cellspacing="0"width="300">8
<thead>9
<tr>10
<th>學(xué)號(hào)</th>11
<th>姓名</th>12
<th>語文</th>13
<th>數(shù)學(xué)</th>14
<th>英語</th>15
</tr>16
</thead>17
<tbody>18
<tr>19
<td
rowspan="3">技術(shù)部</td>20
<td>張三</td>21
<td>77</td>22
<td>77</td>23
<td>77</td>24
</tr>25
<tr>26
<td>李四</td>27
<td>68</td>28
<td>77</td>29
<td>77</td>30
</tr>31
</tbody>32
<tfoot>33
<tr>34
<td
colspan="5"align="right">制表人：劉智勇</td>35
</tr>36
</tfoot>37
</table>38
</body>39
</html>4.7表格標(biāo)題表格標(biāo)題標(biāo)簽<caption><caption>表格的標(biāo)題文字</caption>【示例4-16】為表格設(shè)置標(biāo)題。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>表格的標(biāo)題</title>5
</head>6
<body>7
<tableborder="1"width="350"height="100">8
<caption>學(xué)員成績表</caption>9
<tr>10
<th>學(xué)號(hào)</th>11
<th>姓名</th>12
<th>語文</th>13
<th>數(shù)學(xué)</th>14
<th>英語</th>15
</tr>16
<tr>17
<td>200601001</td>18
<td>張三</td>19
<td>89</td>20
<td>87</td>21
<td>77</td>22
</tr>23
<tr>24
<td>200601002</td>25
<td>李四</td>26
<td>78</td>27
<td>98</td>28
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 交易居間合同協(xié)議
- 2025青海海北州門源枋正建設(shè)項(xiàng)目管理有限公司面向社會(huì)招聘工程技術(shù)人員6人筆試參考題庫附帶答案詳解
- 2025福建福州市倉山區(qū)國有投資發(fā)展集團(tuán)有限公司招聘1人筆試參考題庫附帶答案詳解
- 尊法學(xué)法守法用法主題法治宣傳實(shí)踐活動(dòng)方案
- 2025年國網(wǎng)信息通信產(chǎn)業(yè)集團(tuán)有限公司招聘240人(第一批)筆試參考題庫附帶答案詳解
- 2024福建晉江市創(chuàng)新創(chuàng)業(yè)創(chuàng)造園開發(fā)建設(shè)有限公司招聘1人筆試參考題庫附帶答案詳解
- 2025年上半年安徽龍亢控股集團(tuán)限公司公開招聘人員13人易考易錯(cuò)模擬試題（共500題）試卷后附參考答案
- 2025中鐵快運(yùn)股份有限公司招聘高校畢業(yè)生98人筆試參考題庫附帶答案詳解
- 2025年上半年安徽蚌埠市政府債務(wù)管理中心（市預(yù)算績效評(píng)價(jià)中心）招聘12人易考易錯(cuò)模擬試題（共500題）試卷后附參考答案
- 2025年上半年安徽省煙草專賣局（公司）所屬單位公開招聘高校畢業(yè)生51人易考易錯(cuò)模擬試題（共500題）試卷后附參考答案
- 《澳大利亞》導(dǎo)學(xué)案
- 2025四川省安全員A證考試題庫附答案
- 2025年高考語文備考訓(xùn)練之社會(huì)現(xiàn)象：“數(shù)字囤積癥”
- 2025年湖南高速鐵路職業(yè)技術(shù)學(xué)院單招職業(yè)技能測試題庫帶答案
- 蘇教版三年級(jí)科學(xué)下冊(cè)第一單元第3課《植物開花了》課件
- 休閑海島開發(fā)策劃方案
- DB36-T 2097-2024 固定資產(chǎn)投資項(xiàng)目節(jié)能報(bào)告編制規(guī)范
- 健康與保健課件
- 《運(yùn)營管理 第7版》課件全套 馬風(fēng)才 第01-15章 運(yùn)營管理概論- 互聯(lián)網(wǎng)運(yùn)營
- 課件-DeepSeek從入門到精通
- 2025年度典型火災(zāi)案例及消防安全知識(shí)專題培訓(xùn)
評(píng)論
0/150
提交評(píng)論