一,定義
其實表格是一種數據的展現形式,當數據量非常大的時候,表格這種展現形式被認為是最為清晰的一種展
現形式。
作用:用來給一堆數據添加表格語義。
格式:
表格標簽中的table代表整個表格,也就是一堆table標簽就是一個表格
表格標簽中的tr標簽代表整個表格中的一行數據,也就是說一對tr標簽就是表格中的一行
表格標簽中的td標簽代表表格中一行中的一個單元格,也就是說一對td標簽就是一行中的一個單元格
注意:
1)表格標簽有一個邊框屬性,這個屬性決定了邊框的寬度.默認情況下這個屬性的值是0,所以看不到
邊框;
2)表格標簽是一個組合標簽,所以table/tr/td只會一起出現,不會一起不出現,也不會單個出現。
其中,cellspacing表示單元格間距;cellpadding表示單元格邊距。valign,align用來分別定位垂直方向和水平方向上的位置。valig取值有top/center/bottom;nalign取值有left/center/right 。
二,細線表格(了解)
在表格標簽中想通過指定外邊距為0來實現細線表格是不靠譜的,其實它是將2條線合并為
了一條線,所以看上去很不舒服。
細線表格的制作方式:
1.給table標簽設置backgroundcolor;
?2.給tr標簽設置backgroundcolor;
3.給table標簽設置cellspacing = "1px"
注意:
table標簽和tr標簽以及td標簽都支持bgcolor屬性;
三,其他表格標簽
1,表格標題
在表格標簽中提供了一個標簽專門用來設置表格的標題,這個標簽叫做caption.只要將標題寫在
caption標簽中,那么標題就會自動相對于表格的寬度居中。
注意:
1)caption一定要寫在table標簽中,否則無效;
2)caption一定要緊跟在table標簽后面。
2,標題單元格標簽
1)在表格標簽中提供了一個標簽專門用來存儲每一列的標題,這個標簽叫做th標簽,只要將當前列的
標題存儲在這個標簽中就會自動居中+加粗文字。
2)格中有兩種單元格,一種是td,一種是th. td是專門用來存儲數據的, th是專門用來存儲當前列的標
簽。
四,表格結構
1,由于表格中存儲的數據比較復雜,為了方便管理和閱讀以及提升語義,我們可以對表格中存儲的數據
進行分類。
表格中存儲的數據可以分為4類:
1)標題;
2)表頭信息;
3)主體信息;
4)頁尾信息。
2,完整的表格結構:
其中,caption作用:指定表格的標題;
thead作用:指定表格的表頭信息;
tbody作用:指定表格的主體信息;
tfoot作用:指定表格的附加信息。
注意:
1)如果我們沒有編寫tbody,系統會系統給我們添加tbody;
2)如果指定了thead和tfoot,那么在修改整個表格的高度時, thead和tfoot有自己默認的高度,不會隨著
表格的高度變化而變化。
五,表格的合并
1,水平方向上的單元格的合并
給td標簽添加一個colspan屬性,來指定把某一個單元格當做多個單元格來看待(水平方向),例如
<td colspan="2"></td>(把當前單元格擋住哦一個單元格來看待)
注意:
1)由于把某一個單元格當做了多個單元格來看到,所以就會多出一些單元格,所以需要刪掉一些單元
格;
2)一定要記住單元格合并永遠都是向后或者向下合并,而不能向前或者向上合并;
2,垂直方向上的單元格的合并
給td標簽設置一個rowspan屬性,來指定把某一個單元格當做多個單元格來看待(垂直方向),例如:
<td rowspan="2"></td>(把當前單元格當做兩個單元格來看待[垂直方向])
快捷鍵:
快速移動選中的代碼,上下移動:往上移動Ctrl + shift +↑、往下移動Ctrl + shift +↓
快速合并和展開代碼:合并: Ctrl + "-"/展開: Ctrl + "+"
快速合并和展開代碼:合并: Ctrl + shift + "-"/展開: Ctrl + shift +"+"
快速新啟一行:shift + enter。