「表格」是網頁寫作的靈魂技能
再複雜的版面，都是由表格以及表格應用觀念所排列出來的。
因 之，Html的表格語法是如何呈現，就是要去理解、掌握之事。
先來看下列的多媒體新聞，這正是由表格所排版出來的。
範例：
|
|
動物園的河濱
那是天氣很好的日子，
很多人都往陽光照耀的河濱前進，尋找更有視野的時光。
|
Html基礎表格語法
表格由列與欄組成，表格中的空格稱之為儲存格。我們先來看下面的圖例：
再來是Html表格語法：
<table>
<tbody>
<tr> <td>A</td><td>B</td> </tr>
<tr> <td>C</td><td>D</td> </tr>
</tbody>
</table>
語法說明：
- <table></table>、<tr></tr>、<td></td>是三個最主要的表格語法標籤。瀏覽器讀到<table>時會知道要處理表格了，而讀到</table>時則是知道表格結束。也就是說<tabel>是表格的起始碼，而</table>是表格的結束碼。
- <tr>xxx</tr>是一列，而裡面的xxx是儲存格。<td>xxx</td>是指一個儲存格，而xxx是儲存格的內容。如上表，
<tr> <td>A</td><td>B</td> </tr>這是指一列中有二個儲存格
<td>A</td>以及<td>B</td> ，其內容分別是A以及B。
- <tbody>.......</tbody>這一組可寫可不寫，但電腦邏輯上是默認的。最好練習寫上。
- 表格語法處理起來是比較麻煩的，建議基本上看得懂就成。表格的製作及使用最好還是以網頁編輯器如Kompozer來處理較好。
幾個重要的 HTML 表格語法參數：table v.s. td
對表格進一步控制有幾個重要的參數，同學要注意的是控制參數如果是放在<table>裡，是指控制表格全部，如放在<td> 裡面則只是控制單一儲存格。表格範例：
語法呈現：
<table bgcolor="#ffffcc" border="2">
<tr>
<td align="left" width="240">第一格<br>
</td>
<td align="center" width="150">第二格<br>
</td>
</tr>
</table>
語法說明：
- 在<table xxx>裡面的是指控制整個表格，bgcolor="#ffffcc"是指表格的背景顏色，border="2"是指表格的框線寬度為2px。如果border="0"就會取消格線，那麼看起來就好像是排版一樣，是我們常運用表格來排版的技巧。
- <td xxx>是指對單一儲存格進行控制。就第一格而言，align="left"是指文字靠左，width="240"是指第一格寬度為240像素。第二格，align="center"是指文字居中，width="150" 指寬度150像素。
- ★★整個表格的寬度是由所有的格子的寬度相加而成（如果表格本身沒有設定的話）。換言之，想要寫出多寬的表格，可由各格子寬度的設定來加總。
使用CSS的語法：
<table style="background-color: #ffffcc; border: 2px solid black;"
>
<tr>
<td style="border: 1px solid black; text-align: left; width: 240px;
color: red;" >第一格<br>
</td>
<td style="border: 1px solid black; text-align: center; width:
150px;" >第二格<br>
</td>
</tr>
</table>
呈現：
整個表格的靠左、居中及靠右
語法：
<table bgcolor="lightgray" border="1"
align="center">
<tr>
<td align="left" width="240">第一格<br>
</td>
<td align="right" width="180"
bgcolor="lightgreen">
第二格<br>
</td>
</tr>
</table>
呈現：
說明：
一、整個表格的移動位置對齊，要在<table >內設定。左、中、右，是
align="left"、align="center"、align="right"。
二、如果是設定在<td>，是指內文的對齊方式。
三、看到沒有，同一個html align="xxx"，在表格及格子的作用效果是不同的。很煩！所以，統一的CSS才會被流行使用。
使用CSS的語法：
<table style="background-color: lightgray; border: 1px solid black;
margin: auto; ">
<tr>
<td style="text-align: left; width: 240px; border: 1px solid
black;">第一格<br>
</td>
<td style="text-align: right; width: 180px; background-color:
lightgreen; border:1px solid black;">第二格<br>
</td>
</tr>
</table>
呈現：
表格和圖像
在<td>xx</td>內寫入圖像的語法<img
src="xxx">，就可以了。要注意的是，格子的寬度要和圖像寬度相同。
語法：
<table bgcolor="#FFC78E" border="1" align="center">
<tr>
<td align="left" width="260">
<img
src="https://c2.staticflickr.com/8/7524/27385003153_656ca16a9c_b.jpg"
style="width: 100%; margin: 0px; padding: 0px;"><br>
</td>
<td align='center' valign="top" width="120"
bgcolor="lightgreen" style="padding-left: 5px;"><span
style="font-weight: 900; font-size: 1.07em;">
墾丁</span><br>
南部的顏色。<br>
</td>
</tr>
</table>
呈現：
|
墾丁
南部的顏色。
以及，
生性不受控制的雲。
|
說明：
格子，td內，的內容，其垂直方式的設定方式為上、中、下：valign="top"、valign="middle"、valign="bottom"
。
文字的垂直方式CSS語
法：
style="vertical-align: top;" //top, middle,
bottom, //上、中、底
作業：
請用 CSS 語法做出上面的範例。
CSS簡明語法大全 ←← click
寫作觀念：「媒材物件」的理解和操作
在上例中，「一個」文本樣態的呈現，我們卻要同時考慮table、td、img這「三種」不同的寫作元素。這樣的寫作思考模式，就是「媒材物件」的概念在
發揮作用了。
什麼是「媒材物件」這樣的概念呢？「物件」是要指涉什麼意思？為什麼數位寫作要強調這一寫作觀念？它和傳統文本寫作最大的差別在那裡呢？
來，先從你能了解的經驗值開始。如下，
<div>
這是文字內容。
</div>
上例，當「這是文字內容」這幾個媒介材料（媒材／文字），被<div>xxx</div>包起來後，這幾個文字就有了「媒材物
件」的屬性了。
被<div>xxx</div>包起來後，這幾個字就成為一個「單元」，可以透過對DIV下語法，對這幾個字（單元）進行變化操
作。我們把這樣的，藉由語法包起來的媒材單元，稱之為「媒材物件」。所以，上例，DIV就是一個媒材物件。
當我們思考時，不是思考「六個字」，而是思考這
六個字所形成的「一個單元」。因之，「一個單元」就以「物件」來指稱。
這是傳統文本寫作時所不用特別具備的「寫作觀念和技法」，但卻是數位文本寫作的「重要核心觀念和技法」。
於是，<table>xxx</talbe>，<td>xxx</td>，<p>
xxx</p>，就可以被視之為是不同的、各自獨立的媒材物件。
另一種媒材物件的形式是<img src="xxx">。
它不用被語法「包起來」，例如上述<div>，而是本身就是「媒材物件」。因為，它本身就是一個可以用語法來進行操作的「單元」。例如改變
寬、高值。
所以，媒材（可以是不同的媒材）只要是被語法形成某一單元，以進行可能的變化操作，就可以被稱之為「媒材物件」，也可以說是被規定為某一「媒材物件」。
「媒材物件」裡面，往往也會包含著不同的「媒材物件」，例如table裡面，包含著td、img等不同的媒材物件。因而，媒材物件與「裡面媒材物件」所形
成的關係，就是「層級關係」；也就是
媒材物件的層級關係
（click）。
區塊居中 v.s. 區塊內容居中
還記得嗎？在之前<div>、<p>區塊物件中，也有看到 align="center"，這是指區塊內的內文要居中。區塊物件
本身無法調整。
在表格物件中，格子，<td>，如果用 align="cneter"也是指內文居中。
但如果是表格<table>，則是指表格區塊本身居中。<hr>也是。
區塊居中和區塊物件的內文居中，是兩種不同的空間性寫作概念。
用align="center“，事實上容易引起混淆。所以後來，
在CSS
語法中，就有全新的規定，可以讓所有區塊物件「全部通用」。
CSS內文的位置是：
style="text-align: center;"，（left/ center/ right）。
CSS區塊物件的位置：
左： margin-left:
3px;
【這是預設值，可不寫；也可以設定靠左的距離，紅字部分】
靠中： margin-left: auto; margin-right: auto; 【要寫這二個才有用】。或，直接寫： margin: auto; 也可以。
靠右： margin-left: auto; margin-right:
5px;
【要寫二個，可以設定靠右的距離，紅字部分】
語法：
<div style="width: 300px; margin-left: auto; margin-right: auto;
text-align: center; border: 1px solid red;">
這是內文。
</div>
呈現：
這
是內文。
表格格線，使用html 及 css 上的差異
表格的框線，可以用html以及css兩種寫法來寫。但這二種方法，在呈現效果上有一些不同，你要能知道，才不會被搞亂。
如果用html來寫，在<table xxx>加上 border="1"，那麼
表格本身以及格子，
都會有框線。所以看起來會有兩層的感覺。
語法：
<table border="1">
<tr>
<td align="center" width="200">第一格<br>
</td>
<td align="center" width="200">第二格<br>
</td>
</tr>
</table>
呈現：
但是，如果是用CSS來寫，style="border: 1px solid black;"，於<table xxx>之內寫入，
則只會在表格本身有框線，格子是
沒有的。如果格子的框線也想
要出來，就要在<td xxx>裡面也下css語法。
語法：
<table style="border: 1px solid black;">
<tr>
<td align="center" width="200" style="border:
1px solid
black;">第一格<br>
</td>
<td align="center" width="200" style="border:
1px solid
black;">第二格<br>
</td>
</tr>
</table>
呈現：
在<td xxx>之內寫入CSS語法，格子框線就會出現。
請
按我看格線。
為什麼要使用表格。
因為要創造文本內容媒材排列上的規律感。
表格 CSS 語法：
<table
style="border: 1px solid black; text-align: left; width: 100%;
table-layout: fixed;">
<tr>
<td style="border: 1px solid black; vertical-align: top;"><img
style="
width: 100%;"
src="https://farm2.staticflickr.com/1878/29622624577_61d2bc1ffc_c.jpg">
<br>
</td>
<td style="border: 1px solid black; vertical-align: top;"><img
style="width: 100%;"
src="https://farm2.staticflickr.com/1878/29622622427_9e6f338942_c.jpg">
<br>
</td>
</tr>
</table>
呈現：
（↑ hover：格線消失，成為排版版型呈現）
平均表格的寬度的 CSS 語法：
style="table-layout: fixed;" //fixed, auto //平均格寬， 沒有平均格寬
排版技巧：將表格格線取
消，就會有規律性的版面出現。
style="border:
0px solid red;"
// 0px 將格線寬度設為0
style="border: 1px solid
transparent;"
// transparent 將格線設為透明
table CSS 專用語法：
style=“ border-collapse: separate;" // separate,
collapse //邊線分開、邊線合一
style=" border-spacing: 3px;" //也可以兩個 3px 5px
//左右邊線距離 上下
style=" table-layout: fixed;" // fixed,
auto //固定分割、不固定分割
請看參考範例
W3school
互動實例
文本的哲學：數位文本、空間敘事與表格寫作
數位文本是一種全新的文本形式，它用匯流及互動來呈現文本意義。表格，不只是重要寫作技巧，它同時有著它的「文本理論」。
【進階】使用Kompozer寫作：表格操作技能
影片內容補充說明：
內容使用軟體KompoZer，
使用及下載 click here
使用kompoZer快速學會表格運用：
如果我們想要把整個表格居中或靠右時要如何來做呢？
影音教學：
使用CSS的讓表格居中、靠右
作法：
<table style="
margin: auto; width: 90%;">
…
…
</table>
說明：
一、將寬度先縮小，width: 90%，這樣才有必要去居中 或靠右。一般預設值，會讓表格撐到最大寬度，這時，是動不了的。
二、使用區塊元素居中css語法，margin: auto; ，這樣表格（亦是區塊元素）就可以居中。
三、要表格靠右，使用 margin-left: auto; margin-right: 0px; ，這一組參數。
更多表格排版寫作範例
★★ 請挑選一範例為作業的範本。
精準控制表格的CSS語
法；
父子關係的使用
<style>
.tabletest01 {
width: 90%;
border:1px solid gray;
margin:auto;
}
.tabletest01 >tbody >tr:nth-of-type(1) >td {
width: 33%;
}
.tabletest01 >tbody >tr:nth-of-type(1) >td >img{
width: 100%;
}
.tabletest01 >tbody >tr:nth-of-type(2) >td {
width: 33%;
font-size: 115%;
font-weight: bold;
color: red;
text-align: center;
padding: 0.5em 0em;
}
.tabletest01 >tbody >tr:nth-of-type(3) >td {
width: 33%;
color: black;
line-height: 1.2;
letter-spacing: 0.1em;
}
</style>
HTML語法
<table class="tabletest01">
<tbody>
<tr>
<td><img src="圖的網址"></td><td><img
src="圖的網址"></td><td><img src="圖的網址"></td>
</tr>
<tr>
<td>中標一</td><td>中標二< /td><td>中標三</td>
</tr>
<tr>
<td>這是內文這是內文這是內文這是內文</td><td>這是內文這是內文這是內文這是內文<
/td><td>這是內文這是內文這是內文這是內文</td>
</tr>
</tbody>
</table>
呈現
 |
 |
 |
| 中標一 |
中標二 |
中標三 |
| 這是內文這是內文這是內文這是內文 |
這是內文這是內文這是內文這是內文 |
這是內文這是內文這是內文這是內文 |
tr 出現格線的 CSS 設置，使用
Class
CSS
<style>
.tacla {
border-collapse: collapse;
border: none;
}
.tacla td {
border: none;
}
.tacla tr {
border: 1px solid gray;
}
<style>
說明：
預設狀況，tr的格線是關閉的。表格及格子的格線開啟。
如果要啟用，那麼表格的先設定為collapse，再來表格以及格子的格線都要取消。
最後再加入tr的格線。
呈現：
，或是我比較愛用的Notepad++
。
