一芋绸,定義
其實表格是一種數(shù)據(jù)的展現(xiàn)形式,當數(shù)據(jù)量非常大的時候,表格這種展現(xiàn)形式被認為是最為清晰的一種展
現(xiàn)形式。
作用:用來給一堆數(shù)據(jù)添加表格語義迁客。
格式:
表格標簽中的table代表整個表格,也就是一堆table標簽就是一個表格
表格標簽中的tr標簽代表整個表格中的一行數(shù)據(jù),也就是說一對tr標簽就是表格中的一行
表格標簽中的td標簽代表表格中一行中的一個單元格,也就是說一對td標簽就是一行中的一個單元格
注意:
1)表格標簽有一個邊框?qū)傩?這個屬性決定了邊框的寬度.默認情況下這個屬性的值是0,所以看不到
邊框郭宝;
2)表格標簽是一個組合標簽,所以table/tr/td只會一起出現(xiàn),不會一起不出現(xiàn),也不會單個出現(xiàn)掷漱。
其中粘室,cellspacing表示單元格間距;cellpadding表示單元格邊距卜范。valign衔统,align用來分別定位垂直方向和水平方向上的位置。valig取值有top/center/bottom海雪;nalign取值有l(wèi)eft/center/right 锦爵。
二,細線表格(了解)
在表格標簽中想通過指定外邊距為0來實現(xiàn)細線表格是不靠譜的,其實它是將2條線合并為
了一條線,所以看上去很不舒服奥裸。
細線表格的制作方式:
1.給table標簽設(shè)置backgroundcolor险掀;
?2.給tr標簽設(shè)置backgroundcolor;
3.給table標簽設(shè)置cellspacing = "1px"
注意:
table標簽和tr標簽以及td標簽都支持bgcolor屬性湾宙;
三樟氢,其他表格標簽
1,表格標題
在表格標簽中提供了一個標簽專門用來設(shè)置表格的標題,這個標簽叫做caption.只要將標題寫在
caption標簽中,那么標題就會自動相對于表格的寬度居中侠鳄。
注意:
1)caption一定要寫在table標簽中,否則無效埠啃;
2)caption一定要緊跟在table標簽后面。
2畦攘,標題單元格標簽
1)在表格標簽中提供了一個標簽專門用來存儲每一列的標題,這個標簽叫做th標簽,只要將當前列的
標題存儲在這個標簽中就會自動居中+加粗文字。
2)格中有兩種單元格,一種是td,一種是th. td是專門用來存儲數(shù)據(jù)的, th是專門用來存儲當前列的標
簽十电。
四知押,表格結(jié)構(gòu)
1叹螟,由于表格中存儲的數(shù)據(jù)比較復雜,為了方便管理和閱讀以及提升語義,我們可以對表格中存儲的數(shù)據(jù)
進行分類。
表格中存儲的數(shù)據(jù)可以分為4類:
1)標題台盯;
2)表頭信息罢绽;
3)主體信息;
4)頁尾信息静盅。
2良价,完整的表格結(jié)構(gòu):
其中,caption作用:指定表格的標題蒿叠;
thead作用:指定表格的表頭信息明垢;
tbody作用:指定表格的主體信息;
tfoot作用:指定表格的附加信息市咽。
注意:
1)如果我們沒有編寫tbody,系統(tǒng)會系統(tǒng)給我們添加tbody痊银;
2)如果指定了thead和tfoot,那么在修改整個表格的高度時, thead和tfoot有自己默認的高度,不會隨著
表格的高度變化而變化。
五施绎,表格的合并
1溯革,水平方向上的單元格的合并
給td標簽添加一個colspan屬性,來指定把某一個單元格當做多個單元格來看待(水平方向),例如
<td colspan="2"></td>(把當前單元格擋住哦一個單元格來看待)
注意:
1)由于把某一個單元格當做了多個單元格來看到,所以就會多出一些單元格,所以需要刪掉一些單元
格谷醉;
2)一定要記住單元格合并永遠都是向后或者向下合并,而不能向前或者向上合并致稀;
2,垂直方向上的單元格的合并
給td標簽設(shè)置一個rowspan屬性,來指定把某一個單元格當做多個單元格來看待(垂直方向)俱尼,例如:
<td rowspan="2"></td>(把當前單元格當做兩個單元格來看待[垂直方向])
快捷鍵:
快速移動選中的代碼,上下移動:往上移動Ctrl + shift +↑抖单、往下移動Ctrl + shift +↓
快速合并和展開代碼:合并: Ctrl + "-"/展開: Ctrl + "+"
快速合并和展開代碼:合并: Ctrl + shift + "-"/展開: Ctrl + shift +"+"
快速新啟一行:shift + enter。