網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5的塊級元素-表格元素table_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5的塊級元素-表格元素table_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5的塊級元素-表格元素table_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5的塊級元素-表格元素table_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：HTML5的塊級元素-表格元素table_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

表格中的內(nèi)容按照相應(yīng)的行或列進(jìn)行分類和顯示。

HTML5的塊級元素

表格元素table目錄塊級元素2.1基本塊級元素2.2列表元素2.3表格元素table2.4表單2.5分區(qū)元素div2.6縮排元素blockquote2.7實(shí)訓(xùn)—制作精選信息板塊習(xí)題22.3.1基本表格表格的格式為：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><caption>標(biāo)題</caption>

<tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th></tr>

<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr>…<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr></table>trtablerow表行thtablehead表頭tdtabledata表數(shù)據(jù)2.3表格元素table2.3表格元素table【例2-9】在頁面中添加一個(gè)4行3列的表格，本例文件2-9.html在瀏覽器中顯示的效果如圖2-9所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>表格示例</title></head><body><table><caption>班級名單</caption><tr><th>姓名</th><th>性別</th><th>專業(yè)</th></tr><tr><td>張三豐</td><td>男</td><td>大數(shù)據(jù)與信息處理技術(shù)</td></tr><tr><td>李四萍</td><td>女</td><td>軟件工程</td></tr><tr><td>王五一</td><td>女</td><td>計(jì)算機(jī)科學(xué)與技術(shù)</td></tr></table><tableborder="1"cellspacing="10"cellpadding="20"><caption>班級名單</caption><tr><th>姓名</th><th>性別</th><th>專業(yè)</th></tr><tr><td>張三豐</td><td>男</td><td>大數(shù)據(jù)與信息處理技術(shù)</td></tr><tr><td>李四萍</td><td>女</td><td>軟件工程</td></tr><tr><td>王五一</td><td>女</td><td>計(jì)算機(jī)科學(xué)與技術(shù)</td></tr></table></body></html>2.3表格元素table2.3.2跨行跨列的表格（選學(xué)）格式為：<table><tr><tdrowspan="所跨的行數(shù)"colspan="所跨的列數(shù)">單元格內(nèi)容</td></tr></table>2.3表格元素table【例2-10】跨行跨列表格，本例文件2-10.html在瀏覽器中顯示的效果如圖2-10所示。2.3表格元素table<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>跨行跨列表格示例</title></head><body> <tablewidth="300"border="2"> <tr> <tdcolspan="3">課程成績</td><!--設(shè)置單元格水平跨3列--> </tr> <tr> <tdrowspan="2">語文</td><!--設(shè)置單元格垂直跨2行--> <td>期中</td> <td>89</td> </tr> <tr> <td>期末</td> <td>92</td> </tr> <tr> <tdrowspan="2">英語</td><!--設(shè)置單元格垂直跨2行--> <td>期中</td> <td>95</td> </tr> <tr> <td>期末</td> <td>90</td> </tr></body></html>2.3表格元素table2.3.3表格數(shù)據(jù)的分組（選學(xué)）【例2-11】表格分組示例，本例文件2-11.html在瀏覽器中顯示的效果如圖2-11所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>分組表格示例</title></head><body><tableborder="0"width="420"><!--設(shè)置表格寬度為420px，無邊框--><caption>成績匯總表</caption><theadstyle="background:#FAF0E6"><!--設(shè)置表格的頁眉--><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>英語</th></tr></thead><!--表格頁眉結(jié)束-->2.3表格元素table2.3表格元素table

<tbodystyle="background:#FFFAF0"><!--設(shè)置表格主體--><tr><td>張三豐</td><td>90</td><td>92</td><td>98</td></tr><tr><td>李四萍</td><td>96</td><td>100</td><td>90</td></tr><tr><td>王五一</td><td>93</td><td>97</td><td>97</td></tr></tbody><!-表格主體結(jié)束--><tfootstyle="background:#FAF0E6"><!--設(shè)置表格的數(shù)據(jù)頁腳--><tr><td>平均分?jǐn)?shù)</td><td>93</td><td>96</td><td>95</td></tr></tfoot><!--表格頁腳結(jié)束--></table></body></html>2.3表格元素table2.3.4調(diào)整列的格式（選學(xué)）【例2-12】列格式示例。本例文件2-12.html在瀏覽器中顯示的效果如圖2-12所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>分組表格示例</title></head><body><tableborder="1"><colgroup><colwidth="150"style="background:#FFFAF0"><colwidth="100"style="background:#8d8d8d"><colwidth="200"style="background:#FFFAF0"></colgroup><tr><th>姓名</th><th>性別</th><th>專業(yè)</th></tr>2.3表格元素table<tr><td>張三豐</td><td>男</td><td>大數(shù)據(jù)與信息處理技術(shù)</td></tr><tr><td>李四萍</

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論