搜尋
首頁web前端html教學HTML表格版面配置實際使用詳解_HTML/Xhtml_網頁製作

什麼時候會用到表格

現在,表格

一般不再用於網頁整體的版面。不過,在面對某些特定的設計,如表單輸入、資料呈現時,表格則可能是最恰當的選擇。

關於表格的直觀印象,就是由多個單元格(cell)整齊排列而成的元素,可以明確看出行(row)和列(column)。這可以聯想到Excel,由Excel在資料處理和統計上的地位,就可以理解網頁中表格的意義。

簡單來說,能直觀感受到多個元素是以行和列的概念排列時,用表格會讓你輕鬆很多。如caniuse.com中應用表格的範例:
2015728173924594.png (470×175)

表格版面計算

使用表格很簡單,但有時候表格最終為每個格子呈現的狀態,可能不是你想要的。比如說某些格子出現了換行,然後整個表格就因為換行看起來十分不美觀。尤其是用於資料呈現的表格,寬度分配是一個很重要的主題,你可能需要為每一列格子可能呈現的資料狀況,並對表格的總寬度做精打細算。

這是因為,表格在佈局上有自己的特性,它會遵循一定的原理,透過計算,確定出它的實際佈局。接下來,本文以實際的表格測試範例,探討表格是如何計算自己的版面的。
初始聲明

本文只針對應用表格最常見的方法,而不會列出所有的情況。不同瀏覽器對錶格的部分概念的解析有差異,但佈局計算是基本一致的(如果有差異,會單獨提及)。

接下來使用的測試表格都會以這樣的外觀呈現(內容取自零之軌跡):
2015728173942365.jpg (535×183)

同時,表格都會設定border-collapse:collapse;和border-spacing:0;。這也是應用程式表格最常用的做法,Normalize.css把這部分當作了初始化定義。
兩種演算法

定義在

元素上的css屬性table-layout,將決定表格在佈局計算時所應用的演算法。它有兩種值,auto和fixed。在通常情況下,都使用預設值auto。

這兩種演算法的差異在於表格的寬度佈局是否與表格中的資料內容有關。本文會分別討論這兩種取值時,表格的佈局計算原理。
自動表格版面-auto

自動表格佈局的特點是,表格的寬度佈局與表格中的所有資料內容有關,它需要在取得所有表格內容後才能確定最終的寬度佈局,然後再一起顯示出來。

如此看來,重點就是「內容相關」了。如果表格定義了固定寬度(這裡是500px),而所有的儲存格都不定義寬度(只討論css定義寬度),會如何呢?來看結果:
2015728174002286.jpg (538×116)

上面這個表格中,空白的部分是寫了 空格。經過比較,可以發現以下幾點:

    第2列和第3列寬度相同。
    第1列的寬度和後面任一列的寬度比似乎是2:1。
    加上邊框和內邊距,所有欄位的寬度總合,等於表格定義的寬度。

每個單元格都沒有定義寬度,所以寬度佈局完全由具體的內容資料(文字資訊)決定的。如何解釋這樣的結果呢?可以先直觀地推測這樣的邏輯:

    第1步,從每一列中選取文字內容最多(理解為不換行的情況下,文本所佔據的寬度最寬)的,作為「代表」。
    第2步,比較各列的「代表」的寬度,然後依照它們的寬度比例關係,為它們分配表格的總寬度,包括邊框和內邊距。

參考上面的邏輯,再來反觀一下前面的表格,是不是挺有一些道理?注意,前面說寬度比「似乎」是2:1,這個會是?來看看去除內邊距的版本:
2015728174128545.jpg (558×87)

用前端調試工具具體看一下上面的單元格的寬度,你會發現這個表格和之前不同,比例已經非常接近2:1(是的,還有的這一小點是因為邊框,但是沒有邊框就沒辦法分辨列了)。

可見,在分析寬度比例關係的時候,是會把內容寬度和內邊距,以及邊框都考慮在內的。這也說明,不是衡量文字的數目,而是衡量文字在不換行狀態所能佔據的寬度(這裡的2:1來自中文漢字是等寬的)。使用內邊距自然只是為了做出更美觀的表格 :) 。

有寬度定義的時候,又會怎麼樣呢?下面是一個部分的儲存格有寬度定義表格:
2015728174212099.jpg (553×142)

它的對應html代碼是:

XML/HTML Code複製內容到剪貼簿
  1. 表格 班級==>  
  2.     tr>
  3.   
  4.            >
  5. >
  6. 一二>一二>一二>一二>一二>一二>
  7. 🎜>第
  8. >            樣式 
  9. 樣式
  10.  樣式>寬度;"> 
  11. > 🎜>>          
  12. > > >>       tr>  
  13.        tr>  
  14.            td 樣式 樣式
  15.  樣式 樣式>寬度>
  16.  
  17. td> 🎜>> 
  18.         td>>>  
  19.         td> >>       tr>  
  20.        tr>     
  21.         td>
  22. >>           
  23. td
 
樣式 樣式 樣式 樣式 樣式>寬度;"> td> 🎜>>          td>一二三td>       tr>      桌子>  

上面這個表格可以發現以下幾點:

    寬度定為5px的單元格,實際呈現寬度是13px,這正好是單個漢字的寬度,同一列的有漢字的單元格則以最小單元格寬度的形式排列文字(所以,換行了)。
    寬度定為200px的單元格,實際呈現寬度是200px,儘管同列還有一個寬度70px的定義。
    沒有確切寬度定義的第3列,最後得到了表格在分配完第1列和第2列後全部的剩餘寬度。

對此的推論是,存在寬度定義和不存在寬度定義的列都有的情況時:

    如果單元格定義寬度小於其內容的最小排列寬度(和不換行排列方式相反,盡可能多行排列在單元格內時,單元格所需的寬度),則該單元格所在的列,都會以最小排列方式呈現內容。
    若在同一列中,而儲存格的內容寬度(不換行形式,後文這個字都是這個意思)小於該列中最大的寬度定義,則該列的實際寬度等於該寬度定義。
    不存在寬度定義的列,會先由表格分配寬度給有寬度定義的列之後,再分配給它們(同樣,它們之間的比例取決於內容寬度)。

最前邊的沒有寬度定義的可以看做情況1,這裡有的列有寬度定義,有的又沒有,可以看做情況2。下面是情況3,也就是所有的欄位都有寬度定義時:
2015728174233994.jpg (549×98)

對應html代碼:

XML/HTML Code複製內容到剪貼簿
  1. 表格 類別=類別=類別=
  2. 類別>       
  3. tr>               樣式 樣式
  4.  樣式>寬度;"> > 🎜>>           
  5. 樣式 樣式 樣式>寬度;"> > 🎜>>          
  6.  樣式 樣式
  7.  樣式 樣式>寬度;">
  8.  
  9. > 🎜>>      tr>
  10.           tr>  
  11.            td> >>
  12.   
  13.         td>
  14. >
  15. >           td
  16. > >>       tr>  
  17.        tr>  
  18.   
  19.         td> >>  
  20.         td> >>
  21.   
  22.         td>
  23. >
>
       tr>      桌子>  

上面的表格中,去掉了內邊距,因此可以清楚地由寬度定義值,得到這3列的寬度比例是2:1:1。這裡還有一個條件,就是儲存格內的內容寬度不超過寬度定義值。經過測試,IE7及以下在內容超過寬度定義值和其他瀏覽器表現不同。

從這個表格範例可以知道,如果所有的列都有寬度定義,而這些寬度定義的值的和小於表格的寬度,則表格會在分配完它們寬度定義值所對應的寬度後,繼續把剩餘寬度,按照它們的寬度比例,也分配給它們。

以上即是自動表格佈局,且表格本身是定義了固定寬度時,3種情況的分析。如果表格本身不定義寬度,還會有更多情況,而且會和表格的包含塊(containing block,詳情)有關,如果以後有合適機會,再做討論(所謂文章篇幅有限...)。
固定表格版面-fixed

固定表格佈局的特點是,表格的寬度佈局和表格中的資料內容無關,只需要接收到表格第一行的信息,就可以確定最終的寬度佈局,並開始顯示。

固定表格佈局是「內容無關」的,而且它強調「第一行」。請看下面這個表格範例:
2015728174250768.jpg (551×165)

對應html代碼:

XML/HTML Code複製內容到剪貼簿
  1.  類別=類別=>  
  2.     tr>
  3.   
  4.             樣式 樣式 
  5. 樣式
  6. >寬度;">>           
  7. >>一二>一二>一二>一二
  8. >一二>一二>
  9. 🎜>第>           
  10. >>一二三第>       
  11. tr>          tr>     
  12.         td>艾絲蒂爾·布萊爾>td>  
  13.         td 寬度
  14. ="1000px; “ > td
  15. > > >         td> >>  
  16.     
  17. tr>          
  18. tr>              td
  19.  樣式 樣式 
  20. 樣式
  21.  樣式>寬度
  22. > 
td
> 🎜>>          td> >>           td> >>       tr>      桌子>  

固定表格版面的邏輯簡單很多,表述如下:

    只取第一行的信息,無視第一行之後的所有單元格的內容,及寬度定義
    在第一行中,如果單元格有寬度定義,則先分配它們所需的寬度,然後剩餘的寬度平均分配給沒有寬度定義的單元格
    第一行的單元格的寬度分配將決定表格的寬度佈局,第一行之後的內容不會再改變佈局。

還要注意的時候,使用固定表格佈局,則一定要給表格元素定義寬度,如果它的寬度沒有定義(也就是auto預設值),瀏覽器會改用自動表格佈局。
結尾聲明

與表格有關的其實還有

、、、
等元素,只是在最常見的用法中,並不需要用到它們。實際上,它們也在表格的佈局計算的考慮之內。再加上還有一個儲存格合併的情況,你大概可以想像到表格佈局計算其實是多麼複雜的東西。

W3C的文件提到,表格的版面計算(自動表格版面)尚沒有成為規範。關於W3C對錶面佈局計算的說明,請參考Table width algorithms。
結語

其實就表格佈局計算原理這一點,做這樣細緻的推斷,並沒有太多實用性。只是說,在需要解決細節問題的時候,有這些資訊做參考的話,會有所幫助,儘管這樣的機會不多。

不過,可以就本文的內容,得到一個比較有意義的結論:表格定義寬度,且所有單元格都不定義寬度,那麼自動佈局的表格會盡可能讓你的所有數據都不換行,而如果碰到換行影響美觀的情況,表示必須精簡資料或減少邊距,而不是再自行嘗試重做寬度分配。

這次做這種實測和推斷,感到針對具體情況細分後再說明,會比一次性系統地完整表述,更容易理解,也許算是語文練習?

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱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

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

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。