Visual Web Developer 中的 HTML 表格編輯秘訣

更新:2007 年 11 月

Visual Studio HTML 表格編輯器是管理 HTML 表格的一種功能強大的工具,可定義網頁的配置並以表格欄格式顯示內容。下列祕訣將幫助您充分運用 HTML 表格編輯器的功能。

編輯 HTML 表格

下列幾點描述了一般表格編輯的行為:

  • HTML 表格編輯器是編輯 HTML 表格項目的視覺化方法,例如 table、tr 和 td 項目。雖然 HTML 表格編輯器提供了方便的方法可編輯這些項目,但對於 HTML 表格不支援的功能,它無法提供這些編輯能力。

  • 表格編輯器可處理 HTML 表格 (table 項目和子項目),但無法處理 ASP.NET Table 控制項 (asp:table 項目)。ASP.NET Table 控制項的設計目地在於以程式設計方式使用,而不是用於 HTML 表格所經常使用的靜態配置。

  • 設計檢視呈現表格的方式類似於在瀏覽器中顯示。使用的方法和瀏覽器一樣,都是解譯表格的 HTML 項目。如需詳細資訊,請參閱本主題稍後的「縮放和調整大小行為」章節。

編輯結果範圍

瞭解如何將設計檢視中的編輯結果套用至表格項目將很有幫助。請注意以下各點:

  • 表格中的每個儲存格會視為在其中起始的表格列或表格欄成員,如設計檢視所示。表格列或表格欄的作業會影響該表格列或表格欄的所有成員。如果儲存格中包含 colspan 或 rowspan 屬性,將設計檢視中的儲存格對應至原始碼檢視中相對應的 td 項目,結果不一定會如預期。

  • 表格列作業會影響該表格列中的每個 td 項目。但不會影響 tr 項目。

  • 選取及修改一個表格欄會影響該表格欄中的任何 th 項目。

縮放和調整大小行為

當您一開始指定表格、表格列或表格欄維度 (Dimension) 或調整這些項目的大小時,表格編輯器有時可能會使用非預期的方式工作。表格項目維度的行為會反映出表格在瀏覽器中的行為。例如,沒有特定寬度設定的表格欄會根據表格的整體寬度、表格中其他表格欄的寬度和所有表格欄包含的內容而擴充或縮小。

優先考慮內容

一般來說,儲存格中的內容大小會比儲存格或表格列中的寬度或高度設定優先考慮。例如,如果表格儲存格包含圖形或 img 項目,則圖形大小會比儲存格甚至表格的寬度優先考慮。表格儲存格中的控制項也是如此。

如果儲存格包含文字而且未設定儲存格的 nowrap 屬性,則會在儲存格寬度內將文字換行。但是,如果文字中不含空白字元 (例如空格或標點),則文字無法換行並且會重新調整儲存格寬度以符合文字。

內容也會比表格列高度優先考慮。如果文字在儲存格中換行,會造成表格列高於 height 設定 (由表示表格列的 tr 項目所指定)。

表格縮放和調整大小的方針

由於設計 HTML 的方法,可能將衝突的維度設定指定給表格和包含的項目。例如,具有兩個表格欄的表格可能指定了 100% 的寬度,但這兩個表格欄可能指定了 100 像素的寬度。

下表摘要出表格編輯器處理縮放的方式。在所有情況中,都會優先考慮內容的寬度。

指定的維度

行為

指定了表格和所有表格之表格欄的寬度,或者指定了表格和所有表格之表格列的高度。

表格維度將優先考慮;表格會成比例計算表格欄或表格列大小。

指定了表格和部分表格之表格欄的寬度,或者指定了表格和部分表格之表格列的高度。

將使用精確的維度呈現指定了大小的項目,而其餘項目則會調整大小以填滿表格的整個維度。

注意事項:
表格編輯器會將可變大小表格項目的寬度顯示為 "auto"。

對每個表格的表格欄指定寬度,但不對表格本身指定寬度,或者對每個表格的表格列指定高度,但不對表格本身指定高度。

加入所有表格之表格欄的寬度或加入所有表格之表格列的高度,即可計算表格寬度或高度。

沒有對表格或任何表格項目指定寬度或高度。

會單獨根據儲存格內容,以及框線需要的空間,計算寬度或高度。

注意事項:

如果您正在調整表格列或表格欄的大小,而且 td 項目在高度和寬度上使用了不同的單位,則表格編輯器會將單位標準化為像素。

請參閱

概念

在 Visual Web Developer 中編輯 HTML 表格簡介

HOW TO:在設計檢視中建立和編輯 HTML 表格