HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊2 企業(yè)年度業(yè)績報表頁面設(shè)計

模塊2“企業(yè)年度業(yè)績報表頁面設(shè)計”在目前的網(wǎng)頁開發(fā)中，表格通常不再用于頁面的布局與排版。但是這并不意味著表格已經(jīng)被淘汰，在實(shí)際開發(fā)中表格還是用得非常多的。表格主要是用來展示數(shù)據(jù)的，因?yàn)樗梢宰寯?shù)據(jù)顯示得非常規(guī)整，具有良好的可讀性。特別是在后臺展示數(shù)據(jù)時，熟練運(yùn)用表格顯得尤為重要，一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得條理有序。在本模塊中，我們將通過表格的學(xué)習(xí)完成“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”頁面的設(shè)計。網(wǎng)頁的“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”頁面設(shè)計任務(wù)11.1表格的基礎(chǔ)知識1．表格的基本結(jié)構(gòu)表格由<table>標(biāo)簽來定義。每個表格均有若干行，每行由<tr>標(biāo)簽定義。每行被分割為若干單元格，每個單元格由<td>標(biāo)簽定義。<td>標(biāo)簽內(nèi)存放的是表格的數(shù)據(jù)內(nèi)容。例如，定義一個三行三列且邊框?qū)挾葹?px的表格：<tableborder="1"><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr></table>1.1表格的基礎(chǔ)知識運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-1所示。圖2-1三行三列且邊框?qū)挾葹?px的表格1.1表格的基礎(chǔ)知識2．表格的基礎(chǔ)操作表格行的增刪是通過添加或刪除<tr>標(biāo)簽來實(shí)現(xiàn)的；表格列的增刪是通過添加或刪除<td>標(biāo)簽來實(shí)現(xiàn)的。例如，將上述表格修改為六行五列的書籍銷量表格：<tableborder="1"><tr><td>書籍名稱</td><td>2018年/冊</td><td>2019年/冊</td><td>2020年</td><td></td></tr><tr><td></td><td></td><td></td><td>上半年/冊</td><td>下半年/冊</td></tr><tr><td>活著</td><td>20</td><td>30</td><td>70</td><td>70</td></tr><tr><td>小王子</td><td>30</td><td>40</td><td>80</td><td>40</td></tr><tr><td>圍城</td><td>50</td><td>15</td><td>30</td><td>70</td></tr><tr><td>合計</td><td>100</td><td>85</td><td>180</td><td>180</td></tr></table>1.1表格的基礎(chǔ)知識運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-2所示。表格中的空白單元格是為了后續(xù)進(jìn)行合并單元格操作而預(yù)留的。圖2-2書籍銷量表格1.1表格的基礎(chǔ)知識3．復(fù)雜結(jié)構(gòu)的表格（1）表頭。<th>標(biāo)簽用于定義表格內(nèi)的表頭單元格。<th>標(biāo)簽內(nèi)的文本通常會呈現(xiàn)為居中的粗體文本，而<td>標(biāo)簽內(nèi)的文本則通常會呈現(xiàn)為左對齊的普通文本。例如，將上述表格代碼的前兩行重新定義為表頭：<tableborder="1"><tr><th>書籍名稱</th><th>2018年/冊</th><th>2019年/冊</th><th>2020年</th><th></th></tr><tr><th></th><th></th><th></th><th>上半年/冊</th><th>下半年/冊</th></tr>......</table>1.1.3復(fù)雜結(jié)構(gòu)的表格運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-3所示。圖2-3添加表頭的表格效果1.1.3復(fù)雜結(jié)構(gòu)的表格（2）標(biāo)題。<caption>標(biāo)簽用于定義一個表格的標(biāo)題，常常作為<table>標(biāo)簽的第一個子元素出現(xiàn)，顯示在表格內(nèi)容的最前面。<caption>標(biāo)簽中的文字在水平方向上相對于表格居中顯示。例如，對上述表格添加標(biāo)題：<tableborder="1"><caption>書店年書籍銷量</caption><tr><th>書籍名稱</th><th>2018年/冊</th><th>2019年/冊</th><th>2020年</th><th></th></tr>......</table>1.1.3復(fù)雜結(jié)構(gòu)的表格運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-4所示。圖2-4添加標(biāo)題的表格效果1.1.3復(fù)雜結(jié)構(gòu)的表格（3）帶結(jié)構(gòu)的表格。在HTML中，表格被分為三大結(jié)構(gòu)。表頭標(biāo)簽<thead>：用于放置表格的表頭。主體標(biāo)簽<tbody>：用于放置表格的主體數(shù)據(jù)內(nèi)容。表尾腳注標(biāo)簽<tfoot>：用于放置表格的腳注。1.1.3復(fù)雜結(jié)構(gòu)的表格例如，將上述表格進(jìn)行結(jié)構(gòu)劃分：<tableborder="1"><!--表格標(biāo)題--><caption>書店年書籍銷量</caption><!--表頭--><thead><tr><th>書籍名稱</th><th>2018年/冊</th><th>2019年/冊</th><th>2020年</th><th></th></tr><tr><th></th><th></th><th></th><th>上半年/冊</th><th>下半年/冊</th></tr></thead><!--表格體--><tbody><tr><td>活著</td><td>20</td><td>30</td><td>70</td><td>70</td></tr>......</tbody><!--表尾--><tfoot><tr><td>合計</td><td>100</td><td>85</td><td>180</td><td>180</td></tr></tfoot></table>1.1.3復(fù)雜結(jié)構(gòu)的表格在瀏覽器中對表格進(jìn)行渲染，可以觀察到表格的展示效果并未發(fā)生改變，這是因?yàn)榻Y(jié)構(gòu)化表格并不會改變表格的結(jié)構(gòu)展示，但是整體的代碼可讀性得到了極大的增強(qiáng)。使用結(jié)構(gòu)化的表格時，大家需要注意它的3個特點(diǎn)。結(jié)構(gòu)化表格并不會改變表格的結(jié)構(gòu)展示。使用結(jié)構(gòu)化表格時，瀏覽器會根據(jù)模塊進(jìn)行表格的加載和展示，而不用將表格全部加載完成后再進(jìn)行展示。在網(wǎng)絡(luò)速度較慢或表格數(shù)據(jù)較大時，結(jié)構(gòu)化表格能改善網(wǎng)頁加載速度。結(jié)構(gòu)化表格會根據(jù)表頭、主體、腳注的順序進(jìn)行展示，而不會根據(jù)HTML代碼的位置進(jìn)行順序展示。1.2表格的屬性表2-1

<table>標(biāo)簽的常見屬性1．<table>標(biāo)簽的常見屬性<table>標(biāo)簽的常見屬性如表2-1所示。屬性值描述alignleftcenterright規(guī)定表格相對于周圍元素的對齊方式（建議使用樣式代替）bgcolorrgb_numberhex

_numbercolorname規(guī)定表格的背景顏色（建議使用樣式代替）borderpixels規(guī)定表格邊框的寬度cellpaddingpixels%規(guī)定單元格邊沿與其內(nèi)容之間的空白距離cellspacingpixels%規(guī)定單元格之間的空白距離1.2.1<table>標(biāo)簽的常見屬性我們可以根據(jù)上述表格屬性對表格進(jìn)行一些樣式美化，例如，對書籍銷售表格的樣式進(jìn)行美化，設(shè)置其邊框?qū)挾葹?px，整體寬度為600px，圍繞表格的邊框可見，并設(shè)置表格相對于周圍元素居中對齊，背景顏色值為"#e9ebf5",單元格之間的空白距離為0px。<tableborder="2"width="600px"frame="box"align="center"bgcolor="#e9ebf5"cellspacing="0"'>.......</table>1.2.1<table>標(biāo)簽的常見屬性運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-5所示。圖2-5書籍銷量表格樣式美化效果1.2表格的屬性2．<tr>標(biāo)簽的常見屬性<tr>標(biāo)簽的常見屬性如表2-2所示，可用于表格行的樣式美化。屬性值描述alignrightleftcenterjustifychar定義表格行的內(nèi)容對齊方式bgcolorrgb_numberHex_numbercolorname規(guī)定表格行的背景顏色（建議使用樣式代替）valigntopmiddlebottombaseline規(guī)定表格行中內(nèi)容的垂直對齊方式表2-2

<tr>標(biāo)簽的常見屬性1.2.2<tr>標(biāo)簽的常見屬性例如，將書籍銷量表格設(shè)置為每行文字居中對齊，表頭背景顏色值為"#4472c4"：<tableborder="2"width='600px'frame='box'align='center'bgcolor='#e9ebf5'cellspacing='0'><caption>書店年書籍銷量</caption><!--表頭--><thead><trbgcolor="#4472c4">......</tr><trbgcolor="#4472c4">......</tr></thead><!--表格體--><tbody><tralign="center">......</tr><tralign="center">......</tr><tralign="center">......</tr></tbody><!--表尾--><tfoot><tralign="center">......</tr></tfoot></table>1.2.2<tr>標(biāo)簽的常見屬性運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-6所示。圖2-6文字對齊方式與表頭背景顏色設(shè)置效果1.2表格的屬性3．<td>和<th>標(biāo)簽的常見屬性<td>和<th>標(biāo)簽的常見屬性如表2-3所示。表2-3

<td>和<th>標(biāo)簽的常見屬性屬性值描述alignleftrightcenterjustifychar規(guī)定單元格內(nèi)容的水平對齊方式bgcolorrgb_numberHex_numbercolorname規(guī)定單元格的背景顏色（建議使用樣式代替）colspannumber規(guī)定單元格可橫跨的列數(shù)nowrapnowrap規(guī)定單元格中的內(nèi)容是否折行（建議使用樣式代替）rowspannumber規(guī)定單元格可橫跨的行數(shù)valigntopmiddlebottombaseline規(guī)定單元格內(nèi)容的垂直對齊方式1.2.3<td>和<th>標(biāo)簽的常見屬性例如，將書籍銷量表格的主體首列背景顏色值設(shè)置為“#cfd5ea”，并將銷量數(shù)據(jù)最低的單元格背景顏色設(shè)置為灰色，銷量數(shù)據(jù)最高的單元格背景顏色設(shè)置為紅色：<tableborder="2"width='600px'frame='box'align='center'bgcolor='#e9ebf5'cellspacing='0'><caption>書店年書籍銷量</caption><!--表頭--><thead><trbgcolor='#4472c4'><th>書籍名稱</th><th>2018年/冊</th><th>2019年/冊</th><th>2020年</th><th></th></tr><trbgcolor='#4472c4'><th></th><th></th><th></th><th>上半年/冊</th><th>下半年/冊</th></tr></thead><!--表格體--><tbody><tralign="center"><tdbgcolor='#cfd5ea'>活著</td><td>20</td><td>30</td><td>70</td><td>70</td></tr><tralign="center"><tdbgcolor='#cfd5ea'>小王子</td><td>30</td><td>40</td><tdbgcolor="red">80</td><td>40</td></tr><tralign="center"><tdbgcolor='#cfd5ea'>圍城</td><td>50</td><tdbgcolor="#6c6f74">15</td><td>30</td><td>70</td></tr></tbody><!--表尾--><tfoot><tralign="center"><tdbgcolor='#cfd5ea'>合計</td><td>100</td><td>85</td><td>180</td><td>180</td></tr></tfoot></table>1.2.3

<td>和<th>標(biāo)簽的常見屬性運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-7所示。圖2-7表格主體首列與單元格背景顏色設(shè)置效果1.3表格跨行列操作與嵌套1．表格跨列操作colspan屬性用于規(guī)定單元格可橫跨的列數(shù)。我們可以通過colspan屬性將首行末尾兩個單元格合并，完成表格跨列操作，如圖2-8所示。圖2-8表格跨列操作1.3.1表格跨列操作例如，將書籍銷量表格的首行末尾兩個單元格合并（合并時注意刪除空白單元格）：<tableborder="2"width='600px'frame='box'align='center'bgcolor='#e9ebf5'cellspacing='0'><caption>書店年書籍銷量</caption><thead><trbgcolor='#4472c4'><th>書籍名稱</th><th>2018年/冊</th><th>2019年/冊</th><th

colspan="2">2020年</th></tr></thead>......</table>1.3.1表格跨列操作運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-9所示。圖2-9單元格跨列合并效果1.3表格跨行列操作與嵌套2．表格跨行操作rowspan屬性用于規(guī)定單元格可橫跨的行數(shù)。我們可以通過rowspan屬性將首列兩個單元格合并，完成表格跨行操作，如圖2-10所示。圖2-10表格跨列操作1.3.2表格跨行操作例如，將書籍銷量表格的表頭前三列進(jìn)行上下行合并（合并時注意刪除空白單元格）：<tableborder="2"width='600px'frame='box'align='center'bgcolor='#e9ebf5'cellspacing='0'><caption>書店年書籍銷量</caption><thead><trbgcolor='#4472c4'><th

rowspan="2">書籍名稱</th><th

rowspan="2">2018年/冊</th><th

rowspan="2">2019年/冊</th><th

colspan="2">2020年</th></tr><trbgcolor='#4472c4'>

<th>上半年/冊</th><th>下半年/冊</th></tr></thead></table>1.3.2表格跨行操作運(yùn)行以上代碼后，瀏覽器的顯示效果如圖2-11所示。圖2-11單元格跨行合并效果1.3.3表格嵌套表格嵌套，顧名思義就是將一個表格放置到另一個表格中。我們可以通過表格嵌套的方式，在表格第二列中嵌入另一個表格，如圖2-12所示。圖2-12表格嵌套網(wǎng)頁的“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”頁面設(shè)計任務(wù)1任務(wù)實(shí)施圖2-13“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”頁面效果根據(jù)圖圖2-13進(jìn)行“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”頁面的設(shè)計。任務(wù)實(shí)施<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表</title></head><body><img

src="../img/new_banner.jpg"alt="新聞欄"width="100%"><h2align="center">巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表</h2></body></html>（1）在工程項(xiàng)目根目錄的html文件夾內(nèi)新建statement.html文件，修改HTML的<title>標(biāo)簽為“巨巨網(wǎng)絡(luò)科技有限公司年度業(yè)績報表”，并分別使用<img>和<h2>標(biāo)簽設(shè)計新聞欄圖片和新聞標(biāo)題，效果如圖2-14所示。圖2-14新聞欄圖片和新聞標(biāo)題效果任務(wù)實(shí)施（2）使用<table>標(biāo)簽定義表格，在表格中添加表頭標(biāo)簽<thead>、主體標(biāo)簽<tbody>、腳注標(biāo)簽<tfooter>結(jié)構(gòu)，并為表格添加樣式，設(shè)置表格寬度為800px，單元格之間的空白距離為0，居中對齊，邊框?qū)挾葹?px。<tablewidth="800"cellspacing="0"align="center"border="1"><thead></thead><tbody></tbody><tfoot></tfoot></table>任務(wù)實(shí)施（3）觀察圖2-13可知，表格最大列數(shù)為8列。這里我們需要特別注意，表格的列數(shù)定義應(yīng)當(dāng)以最大列數(shù)為準(zhǔn)，所以表頭的布局應(yīng)該由2行8列組成，表頭標(biāo)簽<thead>中的單元格應(yīng)使用<th>標(biāo)簽定義。之后使用rowspan和colspan屬性對表格的表頭進(jìn)行跨行列操作，效果如圖2-15所示。其中，“摘要”單元格是由跨2行2列的表格組成的。圖2-15表格表頭跨行列合并效果任務(wù)實(shí)施<thead><tr><th

rowspan="2"colspan="2">摘要</th><th

colspan="4">收入</th><th

rowspan="2">利潤/萬元</th><th

rowspan="2">利潤率</th></tr><tr><th>第一季度收入/萬元</th><th>第二季度收入/萬元</th><th>第三季度收入/萬元</th><th>第四季度收入/萬元</th></tr></thead>任務(wù)實(shí)施<tbody><tr><tdrowspan="5">收入</td><td>華東地區(qū)</td><td>1000</td><td>1020</td><td>1800</td><td>2000</td><td>2500</td><td>75%</td></tr><tr><td>華南地區(qū)</td><td>900</td><td>800</td><td>1098</td><td>1000</td><td>2001</td><td>111%</td></tr><tr><td>華西地區(qū)</td><td>500</td><td>480</td><td>400</td><td>700</td><td>1001</td><td>93%</td></tr><tr><td>華北地區(qū)</td><td>800</td><td>700</td><td>780</td><td>800</td><td>1300</td><td>73%</td></tr></tbody>（5）表格主體由4行8列構(gòu)成，使用rowspan屬性對首列的"收入"項(xiàng)進(jìn)行跨行合并，效果如圖2-16所示。任務(wù)實(shí)施圖2-16表格主體跨行合并效果任務(wù)實(shí)施<tfoot><tr><tdcolspan="2">收入合計</td><tdcolspan="2">6802</td><tdcolspan="2">平均利潤</td><tdcolspan="2">88%</td></tr></tfoot>（6）根據(jù)圖2-13布局表格腳注，并使用colspan屬性進(jìn)行跨列合并，效果如圖2-17所示。圖2-17表格腳注跨列合并效果任務(wù)實(shí)施<tablewidth="800"cellspacing="0"align="center"border="1"><thead

bgcolor="#4472c4"><tr><th

rowspan="2"colspan="2">摘要</th><th

colspan="4">收入</th><th

rowspan="2">利潤/萬元</th><th

rowspan="2">利潤率</th></tr><tr><th>第一季度收入/萬元</th><th>第二季度收入/萬元</th><th>第三季度收入/萬元</th><th>第四季度收入/萬元</th></tr></thead><tbody><tralign="center"bgcolor="#d9e1f2"><tdrowspan="5">收入</td><td>華東地區(qū)</td><td>1000</td><td>1020</td><td>1800</td><td>2000</td><td>2500</td><td>75%</td></tr><tralign="center"><td>華南地區(qū)</td><td>900</td><td>800</td><td>1098</td><td>1000</td><td>2001</td><td>111%</td></tr><tralign="center"bgcolor="#d9e1f2"><td>華西地區(qū)</td><td>500</td><td>480</td><td>400</td><td>700</td>（7）設(shè)置表頭背景顏色為“#4472c4”，表格主體單元格文字居中對齊，并隔行設(shè)置背景顏色值為“#d9e1f2”，效果如圖2-18所示。任務(wù)實(shí)施<td>1001</td><td>93%</td></tr><tralign="center"><td>華北地區(qū)</td><td>800</td><td>700</td><td>780</td><td>800</td><td>1300</td><td>73%</td></tr></tbody><tfoot><tralign="center"bgcolor="#d9e1f2"><tdcolspan="2">收入合計</td><tdcolspan