數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2012年6月24日 星期日

HTML/ CSS 的表格應用語法

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


動物園的河濱

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




Html基礎表格語法


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

A B
C D
第一列
第二列

再來是Html表格語法:
<table>
<tbody>
  <tr>  <td>A</td><td>B</td>  </tr>
  <tr>  <td>C</td><td>D</td>  </tr>
</tbody>
</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. <tbody>.......</tbody>這一組可寫可不寫,但電腦邏輯上是默認的。最好練習寫上。
  4. 表格語法處理起來是比較麻煩的,建議基本上看得懂就成。表格的製作及使用最好還是以網頁編輯器如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>
語法說明:
  1. 在<table xxx>裡面的是指控制整個表格,bgcolor="#ffffcc"是指表格的背景顏色,border="2"是指表格的框線寬度為2px。如果border="0"就會取消格線,那麼看起來就好像是排版一樣,是我們常運用表格來排版的技巧。
  2. <td xxx>是指對單一儲存格進行控制。就第一格而言,align="left"是指文字靠左,width="240"是指第一格寬度為240像素。第二格,align="center"是指文字居中,width="150" 指寬度150像素。
  3. ★★整個表格的寬度是由所有的格子的寬度相加而成(如果表格本身沒有設定的話)。換言之,想要寫出多寬的表格,可由各格子寬度的設定來加總。



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


呈現:










沒有留言:

張貼留言