*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2012年6月24日 星期日

Html的表格應用語法

「表格」是網頁寫作的靈魂技能
再複雜的版面,都是由表格以及表格應用觀念所排列出來的。 因 之,Html的表格語法是如何呈現,就是要去理解、掌握之事。 先來看下列的多媒體新聞,這正是由表格所排版出來的
範例:


動物園的河濱

那是天氣很好的日子,
很多人都往陽光照耀的河濱前進,尋找更有視野的時光。
請再看一下表格寫作的講解〔click!〕,再看下面文字解說:




Html基礎表格語法


表格由列與欄組成,表格中的空格稱之為儲存格。我們先來看下面的圖例:
^ 第
^ 一
^ 欄
^ 第
^ 二
^ 欄

A B
C D
第一列
第二列

再來是Html表格語法:
<table>
  <tr>  <td>A</td><td>B</td>  </tr>
  <tr>  <td>C</td><td>D</td>  </tr>
</table>
語法說明:
  1. <table></table>、<tr></tr>、<td></td>是三個最主要的表格語法標籤。瀏覽器讀到<table>時會知道要處理表格了,而讀到</table>時則是知道表格結束。也就是說<tabel>是表格的起始碼,而</table>是表格的結束碼。
  2. <tr>xxx</tr>是一列,而裡面的xxx是儲存格。<td>xxx</td>是指一個儲存格,而xxx是儲存格的內容。如上表, <tr>  <td>A</td><td>B</td>  </tr>這是指一列中有二個儲存格 <td>A</td>以及<td>B</td> ,其內容分別是A以及B。
  3. 表格語法處理起來是比較麻煩的,建議基本上看得懂就成。表格的製作及使用最好還是以網頁編輯器如Kompozer來處理較好。

幾個重要的表格語法參數: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>
語法說明:
  1. 在<table xxx>裡面的是指控制整個表格,bgcolor="#ffffcc"是指表格的背景顏色,border="2"是指表格的框線寬度為2px。如果border="0"就會取消格線,那麼看起來就好像是排版一樣,是我們常運用表格來排版的技巧。
  2. <td xxx>是指對單一儲存格進行控制。就第一格而言,align="left"是指文字靠左,width="240"是指第一格寬度為240像素。第二格,align="center"是指文字居中,width="150" 指寬度150像素。
  3. ★★整個表格的寬度是由所有的格子的寬度相加而成(如果表格本身沒有設定的話)。換言之,想要寫出多寬的表格,可由各格子寬度的設定來加總。

整個表格的靠左、居中及靠右


語法:

<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>,是指內文的對齊方式。



表格和圖像


在<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: 260px; 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" 。


寫作觀念:「媒材物件」的理解和操作


在上例中,「一個」文本樣態的呈現,我們卻要同時考慮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-left: atuo; 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語法,格子框線就會出現。請 按我看格線



文本的哲學:數位文本、空間敘事與表格寫作

數位文本是一種全新的文本形式,它用匯流及互動來呈現文本意義。表格,不只是重要寫作技巧,它同時有著它的「文本理論」。




【進階】使用Kompozer寫作:表格操作技能





影片內容補充說明:
內容使用軟體KompoZer,使用及下載  click here


使用kompoZer快速學會表格運用:
一定要會的表格排版寫作基本動作(一)
一定要會的表格排版寫作基本動作(二)
一定要會的表格排版寫作基本動作(三)


如果我們想要把整個表格居中或靠右時要如何來做呢?

影音教學:



更多表格排版寫作範例


★★ 請挑選一範例為作業的範本



沒有留言:

張貼留言