html入門(六)表格

表格

在Web的歷史中,HTML的表格發(fā)揮了極大的作用。最 初創(chuàng)建表格就是為了以表格的形式顯示數(shù)據(jù),后來表格 變成了一個(gè)極受歡迎的布局工具。
但是有了CSS以后,CSS在布局網(wǎng)頁方面實(shí)際上會(huì)更出 色,所以現(xiàn)在我們使用表格的作用只有一個(gè),就是用來 表示格式化的數(shù)據(jù)。
HTML中的表格可以很復(fù)雜,但是通常情況下我們不需 要?jiǎng)?chuàng)建過于復(fù)雜的表格。

table、tr、th、td

使用table標(biāo)簽創(chuàng)建一個(gè)表格。
tr表示表格中的一行。
tr中可以編寫一個(gè)或多個(gè)th或td。
th表示表頭。
td表示表格中的一個(gè)單元格。

合并單元格

合并單元格指將兩個(gè)或兩個(gè)以上的單元格 合并為一個(gè)單元格。
合并單元格可以通過在th或td中設(shè)置屬性 來完成。
橫向合并
colspan
縱向合并
rowspan

caption、thead、tbody、tfoot

caption表示表格的標(biāo)題。
thead表示表格的頭部。永遠(yuǎn)顯示在最上面
tbody表示表格的主體。
tfoot表示表格的底部。永遠(yuǎn)顯示在最下面

表格的樣式

之前學(xué)習(xí)的很多屬性都可以用來設(shè)置表格的樣式,比如color可以用 來設(shè)置文本的顏色。padding可以設(shè)置內(nèi)容和表格邊框的距離。
text-align:設(shè)置文本的水平對齊。
vertical-align:設(shè)置文本的垂直對齊。
可選值:top、baseline、middle、bottom
border-spacing:邊框間距
border-collapse:合并邊框
collapse:合并邊框
separate:不合并邊框
設(shè)置border-collapse(邊框合并)時(shí)border-spacing(邊框間距)會(huì)失效

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容