Microsoft Expression Web - 資料表

---

---

在本節中，我們將學習如何在網頁中新增資料表。讓我們建立一個新的 HTML 頁面，但在這裡我們也希望將動態網頁模板應用到我們的 HTML 頁面。

步驟 1 − 讓我們轉到“檔案”選單，然後選擇新建→從動態網頁模板建立…

它將開啟如下所示的對話方塊。

步驟 2 − 選擇master.dwt檔案，然後單擊“開啟”按鈕。

步驟 3 − 儲存網頁，並將其命名為datatable.html。

步驟 4 − 在設計檢視中，轉到 main-content 部分並刪除文字。

步驟 5 − 接下來，轉到表格→插入表格…選單選項，這將開啟“插入表格”對話方塊。

選擇行數和列數。您還可以設定不同的佈局選項，例如對齊方式、填充、邊框大小和顏色以及背景顏色等。完成後，單擊“確定”。

步驟 6 − datatable.html 的設計檢視將顯示如下：

現在，如果您檢視頁面的程式碼檢視，您將看到 Expression Web 添加了以下程式碼。

<table class = "auto-style2" style = "width: 100%"> 
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>    
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
  
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
</table> 

步驟 7 − 在“管理樣式”任務面板中，右鍵單擊“.auto-style2”。單擊“選擇重新命名類“auto-style2””。

步驟 8 − 在“重新命名類”對話方塊中，在新名稱欄位中輸入mytable。確保選中“重新命名此頁面中的類引用”，然後單擊“確定”。

現在，在設計檢視中檢視您的網頁。它將顯示如下：

步驟 9 − 要格式化此表格並應用一些樣式，請轉到“管理樣式”任務面板並單擊新建樣式…

步驟 10 − 在“新建樣式”對話方塊中，設定邊框設定，然後單擊“確定”。還有另一種格式化資料表的方法。在設計檢視中，右鍵單擊表格，然後選擇修改→表格自動套用格式…

在此對話方塊中，您將看到不同的格式和其他設定。讓我們選擇“專業”格式，然後單擊“確定”。

步驟 11 − 現在，您的網頁的設計檢視如下所示：

讓我們在設計檢視中新增一些資料。

步驟 12 − 儲存您的網頁並在瀏覽器中預覽。它將如下面的螢幕截圖所示。