跨行列表格
知識(shí)準(zhǔn)備
-
表格
表格由
<table>標(biāo)簽來(lái)定義是牢。每個(gè)表格均有若干行（由<tr>標(biāo)簽定義）遗座，每行被分割為若干單元格（由<td>標(biāo)簽定義）硬萍。字母 td 指表格數(shù)據(jù)（table data）剖效，即數(shù)據(jù)單元格的內(nèi)容灼擂。數(shù)據(jù)單元格可以包含文本壁查、圖片、列表剔应、段落睡腿、表單、水平線(xiàn)领斥、表格等等嫉到。<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> -
表格和邊框?qū)傩?/h3>
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框月洛。有時(shí)這很有用何恶，但是大多數(shù)時(shí)候，我們希望顯示邊框嚼黔。使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> -
表格的表頭
表格的表頭使用
<th>標(biāo)簽進(jìn)行定義细层。大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> -
表格中的空單元格
在一些瀏覽器中，沒(méi)有內(nèi)容的表格單元顯示得不太好唬涧。如果某個(gè)單元格是空的（沒(méi)有內(nèi)容）疫赎，瀏覽器可能無(wú)法顯示出這個(gè)單元格的邊框
注意：這個(gè)空的單元格的邊框沒(méi)有被顯示出來(lái)。為了避免這種情況碎节，在空單元格中添加一個(gè)空格占位符(
)捧搞，就可以將邊框顯示出來(lái) -
表格標(biāo)簽
<table>定義表格 <caption>定義表格標(biāo)題 <th>定義表格的表頭 <tr>定義表格的行 <td>定義表格的單元 <thead>定義表格的頁(yè)眉 <tbody>定義表格的主題 <tfoot>定義表格的頁(yè)腳 <col>定義表格的列的屬性 <colgroup>定義表格列的組 -
跨行跨列
通過(guò)屬性colspan和rowspan可以實(shí)現(xiàn)跨列和跨行
作業(yè)題目
跨行列表格
題目分析
首先可以將表格分為表格標(biāo)題，頁(yè)眉狮荔，頁(yè)腳胎撇，這個(gè)表格的難點(diǎn)在于表格中間出現(xiàn)的跨行跨列混合單元格。我們還是逐步分析
-
首先通過(guò)
<table>標(biāo)簽建立一個(gè)五行四列殖氏，帶表格標(biāo)題晚树，區(qū)分表格頁(yè)眉、主體雅采、頁(yè)腳的標(biāo)準(zhǔn)表格格式爵憎，并且將表格邊寬度為1<table border="1"> <caption>標(biāo)題</caption> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <th>2-1</th> <th>2-2</th> <th>2-3</th> <th>2-4</th> </tr> </thead> <tbody> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </tbody> <tfoot> <tr> <td>5-1</td> <td>5-2</td> <td>5-3</td> <td>5-4</td> </tr> </tfoot> </table>為了更加清楚，我們將每個(gè)單元格內(nèi)容都寫(xiě)上了對(duì)應(yīng)的坐標(biāo)
第一步 -
經(jīng)過(guò)第一步我們就可以看到一個(gè)基本的表格結(jié)構(gòu)了婚瓜，接下來(lái)需要處理的就是跨行和跨列宝鼓。由題目可以看出第一行的第一列要跨兩行合并、第一行的二三列要跨列合并巴刻、第一行的第四列要跨兩行合并席函。因此我們只需要使用colspan和rowspan屬性對(duì)上述三種合并形式進(jìn)行實(shí)現(xiàn)即可
<table border="1"> <caption>標(biāo)題</caption> <thead> <tr> <th rowspan="2">1-1</th> <th colspan="2">1-2</th> <th rowspan="2">1-4</th> </tr> <tr> <th>2-2</th> <th>2-3</th> </tr> </thead> <tbody> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </tbody> <tfoot> <tr> <td>5-1</td> <td>5-2</td> <td>5-3</td> <td>5-4</td> </tr> </tfoot> </table>
這里需要注意的是，我們需要把跨行跨列后被合并的單元格刪除掉冈涧，否則會(huì)由于空間不夠而造成表格格式混亂
第二步
-
可以看到經(jīng)過(guò)第二步我們已經(jīng)實(shí)現(xiàn)了頁(yè)眉的跨行跨列合并了茂附，最后我們?cè)趯?duì)頁(yè)腳第一列進(jìn)行跨三列合并正蛙，單元格內(nèi)容居中顯示即可
<table border="1"> <caption>標(biāo)題</caption> <thead> <tr> <th rowspan="2">1-1</th> <th colspan="2">1-2</th> <th rowspan="2">1-4</th> </tr> <tr> <th>2-2</th> <th>2-3</th> </tr> </thead> <tbody> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">5-1</th> <td>5-4</td> </tr> </tfoot> </table>
第三步
總結(jié)
可以看出對(duì)于復(fù)雜的跨行跨列表格結(jié)構(gòu)，我們只需要先將標(biāo)準(zhǔn)表格畫(huà)出营曼，然后單獨(dú)一個(gè)一個(gè)去處理跨行跨列行為即可
實(shí)現(xiàn)代碼
<table border="1">
<caption>購(gòu)物車(chē)</caption>
<thead>
<tr>
<th rowspan="2">名稱(chēng)</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
</tr>
<tr>
<th>重量</th>
<th>單價(jià)</th>
</tr>
</thead>
<tbody>
<tr>
<td>蘋(píng)果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">總價(jià)</th>
<td>27元</td>
</tr>
</tfoot>
</table>
效果圖
