html表格的作用有哪些

這篇文章主要介紹“html表格的作用有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html表格的作用有哪些”文章能幫助大家解決問題。

html表格的作用是展示數據。表格主要用于顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好；特別是后臺展示數據的時候，能夠熟練運用表格就顯得很重要；一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

表格是實際開發中非常常用的標簽。

1.表格的主要作用

表格主要用于顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是后臺展示數據的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。

總結：表格不是用來布局頁面得，而是用來展示數據的。

例如：

2.表格的基本語法

<table>
	<tr>
		<td>單元內得文字</td>
		...
	</tr>
</table>

• <table></table>是用于定義表格的標簽。

• <tr></tr>標簽用于定義表格中的行，必須嵌套在<table></table>標簽中。

• <td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

• 字母 td 指表格數據(table data),即單元格的內容。

表頭單元格標簽

一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗劇中顯示。

<th>標簽表示HTML表格的表頭部分(table head的縮寫)。

總結：表頭單元格也是單元格，常用于表格的第一行，突出重要性，表頭單元格里面的文字會加粗居中顯示。

表格的結構標簽

使用場景：因為表格可能很長，為了更好的表示表格的予以語義，可以將表格分成表格頭部和表格的主體兩大部分。

在表格標簽中，分別使用：<thead>標簽 表格的頭部區域、<tbody>標簽的主體區域。這樣可以更好的分清表格結構。

• <thead></thead>：用于定義表格的頭部。內部必須擁有標簽。一般是位于第一行。

• <tbody><tbody>：用于定義表格的主體，主要用于放數據本體。

• 以上標簽都是放在<table></table>標簽中。

例子：

<table border="1">
     <thead>  
   		  <tr><th>姓名</th>  <th>性別</th> <th> 年齡 </th></tr> 
     <thead>
     <tbody>
		  <tr><td>劉德華</td>  <td>男</td> <td> 56 </td></tr>
       	  <tr><td>張學友</td>  <td>男</td> <td> 58 </td></tr>
          <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
          <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
          </tbody>
    </table>

表格屬性，這部分屬性我們實際開發中不常用，后面通過CSS來設置。

目的有兩個：

• 記住CSS這些單詞，后面CSS會使用。

• 直觀感受表格的外觀形態。

案例：小說排行榜

案例分析：

• 第一行里面是 th 表頭單元格

• 第二行開始里面是 td 普通單元格

• 單元格里面可以放任何元素，文字鏈接圖片等后可以

后書寫表格屬性屬性

• 用到寬度高度邊框 cellpadding 和 cellspacing

• 瀏覽器中對齊 align

具體代碼如下：

 <table align="center" width="500" height="249" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>關鍵詞</th>
                <th>封面</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>靠近你會掉刺</td>
                <td><img src="images/1.jpg"></td>
            </tr>
            <tr>
                <td>2</td>
                <td>魔尊要抱抱</td>
                <td><img src="images/2.jpg"></td>
            </tr>
            <tr>
                <td>3</td>
                <td>觸碰的旋律</td>
                <td><img src="images/3.jpg"></td>
            </tr>
            <tr>
                <td>4</td>
                <td>穿越成反派要如何活命</td>
                <td><img src="images/4.jpg"></td>
            </tr>
        </tbody>
    </table>

合并單元格

特殊情況下，可以把多格單元格合并為一個單元格。

合并單元格方式

跨行合并： rowspan=“合并單元格的個數”。
跨列合并： colspan=“合并單元格的個數”。

目標單元格：（寫合并代碼）

跨行：最上側單元格為目標單元格，寫合并代碼
跨列：最左側單元格為目標單元格，寫合并代碼

合并單元格三部曲：

• 1.先確定是跨行還是跨列合并。

• 2.找到目標單元格，寫合并方式 = 合并的單元格數量 。
  比如：<td colspan = "2"></td>。

• 3.刪除多余的單元格。

例子：

 <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
    
    </table>

關于“html表格的作用有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。