李明哲老師多媒體互動寫作教學: HTML/ CSS 的表格應用語法

「表格」是網頁寫作的靈魂技能

再複雜的版面，都是由表格以及表格應用觀念所排列出來的。因之，Html的表格語法是如何呈現，就是要去理解、掌握之事。先來看下列的多媒體新聞，這正是由表格所排版出來的。

範例：

動物園的河濱

那是天氣很好的日子，
很多人都往陽光照耀的河濱前進，尋找更有視野的時光。

請再看一下表格寫作的講解〔click!〕，再看下面文字解說：

Html基礎表格語法

表格由列與欄組成，表格中的空格稱之為儲存格。我們先來看下面的圖例：

^　第
^　一
^　欄

^　第
^　二
^　欄

A	B
C	D

＞第一列

＞第二列

再來是Html表格語法：

語法說明：

<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 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語法。

語法：

呈現：

第一格

第二格

在<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的格線。

呈現：

李明哲老師多媒體互動寫作教學

2012年6月24日星期日

HTML/ CSS 的表格應用語法

沒有留言:

張貼留言

2012年6月24日 星期日

HTML/ CSS 的表格應用語法

沒有留言:

張貼留言

2012年6月24日星期日