首頁 web前端 html教學 HTML中的表格元素

HTML中的表格元素

Dec 17, 2016 pm 02:01 PM

--  HTML中的表格元素[轉帖]
一,

標籤。
標籤是表格的標識符,用來界定表格的範圍。
標籤是成對使用的標籤,手標籤和和尾標籤之間的內容就是表格的內容。
標籤的屬性主要有border,width,height,align,cellapcing,cellpasdding.它們都是可選的。 

 

1,border屬性的參數值是數字,表示表格邊框寬度所佔的像素點數。它也可以不帶有參數值使用,僅表示該表格是有邊框的。例如,

表示該表格的邊框寬度為10 個像素點。 

2,width和height屬性的功能是指定表格的大小。其中width屬性用來規定表格的寬度,height屬性用以指定表格的高度。這兩個屬性的參數值可以是數字或百分數,其中數字表示表格的寬(高)所佔的像素點,百分數表示表格的寬(高)佔據瀏覽器視窗的寬(高)度的百分比。例如:

表示表格的寬度為200個像素點,高度為瀏覽器視窗高度的50%。 

3,align屬性的參數值為left,center和right之一,分別表示表格位於其相鄰文字的左側、表格水平居中和表格位於相鄰文字的右側。例如: 

 

 
測試頁 
 
 
單元 
 

 
 
 
 
 
 
 
單元單元 單元 單元
1 解釋項目解釋項目 同上 同上
2 解釋項目 同上另一個單元 接著來 
 

文字說明,這個就是表格居於相鄰文字左側的範例,只要改變一下align的屬性參數就可以改變表格的位置了。 


 

4,cellspacing屬性。 cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字,表示單元格間隙所佔的像素點數。 

5,cellpadding屬性。用來指定儲存格內容與儲存格邊界之間的空白距離的大小。此屬性的參數值也是數字,表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。例如: 

 

 
測試頁 
 
 

 
沒加如單元格屬性的規定之前的樣子:
 
border=3> 
 
儲存格 儲存格 
儲存格 儲存格 單元格 
 
 
1 儲存格 
儲存格 儲存格 儲存格 
 
2 儲存格 
儲存格 單元格 儲存格  
 

 
加入儲存格屬性規定之後的情形:
 
 
 
 
 
 
  

  

  

儲存格 儲存格儲存格 儲存格 儲存格
1 儲存格 儲存格 儲存格 儲存格
2 儲存格儲存格 儲存格 單元
  

 

接著我們來看看剛剛看到的幾個不熟悉的標籤是怎麼個意思。 

一,

標籤。是表格的標題的標籤。它是成對使用的標籤。在首標籤和尾標籤之間的內容就是表個的標題。 有兩個屬性:align和valign它們都是可選的。 

其中,align屬性的參數值為left,center,right之一,分別表示表格標題與表格的左邊沿兒對齊,位於表格中間和表格的右邊沿兒對齊。預設時,表格標題位於表格的中間;valign屬性的參數值是top和bottom之一,分別表示表格標題位於表格的上方和下方,缺省時,表格的標題位於表格的上方。例如: 

 
 
測試頁 
 

 
 
標籤。是行標籤。 HTML的表格是按行組織的。一個表格由幾行組成,就要有幾個標籤與之對應。行標籤是成對使用的標籤。它必須和和之間,用來規定該行中各單元格的內容。 標籤有兩個屬性。即align和valign屬性,他們都是可選的。

其中align屬性的參數值為left,center和right之一(以後如我特別說明,該屬性的參數都是這三個)分別表示個行中各單元格內容是左對齊、水平居中和右對齊的。缺省時為left(居左);valign屬性的參數值是top,middle和bottom之一,分別表示該行中各單元格內容是緊靠上沿兒,垂直居中和緊靠下沿兒的。缺省時為middle(居中)。

三,

 
 

 
 
 
 
  

  🎜 🎜 🎜 🎜
單元格 單元單元 單元格 儲存格
1 儲存格儲存格 儲存格 儲存格
2 儲存格單元格 單元 單元
 🎜
 🎜 🎜 🎜🎜這個例子中的表格標題是與表格的右邊沿兒對齊的。 🎜

二,

標籤配合使用,後者在使用時嵌套在
標籤 

標籤都是用來規定單元格內容的,表頭標籤 用來規定表頭元素的內容,表頭元素一般位於每列的首行,用來說明該列的具體資料是關於哪個物件的。 標籤是成對的。資料標籤 也是成對使用的,首標籤和尾標籤之間的內容就是該單元格的具體資料(也就是對錶頭的解釋內容)由於兩者都是用於規定單元內容的,和 標籤的所有屬性及對應的屬性功能是完全一樣的。 標籤的屬性有rowspancolspanalignvalign。 

(1)rowspan屬性的參數值是數字,表示該儲存格所跨越的行數。缺省值為1。 

(2)colspan屬性的參數值也是數字,表示該儲存格所跨的列數。缺省值為1。 

(3)align屬性用來規定儲存格內容在水平方向上的位置。三個參數值分別表示該儲存格是左對齊,居中還是右對齊。缺省時為left(左對齊) 

(4)valign屬性用於規定單元格內容在垂直方向上的位置。屬性的參數值為top,,middle和bottom之一,分別表示該單元格內容是緊靠上沿兒,垂直居中還是緊靠下沿兒。缺省時為middle(垂直居中)。 

好了,今天差不多就到這裡吧!太多了看不過來,不容易記憶。


 以上就是HTML中的表格元素的內容,更多相關文章請關注PHP中文網(www.php.cn)! 


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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles