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

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為順城企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站制作，順城網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

表格是實際開發(fā)中非常常用的標(biāo)簽。

1.表格的主要作用

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

總結(jié)：表格不是用來布局頁面得，而是用來展示數(shù)據(jù)的。

例如：

瓜類	單價	數(shù)目	金額
西瓜	12	10	120
哈密瓜	14	5	70
香瓜	8	15	120

2.表格的基本語法

<table>
	<tr>
		<td>單元內(nèi)得文字</td>
		...
	</tr>
</table>

• <table></table>是用于定義表格的標(biāo)簽。

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

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

• 字母 td 指表格數(shù)據(jù)(table data),即單元格的內(nèi)容。

表頭單元格標(biāo)簽

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

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

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

表格的結(jié)構(gòu)標(biāo)簽

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

在表格標(biāo)簽中，分別使用：<thead>標(biāo)簽 表格的頭部區(qū)域、<tbody>標(biāo)簽的主體區(qū)域。這樣可以更好的分清表格結(jié)構(gòu)。

• <thead></thead>：用于定義表格的頭部。內(nèi)部必須擁有標(biāo)簽。一般是位于第一行。

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

• 以上標(biāo)簽都是放在<table></table>標(biāo)簽中。

例子：

<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>張學(xué)友</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>

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

目的有兩個：

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

• 直觀感受表格的外觀形態(tài)。

屬性名	屬性值	描述
align	left 、center、right	規(guī)定表格相對周圍元素的對齊方式。
border	1或""	規(guī)定表格單元是否擁有邊框，默認(rèn)為""，表示沒有邊框
cellpadding	像素值	規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn) 1 像素
cellspacing	像素值	規(guī)定單元表格之間的空白，默認(rèn) 2 像素。
width	像素值或百分比	規(guī)定表格的寬度

案例：小說排行榜

案例分析：

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

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

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

后書寫表格屬性屬性

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

• 瀏覽器中對齊 align

具體代碼如下：

 <table align="center" width="500" height="249" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>關(guān)鍵詞</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=“合并單元格的個數(shù)”。
跨列合并： colspan=“合并單元格的個數(shù)”。

目標(biāo)單元格：（寫合并代碼）

跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼
跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼

合并單元格三部曲：

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

• 2.找到目標(biāo)單元格，寫合并方式 = 合并的單元格數(shù)量 。
  比如：<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>

關(guān)于“html表格的作用有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

文章名稱：html表格的作用有哪些
本文地址：http://chinadenli.net/article40/jgcsho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、搜索引擎優(yōu)化、域名注冊、品牌網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)