表格標(biāo)簽
定義:給一堆數(shù)據(jù)添加表格語(yǔ)義
格式:
<table>
<tr>
<td>需要顯示的內(nèi)容</td>
</tr>
</table>
表格中<table>標(biāo)簽是代表整個(gè)表格,即一堆<table>標(biāo)簽就是一個(gè)表格
<tr>標(biāo)簽代表表格中的一行
<td>標(biāo)簽代表一行中的一個(gè)單元格
注意點(diǎn):
1.表格有一個(gè)邊框?qū)傩裕J(rèn)為0,要想顯示邊框,需要在table標(biāo)簽中添加屬性border=“1”
2.表格標(biāo)簽是一個(gè)組合,一起出現(xiàn)
表格標(biāo)簽屬性(了解)
1.寬度和高度屬性:只給table標(biāo)簽和td標(biāo)簽
1.1寬度可通過(guò)給table標(biāo)簽設(shè)置width和height屬性來(lái)手動(dòng)設(shè)置寬度和高度
1.2如果把td單元格設(shè)置寬度和高度,只會(huì)改變當(dāng)前單元格的寬和高氢伟,不會(huì)影響整個(gè)單元格的寬和高
2.水平對(duì)齊和垂直對(duì)齊屬性
其中水平對(duì)齊可以給table和tr和td標(biāo)簽使用
垂直屬性只能給tr和td屬性使用
2.1給table標(biāo)簽設(shè)置align屬性可以控制表格在水平方向上的對(duì)齊
2,2給tr標(biāo)簽設(shè)置align屬性可以控制當(dāng)前所有單元格水平方向的屬性
2.3給td設(shè)置align屬性,可以控制當(dāng)前單元格在水平方向上的屬性
方向?qū)傩宰⒁恻c(diǎn):如果在tr中設(shè)置了align屬性幽歼,td中也設(shè)置了align屬性朵锣,那么單元格會(huì)按照td中的設(shè)置來(lái)
2.4給tr設(shè)置vlign可以控制當(dāng)前行所有屬性垂直方向的屬性
2.5給td設(shè)置vlign屬性可以控制當(dāng)前單元格所在垂直方向上的屬性
3.外邊距和內(nèi)邊距:只能給table標(biāo)簽使用
3.1外邊距指的是單元格與單元格之間的間隙,默認(rèn)是2甸私,cellspacing=“2px”
3.2內(nèi)邊距指的是文字與單元格之間的間隙诚些,cellpadding=1"
**注意:以上內(nèi)容僅僅作為了解,所有控制央視用css
畫(huà)一個(gè)細(xì)線表格(了解)
1給table標(biāo)簽設(shè)置bgcolor皇型,cellspacing=“1px”
2給tr標(biāo)簽設(shè)置bgcolor
表格標(biāo)簽中的其它標(biāo)簽
caption標(biāo)簽诬烹,在表格標(biāo)簽中專門用于指定表格標(biāo)題的
注意點(diǎn):
1caption標(biāo)簽必須寫(xiě)在table標(biāo)簽內(nèi),否則無(wú)效
2caption必須緊跟在table標(biāo)簽后面
例如:
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小說(shuō)排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
標(biāo)題單元格標(biāo)簽
在表格標(biāo)簽中弃鸦,提供了一個(gè)標(biāo)簽專門用來(lái)設(shè)置每一列表標(biāo)題绞吁,在各個(gè)標(biāo)題標(biāo)簽叫做th標(biāo)簽,只要將當(dāng)前列標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中寡键,就會(huì)自動(dòng)居中加粗文字掀泳。
到此為止,發(fā)現(xiàn)表格中有兩種單元格td和th標(biāo)簽西轩,td標(biāo)簽專門用來(lái)存數(shù)數(shù)據(jù)的员舵,th標(biāo)簽專門用來(lái)存儲(chǔ)當(dāng)前列的標(biāo)題。
單元格合并
1.水平方向的合并
可以給td標(biāo)簽添加colspan屬性藕畔,用來(lái)把某個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待
例如:
<td colspan="2"></td>
含義:把當(dāng)前單元格當(dāng)做兩個(gè)單元格來(lái)看待
注意點(diǎn):
1由于把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待马僻,所以就會(huì)多出一些單元格,所以需要?jiǎng)h掉一些單元格
2單元格永遠(yuǎn)是向右或者向下合并
3垂直合并單元格<td rowspan="2"></td>
練習(xí)中的注意點(diǎn):快捷鍵的使用
1快速移動(dòng)選中的代碼:上下移動(dòng)
往上移動(dòng)Ctrl+shift+向上的箭頭
往下移動(dòng)Ctrl+shift+項(xiàng)下的箭頭
快速合并展開(kāi)代碼
合并Ctrl+-注服,展開(kāi)Ctrl++
快速合并和展開(kāi)代碼(合并和展開(kāi)選中的所有的標(biāo)簽)
合并Ctrl+shift+-
展開(kāi)Ctrl+shift+-
快速新奇一行:shift+enter