首頁 >web前端 >前端問答 >html表格的作用是什麼

html表格的作用是什麼

青灯夜游
青灯夜游原創
2022-09-23 16:03:583997瀏覽

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

html表格的作用是什麼

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

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

1.表格的主要作用

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

總結:表格不是用來佈局頁面得,而是用來展示資料的。

例如:

瓜類別 #單價 數目 金額
西瓜 12 10 120
哈密瓜 14 5 70
#香瓜 8 #15 120

2.表格的基本語法



		...
	
单元内得文字
  • <table></table>是用來定義表格的標籤。

  • <tr></tr>標籤用於定義表格中的行,必須嵌套在<table> table>標籤中。 <li><p><code><td></td>用來定義表格中的儲存格,必須嵌套在<tr> tr>標籤中。 <li><p>字母 td 指表格資料(table data),即單元格的內容。 </p></li> <h3><strong>表格頭單元格標籤</strong></h3> <p>一般表頭單元格位於表格的第一行或第一列,表頭單元格裡面的文字內容加粗劇中顯示。 </p> <p><code><th>標籤表示HTML表格的表頭部分(table head的縮寫)。 <p><span style="color:red">總結</span>:表頭單元格也是單元格,常用於表格的第一行,突出重要性,表頭單元格裡面的文字會加粗居中顯示。 </p> <h3><strong>表格的結構標籤</strong></h3> <p><span style="color:red">使用場景</span>:因為表格可能很長,為了更好的表示表格的予以語義,可以將表格分成表格頭部和表格的主體兩大部分。 </p> <p>在表格標籤中,分別使用:<code><thead>標籤 表格的頭部區域、<code><tbody>標籤的主體區域。這樣可以更好的分清表格結構。 <ul style="list-style-type: disc;"> <li><p><code><thead></thead>:用來定義表格的頭部。內部必須擁有標籤。一般是位於第一行。

  • :用來定義表格的主體,主要用於放置資料本體。

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

  • 範例:

    
    
           
       		      
         
         
    		     
           	     
                 
                 
              
        
    姓名性别 年龄 
    刘德华 56 
    张学友 58 
    郭富城 51 
    黎明 57 

    html表格的作用是什麼

    表格屬性,這部分屬性我們實際開發中不常用,後面透過CSS來設定。

    目的有兩個:

    • 記住CSS這些單字,後面CSS會使用。

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

    屬性名稱 屬性值 描述
    align left 、center、right 規定表格相對周圍元素的對齊方式。
    border 1或" 規定表格單元是否擁有邊框,預設為"",表示沒有邊框
    cellpadding 像素值 規定單元邊緣與其內容之間的空白,預設1 像素
    cellspacing 像素值 #規定單元表格之間的空白,預設2 像素。
    width 像素值或百分比 規定表格的寬度

    案例:小说排行榜

    排名 关键词 封面
    1 靠近你会掉刺 html表格的作用是什麼
    2 魔尊要抱抱 html表格的作用是什麼
    3 触碰的旋律 html表格的作用是什麼
    4 穿越成反派要如何活命 html表格的作用是什麼

    案例分析:

    • 第一行里面是 th 表头单元格

    • 第二行开始里面是 td 普通单元格

    • 单元格里面可以放任何元素,文字链接图片等后可以

    后书写表格属性属性

    • 用到宽度高度边框 cellpadding 和 cellspacing

    • 浏览器中对齐 align

    具体代码如下:

     
                                                                                                                                                                                                                                                                                                                                                                                                                                             
    排名关键词封面
    1靠近你会掉刺html表格的作用是什麼
    2魔尊要抱抱html表格的作用是什麼
    3触碰的旋律html表格的作用是什麼
    4穿越成反派要如何活命html表格的作用是什麼

    合并单元格

    特殊情况下,可以把多格单元格合并为一个单元格。

    合并单元格方式

    跨行合并 rowspan=“合并单元格的个数”。
    跨列合并 colspan=“合并单元格的个数”。

    目标单元格:(写合并代码)

    跨行最上侧单元格为目标单元格,写合并代码
    跨列最左侧单元格为目标单元格,写合并代码

    合并单元格三部曲:

    • 1.先确定是跨行还是跨列合并。

    • 2.找到目标单元格,写合并方式 = 合并的单元格数量
      比如:<td colspan="2"></td>

    • 3.删除多余的单元格。

    例子:

     
                                                                                                                                                                                      

    html表格的作用是什麼

    (学习视频分享:web前端

以上是html表格的作用是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn