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



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

目的有兩個：

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

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

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

案例：小说排行榜

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

案例分析：

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

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

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

后书写表格属性属性

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

• 浏览器中对齐 align

具体代码如下：

                                                                                                                                                                                                                                                                                                                                                                                                                                         

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

合并单元格

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

合并单元格方式

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

目标单元格：（写合并代码）

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

合并单元格三部曲：

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

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

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

例子：

                                                                                                                                                                                  



（学习视频分享：web前端）

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