Dreamweaver 表格垂直對齊預設值導致內容置中？一行屬性解決

使用 Dreamweaver 編輯網頁表格時，發現單元格內容（如右下角的 MP3、影片、圖片區塊）不在左上角起始，而是垂直置中？這是 HTML <td> 預設 valign="middle" 導致。本文提供快速修正與現代 CSS 替代方案。

根本原因

HTML 表格單元格 <td> 預設垂直對齊為 middle（垂直置中）。早期 Dreamweaver 設計視圖常隱藏此屬性，導致新手誤以為是版面錯誤。

傳統 HTML 屬性修正（快速修復）

<td width="760" valign="top">
  
</td>

屬性值：top | middle | bottom | baseline。

現代 CSS 最佳實踐（推薦）

HTML5 已棄用 valign，應使用 CSS vertical-align：

<style>
  td.align-top { vertical-align: top; }
  /* 或針對整張表格 */
  table.valign-top td { vertical-align: top; }
</style>

<td class="align-top">內容靠上</td>

完整範例：右下角多媒體區塊靠上對齊

<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="vertical-align: top; width: 760px;">
      <!-- MP3、影片、圖片內容 -->
      <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
      <video controls width="320"><source src="video.mp4" type="video/mp4"></video>
      <img src="image.jpg" alt="說明">
    </td>
  </tr>
</table>

補充：水平對齊同理

避坑提醒

• vertical-align 僅對 行內/行內區塊/表格單元格 生效，對區塊元素無效。
• 父容器需有高度或由內容撐開，否則「靠上」無視覺差異。
• Dreamweaver 設計視圖渲染可能與瀏覽器不同，以瀏覽器實測為準。

掌握 vertical-align: top，告別表格內容莫名置中的困擾，邁向語意化、樣式分離的現代網頁開發。