逐步解說：在 Visual Web Developer 中編輯 HTML 表格

更新：2007 年 11 月

表格編輯是許多 Web 網頁中的重要部分，因為表格會用來建立頁面配置。本逐步解說會說明 Microsoft Visual Studio 中之 HTML 編輯器的表格編輯功能。您將在網頁上使用表格來建立簡單資料輸入表單的配置。

注意事項：
本逐步解說中所述的表格編輯功能是與 HTML 表格相關，與 Table Web 伺服器控制項 (<asp:Table> 控制項及其子控制項) 沒有關係。

逐步解說將說明的工作包括：

• 加入表格。

• 選取表格、列和欄。

• 調整項目大小。

• 加入和移除表格項目。

• 設定儲存格特性，例如，背景色彩和對齊。

必要條件

若要完成這個逐步解說，您必須要有：

• Visual Web Developer 和 .NET Framework。

建立網站

如果您已經在 Visual Studio 中建立網站 (例如，藉由依照逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，那麼您可以使用該網站，並跳到下一章節的＜使用表格建立頁面配置＞。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

1. 開啟 Visual Web Developer。

2. 在 [檔案] 功能表上，按一下 [新網站]。

3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

4. 在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

   例如，輸入資料夾名稱 C:\WebSites。

5. 在 [語言] 清單中，請按一下您想要操作的程式語言。

6. 按一下 [確定]。

   Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

使用表格建立頁面配置

您會從加入定義頁面之整體配置的表格開始。

若要加入用於頁面配置的表格

1. 如果您還沒有在設計工具中開啟網頁，請將網頁加入至網站。

2. 切換至 [設計] 檢視。

3. 在 [配置] 功能表中，按一下 [插入表格]。

   [插入表格] 對話方塊隨即出現。

4. 選取 [範本]。

   表格範本是在表格配置中預先定義。

5. 在 [範本] 清單中，選取 [頁首和側邊]。

6. 按一下 [確定]。

   雙欄式表格會加入至頁面，並佔據頁面的整個高度和寬度。最上方的單一儲存格會展開跨越多欄，提供放置標題的位置。標題左下方的儲存格是用於巡覽或提要資訊，標題右下方的儲存格則是頁面的主要顯示區域。

   注意事項：
   表格中儲存格周圍的框線依預設會在設計階段顯示，以協助您編輯。除非您明確設定要顯示表格或儲存格的框線，否則當表格呈現在瀏覽器中時不會顯示框線。

使用表格建立表單配置

您也可以使用 HTML 表格在表單中配置控制項。您現在會在第一個表格中建立第二個表格，然後使用第二個表格來建立表單中某些控制項的配置。

若要加入用於表單配置的表格

1. 從 [工具箱] 的 [HTML] 群組中，將 [表格] 項目拖曳至右方 (主要) 儲存格。

   當您從 [工具箱] 拖曳表格時，Visual Web Developer 會建立包含三欄和三列的空表格。您只需要兩欄，因此等一下會將其中一欄刪除。

   注意事項：
   您可以依照先前步驟使用 [插入表格] 命令來建立表格，或是從 [工具箱] 拖曳 [表格] 項目。

2. 將滑鼠指標移至表格上方，直到指標變更為移動游標 (四個方向的箭號)，然後按一下以選取表格。

3. 拖曳表格的右邊緣以擴展表格，直到接近頁面寬度為止。

   在拖曳時，表格會顯示其目前的大小。

4. 在最左欄中的一個儲存格內按一下滑鼠右鍵。從 [刪除] 子功能表中，按一下 [欄] 以移除所選儲存格的欄。

   如此便會從表格中刪除欄。

   注意事項：
   如果您看到沒有子功能表的 [刪除] 選項，表示焦點 (Focus) 不在儲存格中。在左欄中的儲存格內按一下滑鼠右鍵。

5. 按一下底部右方的儲存格，然後按 TAB 鍵以加入表格的第四列。

   您現在便有包含兩欄和四列的表格，可用來做為表單控制項的容器 (Container)。

設定頁面配置表格的特性

現在您的頁面表格中已經有表單配置表格，您可以編輯頁面配置表格以完成配置頁面。

若要設定頁面配置表格的特定

1. 在頁面配置表格中，按一下最上方的儲存格。

   儲存格周圍的框線變粗表示該儲存格已被選取且位於內容編輯模式。

2. 在 [屬性] 視窗中，按一下 [樣式] 方塊中的按鈕。

   [樣式產生器] (Style Builder) 對話方塊隨即出現。

3. 在 [文字] 索引標籤中的 [水平] 清單內，按一下 [置中]。

4. 在 [背景] 索引標籤中的 [色彩] 清單內，選取您所要的色彩。您也可以按一下 [色彩] 方塊旁的按鈕，以顯示 [色彩選擇器] 對話方塊，並從額外的色彩中選取。

   您所做的設定會設定配置表格最上方之儲存格的樣式。

5. 輸入 Contoso 網站做為標題。

6. 選取文字，然後在 [格式化] 工具列的 [區塊格式] 清單中，按一下 [標題 1 <H1>]。

7. 針對表格中最左邊的儲存格重複步驟 1 到 6，但是採用下列變更：

   • 將文字變更為這個網站由 Contoso, Incorporated 維護。

   • 請不要將文字格式化為 [標題 1]。

   • 在 [樣式產生器] 對話方塊的 [文字] 索引標籤中，按一下 [垂直] 清單中的 [靠下]。

   在實際執行的 Web 網頁中，側邊儲存格可能會由連結功能表或其他內容所佔據。不過，在這個逐步解說中並未考量儲存格所包含的內容。

建置表單

您現在可以建置表單。

若要將文字或控制項加入至表單配置表格

1. 在表單配置表格中 (頁面配置表格中的表格)，按一下左上方的儲存格，並輸入姓名：。

2. 按一下第二列的左方儲存格，並輸入出生年份：。

3. 從 [工具箱] 的 [標準] 群組中，將 TextBox 控制項拖曳到右上方儲存格中。

4. 將 TextBox 控制項的 ID 屬性設定為 textName。

5. 將另一個 TextBox 拖曳到第二列的右方儲存格中，並將其 ID 屬性設定為 textBirthYear。

6. 將 Button 控制項拖曳到右方的第三個儲存格中，並將其 Text 屬性設定為 [送出]。

7. 將 Label 控制項拖曳到右下方的儲存格中，並將其 ID 屬性設定為 labelDisplay，然後清除其 Text 屬性。

8. 將滑鼠游標放在左欄上，直到您在欄的最上方看見選取符號 (小方形)，然後按一下該符號。

   如此便會選取左欄。

9. 在 [屬性] 視窗中，按一下 [樣式] 方塊中的按鈕，以顯示 [樣式產生器] 對話方塊。

10. 在 [文字] 索引標籤中的 [水平] 清單內，按一下 [靠右]。

    表單中的文字標題便會靠右對齊。

11. 按一下 [確定] 關閉樣式產生器。

12. 再次選取左欄，然後拖曳其右邊緣以縮小該欄，直到其寬度正好足夠容納標題文字為止。

13. 在表單配置表格以外的配置表格儲存格中按一下滑鼠右鍵，然後按一下 [樣式]。

    快速鍵功能表可提供顯示 [樣式產生器] 對話方塊的替代方法。

14. 在 [文字] 索引標籤中的 [垂直] 清單內，按一下 [靠上]。

    表單配置表格便會靠儲存格的最上方對齊。

以程式設計表單控制項

您現在可以進行表單控制項的程式設計。表單會顯示使用者今年的年齡。

若要以程式設計表單控制項

1. 在表單中按兩下 [按鈕] 控制項。

   編輯器會建立 Click 事件處理常式。

2. 加入下列反白顯示的程式碼。

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

測試網頁

您現在可以測試網頁。

若要測試網頁

1. 按 CTRL+F5 執行頁面。

   當頁面顯示在瀏覽器中時，請注意您所建立的配置。由於您並未明確指定表格框線，因此表單上不會顯示線條。

2. 在 [姓名] 方塊中，輸入您的姓名。

3. 在 [出生年份] 方塊中，輸入您的出生年份，然後按一下 [送出] 按鈕。

   年齡計算會顯示在表單中您使用表單表格所建立的位置內。

後續步驟

在本逐步解說中，您已練習在 [設計] 檢視中使用視覺化表格編輯器的一些功能。您使用了兩種方法來加入表格，並調整表格大小、加入列、刪除欄、設定儲存格樣式，以及加入文字和控制項做為儲存格內容。建議另外再研究以下各項：

• 瞭解更多使用表格的方法。如需詳細資訊，請參閱：

  • HOW TO：在 Visual Web Developer 中加入或移除 HTML 表格項目

  • HOW TO：在 Visual Web Developer 中選取 HTML 表格項目和內容

  • HOW TO：在 Visual Web Developer 中調整 HTML 表格項目的大小

• 瞭解在 [設計] 檢視和 [原始碼] 檢視中編輯表格的一些秘訣。如需詳細資訊，請參閱 Visual Web Developer 中的 HTML 表格編輯秘訣。

• 在 [出生年份] 文字方塊中加入驗證，以便使用者只能輸入有效年份。如需詳細資訊，請參閱驗證 ASP.NET Web 網頁中的使用者輸入。

請參閱

工作

逐步解說：在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面

概念

Visual Web Developer 中的 HTML 編輯器標記巡覽

在 Visual Web Developer 的 HTML 編輯器中格式化項目