HTML 表格(table) 結構化、合併和群組教學範例
文章推薦指數： 80 %
輕鬆搞懂網站設計的專業術語！ Raspberry Pi 樹莓派USB Barcode 掃瞄並讀取QRCode for Python3. HTML 表格(table) 結構化、 ...
首頁»設計日誌»網頁設計»HTML»HTML表格(table)結構化、合併和群組教學範例
熱門文章
VirtualBox安裝macOSMojave二、八、十與十六進位(數字系統)轉換教學PHP單檔案上傳、多檔案上傳教學範例Eclipse下載安裝與使用教學forJavaAJAXJavaScript與jQuery教學範例forPHP
最新文章
Joomla遷移到WordPress網站搬家及Hold住SEO的301重定向要點教學Drupal遷移到WordPress網站搬家及301重定向Hold住SEO要點教學架設企業官網有多重要？輕鬆建立品牌形象！網域？RWD？伺服器？輕鬆搞懂網站設計的專業術語！RaspberryPi樹莓派USBBarcode掃瞄並讀取QRCodeforPython3
TwitterFacebookLINE
2015-06-13腳印網頁資訊設計
該文章列出HTML表格(table)經常會使用的一些標籤及屬性，並以範例說明使用方式，且必須熟悉用法才有能力對HTML表格進行合併、編排及調整。
有些類型的資訊需使用格子或表格(table)這種由columns、rows組成的方式，來呈現具有結構關係的數據，以便於閱讀和理解。
例如火車時刻表、體育賽事結果、圖書目錄、商品的清單和價格目錄、外匯或股票的報價等。
行、列傻傻分不清？
避解混濁，記住自己國家解讀方法即可。
row：─(弓箭是橫向發射)。
column：│(中文翻譯為圓柱，柱子是直的)。
台灣解讀為：
row：列(─)。
column：行(│)。
大陸解讀為：
row：行(─)。
column：列(│)。
表格標籤、屬性表
點擊標籤、屬性可連結至範例
標籤
標籤描述
屬性
值
屬性描述
| 定義表格的表頭單元格 addr text 定義表頭單元格內容的簡短描述 colspan number 定義表頭單元格應跨越的columns數量 headers header_id 定義與表頭單元格相關聯的一或多個表頭單元格的id rowspan number 定義表頭單元格應跨越的rows數量 scope col 定義表頭單元格是column的標題 row 定義表頭單元格是row的標題 colgroup 定義表頭單元格columns群組的標題 rowgroup 定義表頭單元格是rows群組的標題 |
定義表格的資料單元格
colspan
number
定義資料單元格應跨越的columns數量
headers
header_id
定義與資料單元格相關聯的一或多個表頭單元格的id
rowspan
number
定義資料單元格應跨越的rows數量
|
|---|
| 和 | 標籤組成。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 標籤定義表格的表頭單元格、 | 標籤定義表格的資料單元格。 一個更複雜的表格還可包括 |
| 表頭單元格 | 表頭單元格 |
|---|---|
| 資料單元格 | 資料單元格 |
| 資料單元格 | 資料單元格 |
一個
| 表頭單元格 | 表頭單元格 |
|---|---|
| 資料單元格 | 資料單元格 |
| 資料單元格 | 資料單元格 |
表格有兩種類型的單元格：
| 表頭單元格 | 表頭單元格 |
|---|---|
| 資料單元格 | 資料單元格 |
| 資料單元格 | 資料單元格 |
定義表頭單元格內容的簡短描述。
| address | |
|---|---|
| Apple,Inc. | Google,Inc. |
| 1InfiniteLoopCupertino,CA95014 | 1600AmphitheatreParkwayMountainView,CA94043 |
| 表頭單元格 | ||
|---|---|---|
| 資料單元格 | 資料單元格 | 資料單元格 |
| 資料單元格 | 資料單元格 | 資料單元格 |
定義與表頭單元格相關聯的一或多個表頭單元格的id(以空格分隔建立多個)。
| 表頭單元格 | |
|---|---|
| 表頭單元格 | |
| 資料單元格 | 資料單元格 |
定義表頭單元格是否是column、row、groupcolumns或grouprows的標題。
| 1 | January | $100 |
|---|---|---|
| 1 | January | $80 |
表格有兩種類型的單元格：
| 表頭單元格 | 表頭單元格 |
|---|---|
| 資料單元格 | 資料單元格 |
| 資料單元格 | 資料單元格 |
| 表頭單元格 | 表頭單元格 | 表頭單元格 |
|---|---|---|
| 資料單元格 |
定義與資料單元格相關聯的一或多個表頭單元格的id(以空格分隔建立多個)。
| 表頭單元格 | 表頭單元格 |
|---|---|
| 資料單元格 | |
| 資料單元格 |
必須使用在
| Month | Savings | |
|---|---|---|
| 1 | January | $100 |
| 1 | January | $80 |
必須使用在
可以向整個columns套用樣式，而不需重複為每個單元格或每一column設置樣式。
| ISBN | Title | Price |
|---|---|---|
| 3476896 | MyfirstHTML | $53 |
| 5869207 | MyfirstCSS | $49 |
| ISBN | Title | Price |
|---|---|---|
| 3476896 | MyfirstHTML | $53 |
| 5869207 | MyfirstCSS | $49 |
| ISBN | Title | Price |
|---|---|---|
| 3476896 | MyfirstHTML | $53 |
| 5869207 | MyfirstCSS | $49 |
| ISBN | Title | Price |
|---|---|---|
| 3476896 | MyfirstHTML | $53 |
| 5869207 | MyfirstCSS | $49 |
定義表格中的表頭。
必須使用在
| Month | Savings |
|---|---|
| Month | Savings |
| Sum | $180 |
| January | $100 |
定義表格中的主體。
必須使用在
| Month | Savings |
|---|---|
| Month | Savings |
| Sum | $180 |
| January | $100 |
定義表格中的頁腳。
必須使用在
| Month | Savings |
|---|---|
| Month | Savings |
| Sum | $180 |
| January | $100 |
| addr colspan headers rowspan scope |
colspan
headers
rowspan
|
|---|
延伸文章資訊
- 1HTML表格的基礎- 學習該如何開發Web
That just about wraps up the basics of HTML Tables. ... HTML表格應該被使用在結構化資料(tabular data)上— 這就是它們被設...
- 2HTML 表格(table) 結構化、合併和群組教學範例
輕鬆搞懂網站設計的專業術語！ Raspberry Pi 樹莓派USB Barcode 掃瞄並讀取QRCode for Python3. HTML 表格(table) 結構化、 ...
- 3HTML&CSS入門：為你的網頁換上精美的表格(Table)樣式
網頁上常看到Table的蹤跡，一張好看的表格會決定頁面的吸睛程度。 所以今天要重新認識一下表格設計，不依靠其他模板的力量，自己動手製作出幾個常見的 ...
- 4CSS的表格(table) - 網頁設計
我們在網頁設計時，會需要使用表格來做排版，而說到表格最基本和常見的就是table了。 一個基本的表格是由和一或多個定義表格的row(行)、colspan(列)、和組合而成的 ...
- 5我再也不畫表格了！ - Word to HTML 線上工具 - iT 邦幫忙
不知道各位網頁設計師，在製作設計稿的時候，有沒有遇過需要設計的表格內容超級多！ 類似部門人員介紹或人事績效考核的超長表格XD. 人事行政主管绩效考核评分表
