HTML5:表格

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

構建表格 表格的基本元素包括: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

 

 

 


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

更多相關文章
  • 下載 "demo和工具下載鏈接SPClipTool" 使用說明 需求 圖片裁剪,效果如下圖,支持圖片拖拽,縮放,裁剪框自由變換大小。 思路 兩個UIImageView,一個做背景,並加上蒙版效果,另外一個通過蒙版控制顯示區域,並且保證兩個UIImageView平移和縮放的時候完全重疊。最後使用一個U ...
  • <input /> 標簽是我們日常開發中非常常見的替換元素了,但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性,選擇器都沒怎麼用過,所以就開篇文章來整理一下一些比較有趣或者實用的知識點。 本篇文章預設大家已經知道 <input /> 標簽的基本用法,不會 ...
  • js日期函數 ...
  • 在用Layui table 分頁顯示數據,用 type:"numbers" 進行顯示序號有以下的問題 1、表格自帶的分頁,page:true 這種分頁,在切換頁面的時候序號可以正常進行增加顯示,代碼如下: 顯示效果,第二頁的起始序號不是1 2、page組件進行分頁 這種分頁,在切換頁面的時候序號一種 ...
  • 在Canvas中進行碰撞檢測,大家往往直接採用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能,好奇的你有思考過它們的內部運行機制嗎?下麵將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體 ...
  • 為什麼要配置babel? 因為在webpack中,預設只能處理一部分es6的語法,一些更高級的es6和es7語法webpack不能處理,這時就需要第三方的loader即babel來幫助webpack來處理這些高級的語法 配置步驟 1、先通過兩套命令來安裝loader: npm i babel-cor ...
  • 推薦查看MDN 線上的幫助文檔 實例對象: 通過構造函數創建出來,實例化的對象 靜態對象: 不需要創建,直接就是一個對象,方法(靜態方法)直接通過這個對象名字調用 實例方法必須通過實例對象調用 靜態方法必須通過大寫的對象調用 Math.PI π Math.E 常數的底數 Math.abs(值) 絕對 ...
  • js學習中三種對象: 內置對象 js系統自帶的對象 自定義對象 自己定義的構造函數創建的對象 瀏覽器對象 BOM的時候講 內置對象: Math Date String Array Object //如何驗證變數是不是對象? console.log(Array instanceof Object); ...
一周排行
  • HttpReports 簡單介紹 HttpReports 是 .Net Core下的一個Web組件,適用於 WebAPI 項目和 API 網關項目,通過中間件的形式集成到您的項目中, 通過HttpReports,可以讓開發人員快速的搭建出一個 API 性能分析的基礎報表網站。 主要包含 HttpRe ...
  • 大家好,這幾天試著從Github上拉取AspNetCore的源碼,嘗試著通過Visual Studio 打開,但是並不盡人意。我們需要去構建我們拉去的源代碼,這樣才可以通過VisualStudio可還原的項目。畢竟AspNetCore是一個巨型的項目集。 先決條件 在Windows中構建AspNet ...
  • 知識需要不斷積累、總結和沉澱,思考和寫作是成長的催化劑 梯子 一、鎖1、lock2、Interlocked3、Monitor4、SpinLock5、Mutex6、Semaphore7、Events1、AutoResetEvent2、ManualResetEvent3、ManualResetEvent ...
  • 安裝Docker CentOS 7 安裝 Docker 編寫Dockerfile 右鍵項目-》添加-》Docker 支持 選擇Linux 修改為如下: FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-stretch-slim AS base WORKDIR ...
  • 原文:https://blogs.msdn.microsoft.com/mazhou/2017/06/06/c-7-series-part-3-default-literals/ C#的default關鍵字有兩種用法:一種是標記switch…case結構的預設分支(會匹配任意不被所有case條件匹配 ...
  • 相關模塊 1. AbpAspNetCoreModule 2. AbpAspNetCoreMvcModule 3. AbpAspNetCoreMvcContractsModule abp通過這三個模塊載入並配置了 asp.net core。,最主要的就是AbpAspNetCoreMvcModule模塊 ...
  • 安裝 參考文檔:https://docs.docker.com/install/linux/docker-ce/centos/#install-using-the-repository 前提條件 Docker 要求 CentOS 系統的內核版本高於 3.10,在終端輸入以下命令: uname -r ...
  • 目前遇到的問題: 1.路徑區分大小寫及路徑用“/”,而不是常用的"\\"。 windows下路徑為:"xxxx\\yyyy",Linux路徑下為:"xxxx/yyyy" 使用 Path.Combine("xxxx","yyyy") 進行合併即可。 2.有時候就需要在 docker 容器里訪問宿主機提 ...
  • 《.Net 最佳實踐》 [作者] (美) Stephen Ritchie[譯者] (中) 黃燈橋 黃浩宇 李永[出版] 機械工業出版社[版次] 2014年01月 第1版[印次] 2018年01月 第1次 印刷[定價] 69.00元 (P001) 開發人員應該對任何稱之為“最佳實踐”的實踐保持一種懷疑 ...
  • 本文介紹了C#中的屬性,以及C#6和C#7中與屬性相關的新特性。 ...
x