首先的認知：

• 對HTML語法完全不懂的，要先行自修(本教學附一點點)。
• 本文所謂的表格不是一般教學網站所使用Table標籤，而是DIV標籤。
• 本教可能學需使用Office FrontPage才能順利完成。

• 教學分兩部份：「原理」與「實作」。

• 原理與實作對照學習會更了解。

一些知識：

• HTML裡的<P>與<DIV>標籤原本都是拿來做段落用的，只要撰寫在此標籤內的文章，會自動變成一個段落。<P>標籤會設定邊界(margin)，在段落的上下會置入一列空白，<DIV>標籤則不會設置空白，為何用<DIV>來替代<TABLE>的標籤的原因就在於此 ，加上FrontPage對<DIV>標籤有較便利的調整方式與較高的調整自由度(像框線、圖層工具列)，配合豐富的Style Sheet加上<DIV>幾乎承接所有的CSS屬性，足以模擬<TABLE>標籤。
  
  　
• DHTML（動態HTML）中，被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。就如同我們在打包物品一樣，您可以一個包裹只包一件衣服，也可以一個包裹包衣服、鞋子、帽子等。<DIV>和<SPAN>標籤就是這種功能！您可以用<SPAN>標籤包住一段文字，該段文字就成了一個物件（您要想成包裹也無可厚非...），您也可以用<SPAN>標籤包住一段文字，一張圖、一個表格，那麼這三個東西也會被視作一個物件。
  註:<SPAN>不斷行
  　
• <DIV>的定義：
   
  　　　<DIV> ("division"，"部分"的簡稱)是一個"塊級元素＂。<DIV>可以包含段落、標題、表格甚至其它部分。這使<DIV>便於建立不同集成的類，如章節、摘要或備註。 它絕對是CSS的好幫手。
  
  　　
  　
• 那麼<DIV>標籤到底要怎麼使用，才能模擬成<TABLE>標籤呢？首先來看看<DIV>到底有哪些Style Sheet....

HTML該如何敘述？

無屬性：<標籤名稱>內容</標籤名稱>
單屬性：<標籤名稱 屬性名稱="值">內容</標籤名稱>
多屬性：<標籤名稱 屬性名稱1="值"   屬性名稱2="值">內容</標籤名稱>
依此類堆

＊重要的是:內容要被標籤名稱所包夾
＊標籤及屬性名稱和值 英文大小寫無差別
 

例如：

<IMG SRC="sample.gif"></IMG> -------->顯示圖片</IMG>一般可省略
<DIV ALIGN="center">段落內容</DIV> ------->段落內容文字圖片等置中 </DIV>不能省略
<DIV STYLE="各種樣式">段落內容</DIV>  ------->段落內容使用Style定義樣式。</DIV>不能省略

Style Sheet 是什麼?

Style Sheet 是一種屬性名稱，中文稱呼「樣式表」。HTML是用來記述文件的邏輯結構的，不過在以前Netscape和Microsoft這2家公司的市場爭奪戰之中(現在多了Mozilla Firefox)，HTML也逐漸地被使用來記述外觀。後來為了讓HTML還原他最初的作用，有人便提出了「讓邏輯結構與外觀（修飾）分開來使用」。為此，『Style Sheet 』因而誕生。
　

Cascading Style Sheets 是什麼?

Cascading Style Sheets（串接樣式表），簡稱CSS。定義為：它是由許多樣式名稱和樣式指定值所組成的字串，我們可以利用設定好的樣式表，指定給某一種HTML標籤，或某一群組HTML標籤來使用。而被套用的HTML標籤，將會依據所套用的CSS來顯式它的外觀。所以特性類似的標籤就會給予相同的樣式名稱，讓Style Sheet能讓設計著有快速且簡單的方法。
　

Style Sheet 的使用方式?

Style Sheet(樣式表)的使用方式按照用途，狀況的不同，可分成幾種方式。

1. 讀取外部的CSS檔案 由於檔案位於外部所以可以讓多人共享。如此一來網頁的版面配置作業，也可以更簡單、更美觀了。
2. 在MSN Spaces等不支援CSS設定的網誌，那就直接在標籤內寫上Style Sheet。
3. 其他方式請參考[here]。
   　

Style Sheet 該如何敘述?(以DIV為例)
 
單樣式：<DIV Style="樣式名稱:值 ;">內容</DIV>
雙樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ;">內容</DIV>
多樣式：<DIV Style="樣式名稱1:值 ; 樣式名稱2:值 ; 樣式名稱3:值 ; 樣式名稱4:值 ; .....">內容</DIV>
 

區塊屬性的Style Sheets：(僅列出DIV可用) 紅色的樣式是本篇的重點

＊那麼<DIV>標籤要怎麼使用，才能 實現<TABLE>標籤的功能呢？

先考慮橫向部份:

關鍵解說：

表格最先要表現出來橫向的方塊排列....
而<DIV>有兩種較好的設定方式，可以模擬成<TABLE>(表格)...
之後比較兩種方式，差別在設定兩種以上字型(尤其對應行字型不一致)過後，第一種方式易跑位，而在對齊的部份，而表格接密的部份則都沒差， 又因為第二種方式可以用FrontPage直接設計，所以在此建議採用第二種，也可以混合使用。

第一種方式(使用Display:inline;) ：(向左下對齊)

HTML：

<DIV style="border:1px solid #000000; WIDTH: 97px; HEIGHT: 64px;Display:inline; background-color:#99FF33">
A</DIV>
<DIV style="border:1px solid #000000; WIDTH: 109px;HEIGHT: 73px;Display:inline; background-color:#FF9999">
B</DIV>

顯示結果：

第二種方式(使用float:left;)：(向左上對齊)

HTML：

<DIV style="float:left;border:1px solid #000000; WIDTH: 99px; HEIGHT: 60px; background-color:#99FF33">
A</DIV>
<DIV style="float:left;border:1px solid #000000; WIDTH: 109px;HEIGHT: 77px; background-color:#FF9999">
B</DIV>

顯示結果：

附:MSN Spaces 網誌模組大小對照表(繁體中文):