html表格標簽
表格標簽
主要作用:表格主要用於顯示、展示教程,因為他可以讓數據顯示的非常完整,可讀性非常好、特別是后台展示數據的時候,能夠熟練的運用表格就顯得非常重要。一個清爽簡約的表格能夠把繁雜的數據表現的很有條理。
所以表格不是用來布局的,是用來展示數據的。
基本語法
<table>
<tr>
<td>單元格內的文字</td>
....
</tr>
....
</table>
說明:
1、table是用於定義表格的標簽,是一個大標簽。
2、tr標簽是用於定義表格中的行,它必須嵌套在table標簽中。
3、td是用於定義表格中的單元格,必須嵌套在tr中。(table data)
表頭單元格標簽
一般表頭單元格位於表格的第一行或第一列,突出重要性。表頭單元格里面的文本內容加粗居中顯示。
th標簽表示HTML表格的表頭部分(table head的縮寫)
<table>
<tr>
<th>屬性</th>
....
</tr>
....
</table>
表格屬性
此部分內容在CSS部分會有詳解。
基本屬性如下:
屬性名 | 屬性值 | 描述 |
---|---|---|
align | left,center,right | 表格相對周圍元素的對齊方式 |
border | 1或“ ” | 規定是否有邊框,默認是“ ”表示沒有邊框 |
cellpadding | 像素值 | 表示單元格里的內容與單元格之間的空白,默認為1 |
cellspacing | 像素值 | 規定單元格之間的空白,默認為2像素 |
width | 像素值或者百分比 | 規定表格的寬度 |
表格結構標簽
因為表格可能很長,為了更好的表示表格的語義,可以將表格分割成表格頭和表格主體兩大部分。
在表格標簽中,分別使用:thead標簽表示表格的頭部區域,tbody標簽表示表格的主體區域。這樣可以更好的分清楚表格結構
thead標簽內部必須有tr標簽,一般是位於第一行。
tobody用於定義表格的主體,主要用於放數據本體。
以上標簽都是在table標簽中。
合並單元格
合並單元格的方式
跨行合並:rowspan="合並單元格的個數"
跨列合並:colspan="合並單元格的個數"
目標單元格
目標單元格是用來寫合並的代碼
跨行:最上側單元格為目標單元格,寫合並代碼
跨列:最左側單元格為目標單元格,寫合並代碼
三步走:
1、先確定是跨行還是跨列。
2、找到目標單元格,寫上合並的方式="合並的單元格數量"。
比如:
<td colspan="2"></td>//跨列合並
3、刪除多余的單元格。