Yahoo!奇摩拍賣 - 賣家技巧教學：進階HTML語法精華版



買家技巧教學 \| 賣家技巧教學 \| 我的拍賣

進階HTML語法精華版

加上表格
有了圖片網頁才是彩色的
天馬行空的關於我

加上表格

▲TOP

剛開始投入拍賣的賣家也許因為經驗不足，商品敘述說明只用三言兩語帶過，隨著賣場蓬勃發展說明也要越來越專業，這時就要藉助表格來安置你略顯複雜的賣場。表格可以很簡單也可以很複雜，我們先從簡易的開始。

起手式：

基本的語法和屬性，雖說Yahoo!奇摩拍賣在上傳的頁面上提供了HTML精靈，但是為了更遠大的目標著想，我們還是要會一些基本表格語法和他的屬性。

表格的基本語法：

<TABLE></TABLE>	產生表格
<TABLE BORDER=X>	定義框線X的表格
<CAPTION>	表格標題
<TH>	定義欄位標題
<TR></TR>	定義橫列
<TD></TD>	定義欄位中的資料

表格的基本屬性：

<WIDTH><HEIGHT>	定義寬度,高度
< ALIGN=LEFT,RIGHT,,,>	水平定位,可用於資料或表格
<VALIGN=TOP,BOTTOM,,>	垂直定位,可用於資料或表格
<BGCOLOR>	定義表格的背景顏色
<COLSPAN>	水平欄位的合併
<ROWSPAN>	垂直欄位的合併

有沒有看的很模糊？這是一定的，對照上真實的表格再加上拍賣業績的誘惑一定就清晰多了。下面列舉一個實用表格，如果大家真的還是很沒時間學HTML也可以直接複製回去用喔！！

商品資料
型號：9100500215
顏色 :紅
尺寸: 高19寬27厚8 公分
材質: PVC
商品簡介
◆知名運動品牌NEW BALANCE,中型基本款四方形側背包,獨家透氣皮革設計,拉鍊式主層開合,包包內附貼心防水內裡,內袋2手機袋1還有隱藏式後層拉鏈袋,好看又好搭,絕對是您外出逛街的最佳選擇喔!! ◆包包內附可放相機袋1手機袋1筆袋2拉鍊式內袋1超大主層內容量具蛇腹式底部,可調整大小 ◆ 因為拍照關係多少有色差保證實品比照片漂亮.保證純台灣區代理商公司貨.

上面是個簡單的賣場說明，我們來看看他用了哪些語法，為了方便閱讀html碼使用紅字，黑字部分為解說。

<table border="1" align="center" width="70%" height="244">
這是表格開頭 border的屬性，設為1代表框線寬度為1，寬度為頁面70%，高度244像素
<tr>
代表一列的開始
<td width="50%" height="29" bgcolor="#FFFF00">商品資料</td>
一個欄位的開始與結束，寬度屬性為表格的50%，高度為29%，像素表格顏色設為黃色
<td width="30%" rowspan="5" height="146">
另一個欄位的開始，這個欄位垂直整合五個列
<div align="center">
靠中間對齊
<a href="http://tw.page.bid.yahoo.com/tw/auction/1133537743">
這是一個超連結，相信大家在初級班都有看到並已經使用過
<img src="http://tw.image.bid.yahoo.com/users/8/2/0/1/bagtown_giga-img600x600-11074166034710984102862-8.jpg" border="0" width="176" height="177"></a>
這是一張圖片的位址，可以讓我們在網頁上呈現出美美的圖片
</td>
欄位的結尾
</tr>
行的結尾
</table>
表格的結束

就這樣一個個表格的堆疊延伸只是很簡單的語法就可以做到，在HTML精靈裡，我們可以在文字模式裡任意複製欄位行列，只要你熟悉這些語法就可以無限的製作出漂亮的表格，以下是HTML精靈畫面：

有了圖片網頁才是彩色的

▲TOP

一個網頁說明，如果只是文字敘述，就算你用盡了文字顏色，大小，粗細體，只會讓閱讀者更加眼花撩亂，不如一張美美的圖片可以讓買家更具體的體會商品魅力，圖片不僅僅秀出商品也可以用在賣場背景，表格，小圖示的裝飾，Yahoo!奇摩拍賣在說明處限制了十張圖片的引用，不過我想這已經足夠構逐一個賣場了。

先介紹基本功也就是語法，等下再推出速成法：
在HTML裡導入一張圖片的語法<img src="圖片的網址">常用的屬性有<width> <border><high>等等，當我們要在網頁上插入一張圖片時，務必要先將這張圖片上傳到網際網路上的一個空間，這個空間不管是付費或是你的ISP公司送你的都會有一個網址，比如說 http://tw.image.bid.yahoo.com/users/8/2/0/1/bagtown_giga-img306x600-109920935238031_0316_054a-6.jpg 這長長的一串就是圖片的網址，只要在適當位置上插入這個語法並調整大小，一張圖片就產生囉。

基本功的圖示(反白部分為基本語法)

再過來介紹一個速成法，也就是在HTML精靈裡的HTML模式，只要你把要引用的圖片拖曳或複製到HTML上的框框裡就可以囉，從此就不用貼網址檢查那串又臭又長的網址列喔，是不是很讚啊！
聰明複製法

說來說去都是HTML精靈幫了大忙，但是在複製之前一定要確認版權尊重智慧財產喔，不過HTML精靈只能做產品說明嗎？聰明的精靈不僅在產品說明處用的到，而且在"關於我"也可以看到他的蹤跡，而且"關於我"的圖片引用和基本資料的刊登更是沒有限制，網友可以好好的玩玩特技，並把一些交易的方式，付費機制，聯絡資訊，最新的商品訊息，甚至站內的最新優惠消息好好地在"關於我"披露一番，可以說"關於我"根本就是你的一個網站首頁喔。

天馬行空的關於我

▲TOP

基於產品說明只能放十張圖片還有聯絡資料，連結的限制，產品說明處建議大家還是讓買方能乾乾淨淨快速的取得該有的資訊為主，讓你的創意就留在關於我來表現吧。筆者逛了好多很有創意的"關於我"，自嘆實在是高手如雲，我們就從理論上著手，天馬行空的事就給您來創造吧!下面是關於我的HTML精靈

是的，還是熟悉的介面，使用起來絕對沒有問題，我們在"關於我"放置了自己公司的小介紹，上班時間，購買運送方式，還有一些公告和最新消息，最重要的還有一些產品的超連結，版面已經使用近一年該是改改版的時間了。

圖片放置的並不多，只有一些小圖示，主要還是資訊的傳達讓買家可以輕易知道如何進行交易，哪裡進行，搜尋產品也更容易，別懷疑這都是用表格和HTML精靈慢慢打出來的，您當然也可以做的比我好呦。

主講人：包大人(電子商務經營達人)

對上述解說內容滿意嗎？請參與我們2006拍賣教學問卷調查

回賣家技巧教學

會員中心∣服務說明∣Yahoo!奇摩