建立表格行:
建立列(單元格):
注意:預設情況下,每行中的列數是統一的。
table : display:table;
html table表格的特色:
1.獨佔一行
2.寬度自適應(由內容決定)
html table的表格屬性:
1、< table> 屬性
1.width:設定表格寬度
2.height:設定表格高度
3.align:其父元素中設定表格的水平對齊方式,取值:left,center,right
4.border:邊框,邊框寬度,以px為單位的數值,px可以省略
# 5.cellpadding
單元格內邊界
單元格內邊界
單元邊框與內容之間的距離
6.cellspacing
# 單元格之間或單元格與表格之間的距離 7.bgcolor:背景顏色2、table中的
3、table中的
1、
作用:定義標題為表格
# 作用:為表格定義標題
位置:表格正上方居中顯示
<table> <caption>标题</caption> <tr> <td></td> <td></td> </tr> </table>
2、行標題或列標題
# 列標題:第一行中的每一列,加粗,水平居中的效果顯示
行標題:每行裡面的第一列, 加粗,水平居中的效果顯示
行(列)標題:
3、表格的複雜應用程式
1、行分組
#表格可以分割成3個部分
# 1、表頭
2、表格主體
<table> <tbody> <tr></tr> <tr></tr> </tbody> </table>
注意:如果不對表格行分組的話,那麼預設都屬於tbody 中
2、不規則表格#每行中的列數,不是統一化的。
1.跨列
合併列,讓指定的單元格,橫向向右,合併幾個單元格(包含自己)
語法:td 的colspan 屬性
2.跨行
合併行,讓指定的單元格,縱向向下,合併幾個單元格(包含自己)
語法:td 的rowspan 屬性
注意:無論是跨行或跨列,合併的儲存格一定從程式碼中刪除出去
3、表格的巢狀在在一個表格中,又嵌入了另一個表格
被嵌套的表格必須出現在
<table> <tr> <td> <table> <tr> <td> </td> </tr> </table> </td> </tr> </table>
1、html table表格樣式屬性之邊框合併
#屬性:border-collapse
為值:1.separate:預設值,分離邊框模式 1.collapse:邊框合併模式
2、html table表格樣式屬性之邊框邊距
1.作用:設定相鄰單元格邊框之間的距離(類似cellspacing)
#2.屬性:border-spacing取值:
1、取1個值
表示水平和垂直間距相等
2.取2個值
第一個值表示的水平間距
第二個值表示的垂直間距
兩個值之間以空格隔開
3.要求
border-collapse必須為separate
必須為分離邊框模式時有效
3、html table表格樣式屬性之標題位置
作用:將標題位置由預設的位置改到表格之下
屬性:caption-side
##取值: 1、top:預設 2、bottom:標題位於表格之下4、html table表格樣式屬性之顯示規則
#1.作用
指定瀏覽器以什麼樣的方式來佈局一個表格。實際上是指定了單元格的演算法規則預設演算法:單元格的寬由內容來決定,不受設定的width值來限定。 2.屬性:table-layout取值:1、auto:預設值,自動,列寬由內容決定2 、fixed:固定表格佈局,列寬由設定的數值決定。 3、自動表格佈局&固定表格佈局 1.自動表格佈局(auto) 儲存格的大小會適應內容大小# 在表格複雜時,載入會比較慢 適用於不確定每列大小時使用 傳統表格表現方式 2.固定表格佈局(fixed)儲存格的大小由設定的值決定,與內容無關 會加速顯示表格,瀏覽器在載入完第一行的時候就不用再計算了。 4、隱藏的顯示效果屬性: visibility:collapse用在表格元素上,刪除一行或一列,不影響表格整個佈局 #謝謝你看完了這篇文章,如果有什麼疑問或是什麼關於這上面的問題你都可以在下面提問。 還有一篇是這個進階版的文章,歡迎點擊:
html5 table標籤的樣式介紹(另附html5 table css居中的實例)
【小編的相關文章】html optgroup標籤是什麼意思?關於html optgroup標籤的用法與屬性實例解析
以上是html table表格是什麼?