Go to basic：表格（二）

一定要會的表格排版寫作基本動作（二）

表格的使用是數位文本排版寫作的重要基本寫作技巧。
老師累積了數年的教書經驗，看著同學可能常見的錯誤，以及因為基本功不好所導致的「創意」上的不完整。
現在，
2015年重新推出有關表格寫作的基本動作系列。

【按 我復原 click!】

請注意：
在一個表格中，將「幾個格子變為一格」的功能，最好只使用一次。不然，易於出現無法控制之情況。
如需要較複雜之版型，請使用多個表格（都可以使用上述功能），再將其積堆起來，就可以了。

影 音教學內容：

1. 文字是泥土；圖像是磚塊。
2. 把表格的幾格變為一格。
3. 調整格與格之間的寬度。
4. 表格與單元格的快速CSS套用。
5. 在表格內插入背景圖。

影音教學範例的 CSS：

<style type="text/css">

.word2015013001 {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}

.word2015013002 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
}

/* 插入背景圖 */
.bacimg20170622 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}
</style>

表格寫作範例一：

天空的顏色決定了黃昏的溫度！燈光的開啟，是對夜晚的承諾。沈沈的重量！

↑ 請按這裡看上範例影音教學說明：

實作範例一：

這是文字

教學影音：




CSS語法：

<style>

/* 插入背景圖 */
.baim20180211 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}

/* 說明文字格式 */
.dword20180211 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.9;
background-color: rgba(152, 152, 152, 0.65);
text-align: center;
color: white;
}

/* 移動文字框 */
.dworpo20180211 {
position: relative;
top: -2em;
margin-bottom: -2em;
}

/* 以上一對是互動的CSS */
#tabtr20180211 {

}

#tabtr20180211:hover +div {
transition: 0.5s;
opacity: 0;
}

</style>

tr裡使用背景圖，創造出單一圖像均分割效果。

夏天。   天氣的好不好，看著綠葉和小蟲就知道了！

	下午的食堂 人的多是一種必然。 快走的步代， 是一種讓人賞心的節奏。

★整個表格（table）插入背景圖。

表格寫作相關主題：

1. Html 的表格應用語法
2. 快 速排版寫作：表格堆積木法
3. 簡 單、快速：3秒調出漂亮文字布局
4. CSS 文字布局快速套用法
5. 表 格使用基本功(5)：影像排排站呈現規律美