相對於HTML表格是為了有條理的展現數據或文字內容而存在，CSS（層疊樣式表）作為網頁 ...
#屬性border="1"指定了表格框線的粗細度
4/07/2020
HTML表格的基本設定
製作網頁時，網頁內容總會有需要用上表格的時候，如何使用HTML語言來設置表格呢？本文介紹的是製作HTML表格的基本標記。
表格的用途是能夠簡潔而有條理地呈現資料性內容（例如數據），使讀者可以快速地掌握資料的脈絡。
適當地使用表格來呈現資料，可以提高網頁內容的可讀性，增進讀者的理解。
相對於HTML表格是為了有條理的展現數據或文字內容而存在，CSS（層疊樣式表）作為網頁樣式設計的總領導，提供了另一種表格架構（簡稱CSS表格）。
CSS表格的主要用途是，以表格的概念來設置網頁頁面的佈局與框架。
現下的網頁樣式，常見兩欄（twocolumn）、三欄（threecolumn）的樣式，像這種多個欄框的樣式，就可以透過CSS表格來實現。
可以想見，這樣的「表格」主要用途就不是羅列數據資料了。
HTML表格的基本標記方式
首先說明表格的概念。
在日常中文的表述裡，我們常常會把行和列的說法混用，這有時會造成溝通上的誤解。
本文為了表意清晰，一律使用橫列（row）、直行/欄(column)、單元格(cell)來說明。
HTML表格的特色在於，每一個直行和橫列，以及每一個單元格，都必須標記清楚，才能井然有序地呈現資料。
這導致表格的標記乍看之下會很複雜。
嗯，只能說，習慣了就好。
演示步驟3-1：
HTML表格的最外層是這一對標記。
在標記內部，須按照由上往下的順序，填寫橫列標記|
。
此處的tr是tablerow的意思。
表格有幾個橫列，就填入幾對橫列標記（tr）。
表格製作中：填入橫列標記（tr）
#屬性border="1"指定了表格框線的粗細度
演示步驟3-2：
在每對
|
標記內部，須按照由左而右的順序，填寫單元格標記
| 。
此處的td是tabledescription的意思。
一個橫列裡有幾個單元格，就填入幾對單元格標記。
換句話說，填入幾個單元格，就代表表格有幾個「直行」。
表格製作中：在橫列標記（tr）內，填入單元格（td）標記。
此範例設定每列有三個單元格。
|
|
|
|
|
|
演示步驟3-3：
在單元格標記 | 中間，填入表格資料，也就是表格的主體！
表格製作中：在單元格標記（td）內，填入表格內容
| 北部 |
中部 |
南部 |
| 5 |
9 |
11 |
步驟3-3完成後的表格呈現效果：
北部
中部
南部
5
9
11
HTML表格的標記變化
可以為HTML表格加上表格標題，以及表格標頭 | ，也就是tableheading。
| 的使用方式其實和|
相近，作為標頭它適合用在表格的最上橫列，或是最左直行，效果是可以讓單元格內容加粗顯示。
********表格示例：和用法
此處填入表格的標題
| 此處為標題1 |
此處為標題2 |
此處為標題3 |
| 內容1a |
內容2a |
內容3a |
| 內容1b |
內容2b |
內容3b |
表格呈現效果：
此處填入表格的標題
此處為標題1
此處為標題2
此處為標題3
內容1a
內容2a
內容3a
內容1b
內容2b
內容3b
基本規則：
*即便某個單元格的內容是空白的，也要寫出 | 標記來代表該單元格。
*和 |
的差別在於，前者是默認為標題的加粗字。
*有時候我們會需要把表格中的單元格合併，例如把兩個單元格合併為一個，設置的方式如下。
********表格示例：單元格跨列合併
此處演示的是，將最左側上下相鄰的兩個單元格合併，使用的是的標記。
內容1a
| 內容2a |
內容3a |
#因第一行已經合併，此處被合併的單元格略過不寫
| 內容2b |
內容3b |
表格呈現效果：
內容1a
內容2a
內容3a
內容2b
內容3b
********表格示例：單元格跨行合併
此處演示的是，將第二橫列的第一和第二個單元格合併，使用的是的標記。
| 內容1a |
內容2a |
內容3a |
內容1b
#因兩個單元格合併，第二個單元格略過不寫
| 內容3b |
表格呈現效果：
內容1a
內容2a
內容3a
內容1b
內容3b
HTML表格加上CSS樣式設置
由上面的範例可看到，最基本的HTML表格看起來並不是太美觀，如果想要調整它的樣式，必須加上CSS指令。
加入CSS指令有兩種方式，一種是在.css文件中，針對表格的樣式進行設置，例如框線border、外邊距margin、內邊距padding、字型font-family、標題位置caption-side等。
如果沒有辦法直接修改.css文件，則可以在、、等HTML表格的標記中，以屬性style=""的方式加上CSS指令。
常用指令：
margin: 表格邊框與網頁邊緣的距離，可以用像素（px）或百分比（%）來標示，也可以設為auto
border: 表格邊框的樣式和顏色
caption-side: 表格標題的位置
border-spacing: 單元格邊框之間的距離
border-collapse: 把單元格邊框之間的距離定為0
padding:內邊距，也就是單元格文字與單元格框線的距離
text-align:文字水平對齊方式，可以是left或center或right
********在.css文件中設置表格樣式
table{
margin-left:20px;
margin-right:20px;
border:thinsolidblack;
caption-side:bottom;
border-spacing:10px30px10px30px;
border-collapse:collapse;
}
caption{
font-style:italic;
padding-top:8px;
padding-bottom:8px;
}
td,th{
border:thinkdottedgray;
padding:5px;
}
********在HTML表格標記中加入CSS指令
在HTML表格的標記中加入CSS指令是最直觀的做法。
不過它的缺點是，必須逐個表格加入設置，比較瑣碎，而且容易造成不統一的樣式。
（如果是在.css文件中設置，就可以控制整個網站網頁中的表格，修改起來也比較簡便快速。
）
此處填入表格的標題
此處為標題1
此處為標題2
此處為標題3
內容1a
|
內容2a
內容3a
內容1b
內容2b
內容3b
樣式設置效果：
此處填入表格的標題
此處為標題1
此處為標題2
此處為標題3
內容1a
內容2a
內容3a
內容1b
內容2b
內容3b
效果說明：
*在中設置margin-left:auto;以及margin-right:auto;，可以讓表格置中。
*在或 |
中設置width:150px;，可以指定單元格的寬度（每一個直行只要設置第一個的寬度就可以了。
）
*在 |
中設置text-align:center;，就可以把整個橫列的單元格設置為文字居中。
於
4/07/2020
以電子郵件傳送這篇文章BlogThis！分享至Twitter分享至Facebook分享到Pinterest
標籤：
DIY建站,
HTML&CSS
沒有留言:
張貼留言
較新的文章
較舊的文章
首頁
訂閱：
張貼留言(Atom)
搜尋此網誌
標籤
網路小白求生Tips
(5)
DIY建站
(14)
HTML&CSS
(8)
Python學習
(7)
WordPress
(7)
精選文章
移除Captcha4WP外掛的步驟
熱門文章
使用Keynote製作透明背景的logo或圖標
社交媒體的興起讓許多人在網上有了朋友圈，與親戚朋友、同學、同事的互動拉到了線上，有時候這種虛擬空間的交流比實體世界的往來更加頻繁，因此也越來越受到重視。
幾乎所有的社交帳號都需要使用者上傳一張「頭像」。
上傳自拍照片當頭像是最普遍的，而有時我們也可以下載網上的圖像來用。
不過，你是否考...
修圖去背景，用Keynote就OK！
講到修圖去背景，很多人首先想到的是用Photoshop這類的修圖軟體，這好像也是P圖一詞的由來。
但是在現實生活中，身為網路小白的人，若不是以處理影像為主業，付費使用這類專業軟體顯然不太實際。
以我自己來說，我要的是可以運用自己電腦裡已經有的程式APP，或是網上容易找到的免費軟體，滿...
如何調整Blogger圖片的清晰度
Blogger是Google提供的免費網誌（又稱部落格、博客，以下通稱部落格）服務，是發布日誌形式文章的網路空間。
其實近幾年來，社群媒體興起之後，網友們的注意力和時間都轉移到手機端的FB和LINE了，對了還有IG。
部落格的熱潮似乎已經過去。
不過我很慶幸Blogger的服務還延續著...
HTML表格的基本設定
製作網頁時，網頁內容總會有需要用上表格的時候，如何使用HTML語言來設置表格呢？本文介紹的是製作HTML表格的基本標記。
表格的用途是能夠簡潔而有條理地呈現資料性內容（例如數據），使讀者可以快速地掌握資料的脈絡。
適當地使用表格來呈現資料，可以提高網頁內容的可讀性，增進讀者的...
如何執行Python程式
執行程式一般都叫「跑程式」，也就是下了「指令」給電腦裡的應用程式之後，它會跑出結果來。
其實，計算加減乘除的計算機，可以說就是最簡單的程式執行工具：按鍵輸入「1+1=」，運算的結果（2）就會立即出現在螢幕上。
Python也是下指令之後讓應用程式跑出結果來。
基本上也是輸入1+...
網誌存檔
►
2022
(5)
►
二月
(3)
►
一月
(2)
►
2021
(1)
►
十月
(1)
▼
2020
(23)
►
十二月
(1)
►
十月
(1)
►
九月
(6)
►
七月
(1)
▼
四月
(14)
如何執行Python程式
Python安裝流程forMac（MacOS）
認識層疊樣式表CascadingStyleSheets(CSS)
CSS表格：頁面佈局與定位
HTML表格的基本設定
HTML文件中的顏色設定
在HTML文件中標記圖片
在HTML文件設置超文本鏈接（hypertextlink）
HTML5，簡化又進化的超文本標記語言
HTML：網頁的標記語言
如何調整Blogger圖片的清晰度
用PowerPoint製作透明背景的logo小圖標
使用Keynote製作透明背景的logo或圖標
申請域名domainname-網路資源
|
|
