具象化LinePalace
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
Linepalace凌品設計
No Result
View All Result
Home 網頁技術 學習筆記

零基礎也能懂的 HTML表格(內含快速生成表格資源)

rubykuo by rubykuo
September 28, 2023
in 學習筆記, 工具分享, 網頁技術
Reading Time: 4 mins read
零基礎也能懂的 HTML表格(內含快速生成表格資源)
38
VIEWS
Share on FacebookShare on Twitter

某天,客戶丟給我好幾個word表格讓我放進文章裡面。
大概長這樣:

無論是老手或者新手,看到表格應該下意識會想皺眉頭,對於新手是因為和html標籤不熟不知道該從何下手(相信我,直接在編輯器裡面複製貼上通常會很醜);對老手來說切表格很容易,但是因為要一格一格對資料太麻煩了,每次都對到眼花。

所以如果是幫客戶上資料,我都是靠偷吃步幫我簡化整個流程哈哈
這邊先不詳述,工具我放在文末。

建議你跟著我先簡單認識一下表格是怎麼切出來的,才能應付各種狀況喔!

目錄

Toggle
  • 一、HTML常見表格結構
    • 1.HTML表格基礎結構
    • 2.合併儲存格
  • 二、用CSS調整表格樣式
    • 1.CSS怎麼寫?
    • 2.CSS應用表格實例
  • 三、零程式基礎用工具快速生成表格

一、HTML常見表格結構

1.HTML表格基礎結構

其實表格的架構很簡單:

<table class="i_table">
    <tr class="i_th">
        <th class="i_td">我是表頭</th>
        <th class="i_td">預設粗體</th>
    </tr>
    <tr>
        <td class="i_td">內容1</td>
        <td class="i_td">內容2</td>
    </tr>
    <tr>
        <td class="i_td">內容3</td>
        <td class="i_td">內容4</td>
    </tr>
</table>

乾淨無汙染的編輯器裡面編譯出來的結果會是長這樣(為了方便觀看範例已經用CSS設定基礎邊框):

排列順序是由左至右,由上至下。
你可以發現完成一個最簡單的表格其實只需要認識這四個標籤!

<table></table>:表格
<tr></tr>:表格中的橫列(包含一或多個<th> 或 <td>元素)
<th></th>:表格中的單元,通常在第一行(表頭),預設為 粗體字型、置中對齊
<td></td>:表格中的單元,儲存格,預設為 置左對齊

2.合併儲存格

再讓我們複習一次,表格的排列順序是由左至右,由上至下。因此合併表格也是按照相同的邏輯順序。

在單元儲存格裡面加入以下兩種設定:
a. colspan=”2″ : 是直列的合併(左右格合併),後面的數字代表往後合併包含自身的兩格
b. rowspan=”2″ : 是橫行的合併(上下格合併),後面的數字代表往後合併包含自身的兩格

實際應用參考:

codepen是一個方便線上練習coding的地方! 讓你不用下載程式碼編輯器就可以直接實際操作看到結果,有興趣深入了解的小夥伴可以參考coding菜鳥必備 線上程式編輯器codepen

提醒第一次使用的小夥伴,可以點擊左上角的標籤(HTML/CSS/JS)來切換想要查看的文件,右側是執行結果。

See the Pen 合併儲存格 by Ruby (@Rubykuo) on CodePen.


這樣就成功啦!

但是這樣醜醜的預設樣式表格,當然沒辦法滿足客戶需求,所以接下來我們來談談用來美化的CSS吧!

二、用CSS調整表格樣式

不想要表格有兩條邊框?
表格文字和邊框太近?
如何更改表格顏色?
表格在不同大小的裝置上破版了怎麼辦?

用CSS可以解決全部的問題!
讓我們先來看看CSS怎麼寫進文件裡吧!

1.CSS怎麼寫?

一般來說CSS寫法分為三種:

a. 行內樣式(Inline Styles)
在 HTML 的標籤裡使用 style 屬性

b. 內部樣式表(Internal Style Sheet)
在<head>中加入<style>元素

c. 外部樣式表(External Style Sheet)
在<head>中加入<link>標籤使用外部 CSS 文件

如果想要深入了解這三種方式的應用場景與優缺點可以看如何連結CSS樣式?一篇了解三大寫法與實際應用

2.CSS應用表格實例

由於是幫客戶直接在既有的原始碼編輯器上稿,且更動範圍較小,所以暫時不討論需要另外引入文件c.外部樣式

a.用內部樣式撰寫CSS我自己平常 a. 行內樣式  b. 內部樣式  都很常用,但在表格上我更常使用 b. 內部樣式 設定class來一次控制所有同名的標籤,這樣更好管理程式碼喔!

寫法會是這樣:

See the Pen table表格架構 by Ruby (@Rubykuo) on CodePen.


b.CSS樣式調整詳細說明

雖然文件裡面有註解說明了(/* 這是註解 */),但畢竟為了讓零基礎的小夥伴能夠完全理解,下面簡單補充一下:
“.”代表的是class
“.”後面可以自訂義任何英文字,重點是方便自己辨認。

以上面的範例來說,我先在<style></style>中定義了i_table這個class,細節設定用大括號{}包起來。接著到<table></table>標籤加上class=”i_table”來連結樣式。

最後讓我們根據一開始的問題重新梳理文件中的CSS做了什麼吧!

Q1:不想要表格有兩條邊框?
會有兩條邊框線是因為table預設border-collapse: separate;
因此利用CSS在<table></table>標籤加上border-collapse: collapse;改掉預設的設定就可以了

Q2:表格文字和邊框太近?
在表格中的單元<th></th>和<td></td>加上padding(內距)設定就可以了

Q3:如何更改表格顏色?
找到需要變色的儲存格,加上color: (想要的文字顏色); 或者 background-color:(想要的背景顏色)

Q4:表格在不同大小的裝置上破版了怎麼辦?
一般來說如果表格發生超出版面的情形,那是因為表格本身被限定寬度了!

這種時候只要將表格寬度調整成一個彈性的寬度,就不會發生這種狀況囉!
調整表格寬度請找到<table></table>,通常我會為他加上width:100%;讓他根據父層寬度縮放。

其他常見表格標籤還有:

<thead></thead>:表頭
<tbody></tbody>:表身
<tfoot></tfoot>:表尾
<caption></caption>:caption 標籤必須緊隨 table標籤之後,為表格標題。

以上表格標籤能讓表格結構更加完善,有利於維護與閱讀,在列印時,能夠設定重複列印表頭或表尾,但其實如果不用也不會影響到畫面XD所以我放在最後(喂)

三、零程式基礎用工具快速生成表格

回到一開始我說的,懶惰如我,基本上幫客戶上表格資料的時候,其實不會用一格一格複製貼上比對資料的方式,而是用線上表格生成工具Tables Generator

希望這一篇對你有幫助:)

Previous Post

線上表格生成器Tables Generator 詳細教學

Next Post

【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

rubykuo

rubykuo

中文系畢業,曾任電商網站PM,現職網頁設計師。 認為走過的每一步都有它的意義,並且會在未來成為重要的養份

Related Posts

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同
工具分享

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF
工具分享

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!
學習筆記

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
加速前端開發! 你必須知道的Emmet!
學習筆記

加速前端開發! 你必須知道的Emmet!

September 26, 2023
網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)
工具分享

網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)

September 25, 2023
如何連結CSS樣式?一篇了解3大寫法與實際應用
學習筆記

如何連結CSS樣式?一篇了解3大寫法與實際應用

September 25, 2023
Next Post
【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

POPUPAR

  • 線上表格生成器Tables Generator 詳細教學

    線上表格生成器Tables Generator 詳細教學

    0 shares
    Share 0 Tweet 0
  • coding菜鳥必備 線上程式編輯器codepen

    0 shares
    Share 0 Tweet 0
  • 零基礎也能懂的 HTML表格(內含快速生成表格資源)

    0 shares
    Share 0 Tweet 0
  • 如何連結CSS樣式?一篇了解3大寫法與實際應用

    0 shares
    Share 0 Tweet 0
  • 【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

    0 shares
    Share 0 Tweet 0

RECENT NEWS

加拿大留學必須知道的:Pathway和語言學校名詞

加拿大留學必須知道的:Pathway和語言學校名詞

October 21, 2023
Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
加速前端開發! 你必須知道的Emmet!

加速前端開發! 你必須知道的Emmet!

September 26, 2023

Categories

  • 學習筆記 (7)
  • 工具分享 (5)
  • 生活地圖 (1)
  • 網頁技術 (10)
  • 英語學習與留學 (1)

MORE ON TWITTER

  • Home
  • 網頁技術
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
歡迎來信合作:ruby@linepalace.com

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.