html表格的作用是展示資料。表格主要用於顯示、展示數據,因為它可以讓數據顯示的非常的規整,可讀性非常好;特別是後台展示數據的時候,能夠熟練運用表格就顯得很重要;一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
表格是實際開發中非常常用的標籤。
#表格主要用於顯示、展示數據,因為它可以讓數據顯示的非常的規整,可讀性非常好。特別是後台展示數據的時候,能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。
總結:表格不是用來佈局頁面得,而是用來展示資料的。
例如:
瓜類別 | #單價 | 數目 | 金額 |
---|---|---|---|
西瓜 | 12 | 10 | 120 |
哈密瓜 | 14 | 5 | 70 |
#香瓜 | 8 | #15 | 120 |
单元内得文字 | ...
<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>
:用來定義表格的頭部。內部必須擁有標籤。一般是位於第一行。
以上標籤都是放在 範例: 表格屬性,這部分屬性我們實際開發中不常用,後面透過CSS來設定。 目的有兩個: 記住CSS這些單字,後面CSS會使用。 直覺感受表格的外觀形態。 案例:小说排行榜 案例分析: 第一行里面是 th 表头单元格 第二行开始里面是 td 普通单元格 单元格里面可以放任何元素,文字链接图片等后可以 后书写表格属性属性 用到宽度高度边框 cellpadding 和 cellspacing 浏览器中对齐 align 具体代码如下: 特殊情况下,可以把多格单元格合并为一个单元格。 跨行合并: rowspan=“合并单元格的个数”。 跨行:最上侧单元格为目标单元格,写合并代码 1.先确定是跨行还是跨列合并。 2.找到目标单元格,写合并方式 = 合并的单元格数量 。 3.删除多余的单元格。 例子: (学习视频分享:web前端)
:用來定義表格的主體,主要用於放置資料本體。
<table></table>
標籤中。
姓名 性别 年龄
刘德华 男 56
张学友 男 58
郭富城 男 51
黎明 男 57
屬性名稱
屬性值
描述
align
left 、center、right
規定表格相對周圍元素的對齊方式。
border
1或"
規定表格單元是否擁有邊框,預設為"",表示沒有邊框
cellpadding
像素值
規定單元邊緣與其內容之間的空白,預設1 像素
cellspacing
像素值
#規定單元表格之間的空白,預設2 像素。
width
像素值或百分比
規定表格的寬度
排名
关键词
封面
1
靠近你会掉刺
2
魔尊要抱抱
3
触碰的旋律
4
穿越成反派要如何活命
排名
关键词
封面
1
靠近你会掉刺
2
魔尊要抱抱
3
触碰的旋律
4
穿越成反派要如何活命
合并单元格
合并单元格方式
跨列合并: colspan=“合并单元格的个数”。目标单元格:(写合并代码)
跨列:最左侧单元格为目标单元格,写合并代码合并单元格三部曲:
比如:<td colspan="2"></td>
。
以上是html表格的作用是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!