web前端開發基礎之表格的基本設定
阿新 • • 發佈:2021-07-12
表格
• 在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