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); ...
一周排行
  • FastDBF源代碼地址:https://github.com/SocialExplorer/FastDBF 第一步在解決方案中新建一個類庫的項目:取名為SocialExplorer.FastDBF 第二步:引入FASTDBF的源文件 源代碼可以通過github地址下載引入 源文件:DbfColum ...
  • 目 錄 1. 概述... 2 2. 演示信息... 2 3. 安裝Docker容器... 2 4. 安裝dotnet鏡像... 3 5. 複製iNeuKernel到容器中... 4 6. 進入指定容器... 4 7. 安裝dotnet框架... 4 8. 在Docker容器中運行iNeuKernel ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7699301.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第二個模式--橋接模式,也有叫橋模式的。橋在我們現實生活中經常是連接著A地和B地,再往後來發展,橋引申為一種紐 帶, ...
  • static void AggregateExceptionsDemo() { var task1 = Task.Factory.StartNew(() => { var child1 = Task.Factory.StartNew(() => { throw new CustomException ...
  • http請求在我們實際工作中天天見,為了不重覆造輪子,現在分享一下最近的一次封裝整理,供大家參考,交流,學習! ...
  • 隨著你的 Python 項目越來越多,你會發現不同的項目會需要 不同的版本的 Python 庫。同一個 Python 庫的不同版本可能不相容。虛擬環境可以為每一個項目安裝獨立的 Python 庫,這樣就可以隔離不同項目之間的 Python 庫,也可以隔離項目與操作系統之間的 Python 庫。 1. ...
  • TypeScript 介紹 TypeScript 是什麼 TypeScript 是 JavaScript 的強類型版本。然後在編譯期去掉類型和特有語法,生成純粹的 JavaScript 代碼。由於最終在瀏覽器中運行的仍然是 JavaScript,所以 TypeScript 並不依賴於瀏覽器的支持,也 ...
  • Hello World 新建 並寫入以下內容: 安裝編譯器: 編譯: 修改 文件中的代碼,為 greeter 函數的參數 person 加上類型聲明 : 重新編譯執行。 讓我們繼續修改: 重新編譯,你將看到如下錯誤: 介面(Interface) 類(Class) 變數聲明 作用域 重覆聲明 塊級作用 ...
  • 解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...
  • 函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷(Type Inference) 類型相容性 模塊 概念 模塊通信: ...
x