[HTML Layout] 物件排版

思考

網頁元件排版，突然想改位置？改大小？改排版方式？更人性化的互動性？更多元多變的排版需求，這樣的設計方式，好？

簡介

---

撰寫網頁時，如何將網頁元件放到正確位置呢？過去，我會使用 <table> 達到目標。一直到遇到了 CSS，簡直就是一見鍾情哪。

範例：圖片牆

---

1. 使用 Table 元件排版
點選 HTML標籤， 查看使用的網頁元件  <table>、<tr>、<td>、<img>。點選 Result 標籤，查看顯示結果。





2. 使用 CSS  排版
點選 HTML標籤， 查看使用的網頁元件  <img>。點選 CSS標籤，查看 每個<img>元件的排版設定。點選 Result 標籤，查看顯示結果。

無論使用 <table> 或 CSS 排版，都能達到目標。使用 <table> 方法排版，需使用 <td> 的 colspan 屬性，設定橫跨幾個儲存格。使用CSS 排版，需使用 position、top、left 屬性。

若今天排版的需求改變，那哪種寫法能快速達成目標呢？

1. 大小改變，<table> 方法或CSS方法都需要調整 heigth 和 width 屬性。
2. 順序改變，<table> 方法要去剪剪貼貼 <img> 至正確的<td>內，CSS 方法可調整 <img> 的順序，或更改各 <img>元件的 position、top、left ... 等等屬性。
3. 排版改變，<table> 方法要重新設計<tr>和<td>的編排結構，CSS 方法要調整各 <img>元件的 position、top、left ... 等等屬性。

使用 CSS  排版，元件要怎麼擺就怎麼擺，要多大就多大，不但能夠統一管理元件排版屬性，也讓排版彈性更高。

參考資料