HTML5：表格

来源:https://www.cnblogs.com/xsd1/archive/2019/12/02/11971033.html
-Advertisement-
Play Games

構建表格 表格的基本元素包括：table、tr和td。table表示HTML文檔中的表格，支持border屬性，用於定義表格邊框的寬度；tr表示表格中的行；td表示表格中的單元格，包括如下屬性：1）colspan：規定單元格可橫跨的列數；2）rowspan：規定單元格可橫跨的行數； <table> ...


構建表格

表格的基本元素包括：table、tr和td。
table表示HTML文檔中的表格，支持border屬性，用於定義表格邊框的寬度；
tr表示表格中的行；
td表示表格中的單元格，包括如下屬性：
1）colspan：規定單元格可橫跨的列數；
2）rowspan：規定單元格可橫跨的行數；

<table>
    <tr>
        <td>Apples</td>
        <td>Green</td>
        <td>Medium</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>Orange</td>
        <td>Large</td>
    </tr>
</table>
上面定義了一個兩行、三列的表格，使用表格的好處是：瀏覽器會保證列的寬度滿足最寬的內容，讓行的高度滿足最高的單元格。

表格邊框

使用table元素的border屬性，可以為表格添加邊框。 
<table border="1">
	<tr>
		<td>Apples</td>
		<td>Green</td>
		<td>Medium</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>Orange</td>
		<td>Large</td>
	</tr>
</table>

　　

瀏覽器的預設邊框不太美觀，通常還需要用CSS來為為各種元素重設邊框樣式。

不規則表格

使用單元格的colspan和rowspan屬性可以構建不規則表格，使表格的某些行或者列跨越多個單元格，下麵是一個單元格跨多列的一個例子： 
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

下麵是一個單元格跨多行的一個例子：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

表頭

th元素用於為表格添加表頭，可以用來區分數據和對數據的說明。th元素支持如下屬性：
1）colspan：規定單元格可橫跨的列數；
2）rowspan：規定單元格可橫跨的行數；
3）scope：定義將表頭數據與單元數據相關聯的方法；
3）headers：由空格分隔的表頭單元格ID列表，為數據單元格提供表頭信息，該屬性不會在普通瀏覽器中產生任何視覺變化，但可以被屏幕閱讀器使用。

<table>
    <tr>
        <th>Rank</th><th>Name</th>
        <th>Color</th><th>Size</th>
    </tr>
    <tr>
        <th>Favorite:</th>
        <td>Apples</td><td>Green</td><td>Medium</td>
    </tr>
    <tr>
        <th>2nd Favorite:</th>
        <td>Oranges</td><td>Orange</td><td>Large</td>
    </tr>
    <tr>
        <th>3rd Favorite:</th>
        <td>Pomegranate</td><td>A kind of greeny-red</td>
        <td>Varies from medium to large</td>
    </tr>
</table>
可以在一行中混合使用th和td。

讓單元格關聯表頭

使用td的headers屬性可以將單元格和表頭關聯，關聯的目的主要是供屏幕閱讀器和其他殘障輔助技術用來簡化對錶格的處理。headers屬性可以為一個或多個th單元格的id屬性值： 
<table border="1" width="100%">
  <tr>
    <th id="name">Name</th>
    <th id="Email">Email</th>
    <th id="Phone">Phone</th>
    <th id="Address">Address</th>
  </tr>
  <tr>
    <td headers="name">George Bush</td>
    <td headers="Email">[email protected]</td>
    <td headers="Phone">+789451236</td>
    <td headers="Address">Fifth Avenue New York,USA</td>
  </tr>
</table>

構造複雜表頭

使用th的colspan和rowspan屬性可以構造複雜表頭。 
<table border="1">
  <tr>
    <th colspan="2">Company in USA</th>
  </tr>
  <tr>
    <th>Name</th><th>Addr</th>
  </tr>
  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
  <tr>
    <td>Google, Inc.</td>
    <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
  </tr>
</table>

為表格添加結構
可以使用thead、tbody和tfoot元素來為表格添加結構，這樣可以讓為表格各個部分添加CSS樣式變得更加容易。
1）表格主題
tbody元素表示構成表格主題的全體行，不包括表頭行（thead元素表示）和表腳行（tfoot元素表示）。
註意大多數瀏覽器在處理table元素時都會自動插入tbody元素。
2）表格表頭
thead元素用來標記表格的標題行。如果沒有thead元素的話，所有tr元素都會被視為表格主體的一部分。
3）添加腳註
tfoot元素用來標記組成表腳的行。在HTML5之前tfoot元素只能出現在tbody元素之前，而在HTML5中則允許將tfoot元素放在tbody之後。
下麵是一個綜合的例子，裡面使用了tbody、thead和tfoot元素。

<table>
    <thead>
        <tr>
            <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>Favorite:</th>
            <td>Apples</td><td>Green</td><td>Medium</td>
        </tr>
        <tr>
            <th>2nd Favorite:</th>
            <td>Oranges</td><td>Orange</td><td>Large</td>
        </tr>
        <tr>
            <th>3rd Favorite:</th>
            <td>Pomegranate</td><td>A kind of greeny-red</td>
            <td>Varies from medium to large</td>
        </tr>
    </tbody>
</table>

為表格添加標題

使用caption元素可以為表格定義一個標題，並將其與表格關聯起來。 
<table>
    <caption>Results of the 2011 Fruit Survey</caption>
    <thead>
        <tr>
            <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>Favorite:</th>
            <td>Apples</td><td>Green</td><td>Medium</td>
        </tr>
        <tr>
            <th>2nd Favorite:</th>
            <td>Oranges</td><td>Orange</td><td>Large</td>
        </tr>
        <tr>
            <th>3rd Favorite:</th>
            <td>Pomegranate</td><td>A kind of greeny-red</td>
            <td>Varies from medium to large</td>
        </tr>
    </tbody>
</table>
一個表格只能包含一個caption元素，無需是表格的第一個元素，但始終顯示在表格上方。

列分組

在表格中，由於表格都是按行組建的，導致對列的操作不太方便，例如為表格的某列定義樣式。可以使用colgroup元素來指定列的分組 
<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #colgroup2{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1" span="2" ></colgroup>
  <colgroup id="colgroup2"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

上面的例子中指定了兩個列的組，第一個包含前2列，第二個包含剩下的1列，併為不同的分組指定了不同的樣式。colgroup的span屬性指定擴展幾列，如果不指定span屬性，也可以指定一個或多個col元素，下麵的例子達到了和上面例子一樣的效果。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #col3{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1">
    <col id="col1And2" span="2"/>
    <col id="col3"/>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>
————————————————

相信很多人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一個人學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料 喜歡我的文章想與更多資深大牛一起討論和學習的話 歡迎加入我的學習交流群

907694362​jq.qq.com

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS 裁剪工具
    下載 "demo和工具下載鏈接SPClipTool" 使用說明 需求 圖片裁剪，效果如下圖，支持圖片拖拽，縮放，裁剪框自由變換大小。 思路 兩個UIImageView，一個做背景，並加上蒙版效果，另外一個通過蒙版控制顯示區域，並且保證兩個UIImageView平移和縮放的時候完全重疊。最後使用一個U ...
  • 我的 Input框 不可能這麼可愛
    <input /> 標簽是我們日常開發中非常常見的替換元素了，但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性，選擇器都沒怎麼用過，所以就開篇文章來整理一下一些比較有趣或者實用的知識點。 本篇文章預設大家已經知道 <input /> 標簽的基本用法，不會 ...
  • js日期函數
    js日期函數 ...
  • layui table 分頁 序號始終從”1“開始解決方法
    在用Layui table 分頁顯示數據，用 type:"numbers" 進行顯示序號有以下的問題 1、表格自帶的分頁，page:true 這種分頁，在切換頁面的時候序號可以正常進行增加顯示，代碼如下： 顯示效果，第二頁的起始序號不是1 2、page組件進行分頁 這種分頁，在切換頁面的時候序號一種 ...
  • Html5 Canvas動畫基礎碰撞檢測的實現
    在Canvas中進行碰撞檢測，大家往往直接採用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能，好奇的你有思考過它們的內部運行機制嗎？下麵將針對基本的碰撞檢測技術進行講解： 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊，這裡我們假設討論的碰撞體 ...
  • webpack中配置babel
    為什麼要配置babel？ 因為在webpack中，預設只能處理一部分es6的語法，一些更高級的es6和es7語法webpack不能處理，這時就需要第三方的loader即babel來幫助webpack來處理這些高級的語法 配置步驟 1、先通過兩套命令來安裝loader： npm i babel-cor ...
  • JS基礎語法----Math對象
    推薦查看MDN 線上的幫助文檔 實例對象: 通過構造函數創建出來,實例化的對象 靜態對象: 不需要創建,直接就是一個對象,方法(靜態方法)直接通過這個對象名字調用 實例方法必須通過實例對象調用 靜態方法必須通過大寫的對象調用 Math.PI π Math.E 常數的底數 Math.abs(值) 絕對 ...
  • JS基礎語法---內置對象
    js學習中三種對象: 內置對象 js系統自帶的對象 自定義對象 自己定義的構造函數創建的對象 瀏覽器對象 BOM的時候講 內置對象: Math Date String Array Object //如何驗證變數是不是對象？ console.log(Array instanceof Object); ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類