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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類