表格的基本結(jié)構(gòu)
表格是網(wǎng)頁(yè)上最常見的元素怠李，它除了可以用來展示數(shù)據(jù)弥奸，還常常被用來排版。雖然現(xiàn)在提倡使用DIV+CSS完成頁(yè)面布局罐韩，但表格框架簡(jiǎn)單明了憾赁，對(duì)于繁雜的數(shù)據(jù)，一個(gè)簡(jiǎn)潔的表格能讓其展現(xiàn)的極有條理散吵。
簡(jiǎn)單來說龙考，表格是由行、列（單元格）組成错蝴。表格由 <table> 標(biāo)簽來定義洲愤。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行又由若干單元格（即列顷锰，由 <td> 標(biāo)簽定義）組成柬赐。表格單元格里可以包含文本、圖片官紫、列表肛宋、段落、表單束世、水平線酝陈、表格（嵌套）等等。
別羅嗦毁涉，看代碼沉帮。
下面的代碼是一個(gè)兩行兩列的表格。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格開始-->
<tr><!--表格第一行-->
<td>姓名</td><!--第一行第一個(gè)單元格-->
<td>張三</td><!--第一行第二個(gè)單元格-->
</tr>
<tr><!--表格第二行-->
<td>民族</td><!--第二行第一個(gè)單元格-->
<td>漢族</td><!--第二行第二個(gè)單元格-->
</tr>
</table><!--表格結(jié)束-->
</body>
</html>
表格默認(rèn)是沒有邊框的贫堰，下面的效果圖加入了邊框穆壕，目的是能讓表格的結(jié)構(gòu)更清晰。
表格的標(biāo)準(zhǔn)結(jié)構(gòu)
表格除了行<tr>和單元格<td>其屏，還可以有標(biāo)題<caption>和表頭<th>喇勋。另外，表格的語(yǔ)義化還將表格分為表格頁(yè)眉<thead>偎行、表格主體<tbody>川背、表格頁(yè)腳<tfoot>三個(gè)部分。引入語(yǔ)義化蛤袒，能夠讓表格結(jié)構(gòu)更清晰熄云、代碼語(yǔ)義更良好。
下面的示例代碼加入了標(biāo)題和表頭妙真，同時(shí)引入了表格語(yǔ)義化皱碘，將表格分為頁(yè)眉、主體隐孽。頁(yè)腳三個(gè)部分癌椿，表格語(yǔ)義化是否添加不會(huì)影響到表格的顯示效果健蕊。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格開始-->
<caption>第一學(xué)期學(xué)生成績(jī)表</caption><!--表格標(biāo)題-->
<thead><!--表格頁(yè)眉-->
<tr><!--第一行-->
<th>姓名</th><!--表頭-->
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>物理</th>
</tr>
</thead>
<tbody><!--表格主體-->
<tr><!--第二行-->
<td>張小明</td>
<td>80</td>
<td>90</td>
<td>80</td>
</tr>
<tr><!--第三行-->
<td>王小花</td>
<td>90</td>
<td>70</td>
<td>80</td>
</tr>
</tbody>
<tfoot><!--表格頁(yè)腳-->
<tr><!--第四行-->
<td>平均分</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
</tfoot>
</table><!--表格結(jié)束-->
</body>
</html>
表格默認(rèn)是沒有邊框的，下面的效果圖加入了邊框踢俄，目的是能讓表格的結(jié)構(gòu)更清晰缩功。
表格的行、列合并
在表格的實(shí)際應(yīng)用中都办，經(jīng)常需要將表格相鄰的兩個(gè)或多個(gè)單元格合并嫡锌，以滿足不同長(zhǎng)度或不同類型的數(shù)據(jù)展示。
<td>標(biāo)簽的【rowspan】屬性可以實(shí)現(xiàn)合并行琳钉，<td rowspan="合并的行數(shù)">
<td>標(biāo)簽的【colspan】屬性可以實(shí)現(xiàn)合并列势木，<td colspan="合并的列數(shù)">
示例代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*設(shè)置圖片的寬和高，防止將表格撐變形*/ img {width:76px; height:82px;}
</style>
</head>
<body>
<table>
<tr><!--第1行-->
<td>姓名:</td>
<td>小叮當(dāng)</td><!--下面是合并兩行-->
<td rowspan="2"><img src="小叮當(dāng).jpg"/></td>
</tr>
<tr><!--第2行-->
<td>作品:</td>
<td>哆啦A夢(mèng)</td>
</tr>
<tr><!--第3行-->
<td>簡(jiǎn)介:</td><!--下面是合并兩列-->
<td colspan="2">來自一部漫畫作品</td>
</tr>
</table>
</body>
</html></pre>
表格默認(rèn)是沒有邊框的歌懒，下面的效果圖加入了邊框啦桌，目的是能讓表格的結(jié)構(gòu)更清晰。
表格的CSS樣式
表格默認(rèn)是沒有邊框的及皂，我們可以使用border屬性為table設(shè)置邊框甫男。上面的代碼都是加入邊框，可以看到验烧，表格都是雙線條邊框板驳，這是由于 table、th 以及 td 元素都有獨(dú)立的邊框碍拆∪糁危【border-collapse】屬性可以設(shè)置是否把表格邊框合并為單一的邊框，該屬性的取值主要有兩個(gè)感混，值【separate】為默認(rèn)值直砂，表示邊框分開不合并，值【collapse】為合并邊框浩习。
當(dāng)表格的邊框?qū)傩浴綽order-collapse】的值為默認(rèn)值【separate】，即邊框分開時(shí)济丘，我們還可以利用屬性【border-spacing】來設(shè)置相鄰單元格的邊框間的距離谱秽。該屬性可以設(shè)置一個(gè)或兩個(gè)像素值，當(dāng)設(shè)置一個(gè)像素值時(shí)摹迷，表示水平和垂直間隔為同一值疟赊；如果設(shè)置了兩個(gè)值，則第一個(gè)為水平間距峡碉，第二個(gè)為垂直間距近哟。
示例代碼：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*為表格設(shè)置邊框樣式*/ table,th,td{border:1px solid red;} table.one { /*設(shè)置第一個(gè)表格為合并邊框*/ border-collapse: collapse;
} table.two { /*設(shè)置第二個(gè)表格為分離邊框，同時(shí)設(shè)置水平間距10px鲫寄，垂直間距50px*/ border-collapse: separate; border-spacing: 10px 30px }
</style>
</head>
<body>
<table class="one">
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
</table>
<br />
<table class="two">
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
</table>
</body>
</html>
自己整理了一份最全前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS [炫酷特效吉执，游戲疯淫，插件封裝，設(shè)計(jì)模式]到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有戳玫，送給每一位前端小伙伴熙掺。企鵝裙：685910553（前端資料分享）。有想學(xué)習(xí)web前端的咕宿，或是轉(zhuǎn)行币绩，或是大學(xué)生，還有工作中想提升自己能力的府阀，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)缆镣。
