HTML表格標簽


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、刪除多余的單元格。

以上內容來自[黑馬程序員前端Web全套教程,會打字就能學會的Web前端課程_嗶哩嗶哩_bilibili]()


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM