1. 程式人生 > 其它 >web前端開發基礎之表格的基本設定

web前端開發基礎之表格的基本設定

表格
• 在Web的歷史中,HTML的表格發揮了極大的作用。最 初建立表格就是為了以表格的形式顯示資料,後來表格 變成了一個極受歡迎的佈局工具。

• 但是有了CSS以後,CSS在佈局網頁方面實際上會更出 色,所以現在我們使用表格的作用只有一個,就是用來 表示格式化的資料。

• HTML中的表格可以很複雜,但是通常情況下我們不需 要建立過於複雜的表格。

table、tr、th、td

• 使用table標籤建立一個表格。

• tr表示表格中的一行。

• tr中可以編寫一個或多個th或td。

• th表示表頭。

• td表示表格中的一個單元格。

caption、thead、tbody、tfoot

• caption表示表格的標題。

• thead表示表格的頭部。

• tbody表示表格的主體。

• tfoot表示表格的底部。

合併單元格

• 合併單元格指將兩個或兩個以上的單元格 合併為一個單元格。

• 合併單元格可以通過在th或td中設定屬性 來完成。

• 橫向合併 – colspan

• 縱向合併 – rowspan

表格的樣式
• 之前學習的很多屬性都可以用來設定表格的樣式,比如color可以用 來設定文字的顏色。padding可以設定內容和表格邊框的距離。

• text-align:設定文字的水平對齊。

• vertical-align:設定文字的垂直對齊。

– 可選值:top、baseline、middle、bottom

• border-spacing:邊框間距

• border-collapse:合併邊框

– collapse:合併邊框

– separate:不合並邊框

文章轉載連結:http://www.atguigu.com/jsfx/13352.html