表格與<div>標(biāo)簽
一、基本表格
1、基本標(biāo)簽介紹
<table>表格標(biāo)簽：表格的其他標(biāo)簽需要在次標(biāo)簽里才有效</table>
<tr>行標(biāo)簽：在表格中有幾組tr標(biāo)簽就表示有幾行</tr>
<td>單元格標(biāo)簽:標(biāo)識(shí)在當(dāng)前行下有幾個(gè)單元格，也就是有幾列浪讳，通常也叫列標(biāo)簽</td>
<th>表頭標(biāo)簽：用來表示表格的表頭枚赡，特點(diǎn)是文字自動(dòng)加粗</th>
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1 align="center">基本表格——考試成績表</h1>
<table align="center">
<tr>
<th>姓名</th>
<th>語文</th>
<th>數(shù)學(xué)</th>
<th>英語</th>
</tr>
<tr>
<td>王佳</td>
<td>94分</td>
<td>89分</td>
<td>56分</td>
</tr>
<tr>
<td>李翔</td>
<td>76分</td>
<td>85分</td>
<td>88分</td>
</tr>
<tr>
<td>張穎佳</td>
<td>89分</td>
<td>86分</td>
<td>97分</td>
</tr>
</table>
</body>
</html>
2驰后、表頭的設(shè)置
<caption>表格的標(biāo)題</caption>
<th>表格的表頭</th>
源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單課程表</title>
</head>
<body>
<table align="center">
<caption>簡單課程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>數(shù)學(xué)</td>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>語文</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<td>語文</td>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>數(shù)學(xué)</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<td>數(shù)學(xué)</td>
<td>數(shù)學(xué)</td>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>語文</td>
</tr>
</table>
</body>
</html>
二厉斟、表格的高級(jí)應(yīng)用
1标锄、表格的樣式
除基本表格外，表格還可以添加一些基本樣式屬性端盆，比如寬度高度，對齊方式费封，插入圖片等
源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品表格</title>
</head>
<body>
<table align="center" width="60%">
<caption>商品表格</caption>
<tr bgcolor="#9acd32">
<th>潮流前沿</th>
<th>手機(jī)酷玩</th>
<th>品質(zhì)生活</th>
<th>國際清溝</th>
<th>個(gè)性推薦</th>
</tr>
<tr bgcolor="yellow">
<td>換新</td>
<td>手機(jī)館</td>
<td>必?fù)?lt;/td>
<td>識(shí)貨</td>
<td>囤貨</td>
</tr>
<tr bgcolor="#bc8f8f ">
<td>品牌精選新品</td>
<td>手機(jī)新品</td>
<td>聚超值賣封了</td>
<td>全球最熱好貨</td>
<td>居家必備</td>
</tr>
<tr>
<td><img src="img/1.jpg" vspace="50"></td>
<td><img src="img/2.jpg" vspace="50"></td>
<td><img src="img/3.jpg" vspace="50"></td>
<td><img src="img/4.jpg" vspace="50"></td>
<td><img src="img/5.jpg" vspace="50"></td>
</tr>
</table>
</body>
</html>
2焕妙、表格的合并
<td colspan=" ">跨列</td>
<td rowspan=" ">跨行</td>
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body background="img/11.gif">
<h1 align="center"><em>課 程 表</em></h1>
<table align="center" bgcolor="aqua" border="2">
<tr height="20">
<th width="50"></th>
<th width="20"></th>
<th width="60">星期一</th>
<th width="60">星期二</th>
<th width="60">星期三</th>
<th width="60">星期四</th>
<th width="60">星期五</th>
</tr>
<tr height="20" align="center">
<td width="50" rowspan="2">上午</td>
<td width="20">1</td>
<td width="60">數(shù)學(xué)</td>
<td width="60">語文</td>
<td width="60">英語</td>
<td width="60">體育</td>
<td width="60">語文</td>
</tr>
<tr height="20" align="center">
<td width="20">2</td>
<td width="60">音樂</td>
<td width="60">英語</td>
<td width="60">政治</td>
<td width="60">美術(shù)</td>
<td width="60">音樂</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">下午</td>
<td width="20">3</td>
<td width="60">舞蹈</td>
<td width="60">化學(xué)</td>
<td width="60">生物</td>
<td width="60">歷史</td>
<td width="60">政治</td>
</tr>
<tr height="20" align="center">
<td width="20">4</td>
<td width="60">數(shù)學(xué)</td>
<td width="60">體育</td>
<td width="60">生物</td>
<td width="60">歷史</td>
<td width="60">美術(shù)</td>
</tr>
</table>
</body>
</html>
3、表格的分組
語法：<colgroup>
<col style="屬性">
</colgroup>
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body background="img/11.gif">
<h1 align="center"><em>課 程 表</em></h1>
<table align="center" bgcolor="aqua" border="2px">
<colgroup>
<col style="background:yellowgreen">
<col style="background:white">
<col style="background:yellow">
<col style="background:blueviolet">
<col style="background:blue">
</colgroup>
<tr height="20">
<th width="50"></th>
<th width="20"></th>
<th width="60">星期一</th>
<th width="60">星期二</th>
<th width="60">星期三</th>
<th width="60">星期四</th>
<th width="60">星期五</th>
</tr>
<tr height="20" align="center">
<td width="50" rowspan="2">上午</td>
<td width="20">1</td>
<td width="60">數(shù)學(xué)</td>
<td width="60">語文</td>
<td width="60">英語</td>
<td width="60">體育</td>
<td width="60">語文</td>
</tr>
<tr height="20" align="center">
<td width="20">2</td>
<td width="60">音樂</td>
<td width="60">英語</td>
<td width="60">政治</td>
<td width="60">美術(shù)</td>
<td width="60">音樂</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">下午</td>
<td width="20">3</td>
<td width="60">舞蹈</td>
<td width="60">化學(xué)</td>
<td width="60">生物</td>
<td width="60">歷史</td>
<td width="60">政治</td>
</tr>
<tr height="20" align="center">
<td width="20">4</td>
<td width="60">數(shù)學(xué)</td>
<td width="60">體育</td>
<td width="60">生物</td>
<td width="60">歷史</td>
<td width="60">美術(shù)</td>
</tr>
</table>
</body>
</html>
4弓摘、div標(biāo)簽
塊級(jí)標(biāo)簽焚鹊，用于設(shè)置文字，表格韧献，圖片的擺放位置
屬性：
id：規(guī)定div的名字末患，常與CSS樣式結(jié)合研叫，實(shí)現(xiàn)對網(wǎng)頁中元素的控制
align:設(shè)置標(biāo)簽中元素的對其方式
class:用來設(shè)置標(biāo)簽中元素的樣式，其值為css樣式中的class的選擇符
style:其值為CSS中的屬性值璧针，在各屬性值之間使用分隔符
5span標(biāo)簽
語法：
<span>需要改變樣式的文字</span>
