HTML基礎（五）---表格標籤
一、表格的應用與建立
1、表格標籤的語法格式
table是表格標籤，tr是一行，td是一個單元格
二、tabel表格標籤屬性
1、table表格標籤的基礎屬性
第一、width屬性：定義表格的寬度，寬度有兩種情況：一種是精確值，比如500，不會隨著瀏覽器的縮減或增大而改變表格大小；二種是百分比，例如50%，會隨著瀏覽器的縮減或增大而改變表格大小
第二、border屬性：規定圍繞表格的邊框寬度
第三、cellspacing屬性：規定單元格之間的距離（間距）
第四、cellpadding屬性：規定單元格邊沿
2、table表格標籤的其他屬性
第一、align屬性：規定表格相對周圍元素的對齊方式，分別有left、center、right三個值，主要針對整個表格
第二、bgcolor屬性：規定表格的背景顏色
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>表格標籤</title> </head> <body> <table border="1" width="50%" cellpadding="10" cellspacing="0" align="center"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table> </body> </html>
三、Tr標籤屬性
1、tr標籤的屬性和值
tr標籤是table表格標籤的行標籤，下面介紹tr標籤屬性
第一、align屬性：定義表格行的內容水平對齊方式，分別有left、center、right三個值，主要針對表格內容
第二、valign屬性：規定表格行中內容的垂直對齊方式，分別有top（頂端）、middle（居中）、bottom（底端）、baseline（基線，針對大小不同的字型統一於底部進行對齊），主要針對表格內容
第三、width屬性：規定表格單元格的寬度
第四、height屬性：規定表格單元格的高度
第五、colspan屬性：
第六、rowspan屬性：規定單元格可橫跨的行數
四、td標籤屬性
1、td標籤的屬性和值
第一、width規定表格單元格的寬度
第二、height規定表格單元格的高度
第三、colspan規定單元格可橫跨的列數
第四、rowspan規定單元格可橫跨的行數
<!DOCTYPE html>
<html>
<head>
<title>表格標籤其他屬性</title>
</head>
<body>
<!-- table標籤屬性 -->
<table border="1" cellpadding="0" cellspacing="0" width="500" align="center" bgcolor="#CCC">
<!-- tr標籤屬性 -->
<tr align="center" valign="top" height="40" bgcolor="green">
<!-- td標籤屬性 -->
<td width="300" bgcolor="red">1</td>
<td height="100">2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<!-- 在表格中插入圖片 -->
<td><img src="img_01.jpg"></td>
</tr>
<tr>
<!-- 列合併 -->
<td colspan="2">a</td>
<!-- 行合併 -->
<td rowspan="2">c</td>
</tr>
<tr>
<td>s</td>
<td>d</td>
</tr>
</table>
</body>
</html>
五、細線表格的做法
普通表格與細線表格
因為在table中的邊框設定為1時，單元格的左右兩邊都有間距，所以最少都是兩個畫素，顯示出來就不是細線表格邊框，而細線表格邊框是一畫素的，下面介紹細線表格一畫素做法
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>一般表格與細線表格</title>
</head>
<body>
<div><h3>以下是一般表格</h3></div>
<div>
<table border="1" width="500" cellspacing="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</div>
<div><h3>以下是細線表格</h3></div>
<div>
<!--細線邊框做法:
給定tabel背景為黑色並將間隔畫素設定為1，然後每個tr再把背景設定為白色 -->
<table width="500" bgcolor="#333" cellspacing="1">
<tr bgcolor="#fff">
<!-- 在做內容時一定要加寬度，保證每個單元格寬度一致 -->
<td width="100">1</td>
<td width="100">2</td>
<td width="100">3</td>
</tr>
</table>
</div>
</body>
</html>
六、表格的其他標籤
1、表格的其他標籤
第一、<th> 標籤定義 HTML 表格中的表頭單元格，就是表頭，相當於標題的作用
第二、<caption> 標籤定義表格的標題，並不包含在表格當中
第三、<thead> 標籤用於組合 HTML 表格的表頭內容
第四、<tbody> 標籤用於組合 HTML 表格的主體內容
第五、<tfoot> 標籤用於組合 HTML 表格的頁尾內容
書寫內容是先寫thead在寫tfoot在寫tbody，顯示時會劃分區域，最上方是thead、往下依次是tbody和tfoot，不會根據html程式碼中的thead、tbody、tfoot的順序來絕對顯示順序
如果需要進行復雜的表格搭建，可以在table當中巢狀table
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>其他標籤</title>
</head>
<body>
<table border="1" width="500">
<!-- thead用於組合 HTML 表格的表頭內容 -->
<thead>
<!-- 以下是表格的標題 -->
<caption>課程表</caption>
<tr>
<!-- 以下是單元格表頭，相當於列標題 -->
<th>head-1</th>
<th>head-2</th>
<th>head-3</th>
<th>head-4</th>
<th>head-5</th>
</tr>
</thead>
<!-- tfoot用於組合 HTML 表格的頁尾內容 -->
<tfoot>
<tr>
<td>tfoot-1</td>
<td>tfoot-2</td>
<td>tfoot-3</td>
<td>tfoot-4</td>
<td>tfoot-5</td>
</tr>
</tfoot>
<!-- tbody用於組合 HTML 表格的主體內容 -->
<tbody>
<tr>
<td>tbody-1</td>
<td>tbody-2</td>
<td>tbody-3</td>
<td>tbody-4</td>
<td>tbody-5</td>
</tr>
<tr>
<td>tbody-6</td>
<td>tbody-7</td>
<td>tbody-8</td>
<td>tbody-9</td>
<td>tbody-10</td>
</tr>
</tbody>
</table>
</body>
</html>
七、利用表格標籤製作購物圖標表格（類似京東）
利用表格標籤製作購物圖標表格，點選表格內圖片，可以開啟對應的商品頁面，以下是效果圖：
以下是html程式碼：
<!DOCTYPE html>
<html>
<head>
<title>京東排版</title>
</head>
<body>
<!-- 京東表格排版 -->
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#aaa" width="600" align="center">
<!-- 標題 -->
<tr bgcolor="#fff" height="240">
<!-- 表格商品1 -->
<td colspan="2"><a href="https://item.jd.com/7408023.html" target="_blank"><img src="images/tu1.jpg" /></a></td>
<!-- 表格商品2 -->
<td><a href="https://item.jd.com/32782291733.html" target="_blank"><img src="images/tu2.jpg" /></a></td>
</tr>
<tr bgcolor="#fff" height="150">
<!-- 表格商品3 -->
<td><a href="https://item.jd.com/32837978346.html" target="_blank"><img src="images/tu3.jpg" /></a></td>
<!-- 表格商品4 -->
<td><a href="https://item.jd.com/18013636497.html" target="_blank"><img src="images/tu4.jpg" /></a></td>
<!-- 表格商品5 -->
<td><a href="https://item.jd.com/5066434.html" target="_blank"><img src="images/tu5.jpg" /></a></td>
</tr>
</table>
</body>
</html>