Microsoft Expression Web - 数据表

---

在本章中，我们将学习如何在网页中添加数据表。让我们创建一个新的 HTML 页面，但这里我们希望将动态 Web 模板也应用到我们的 HTML 页面。

步骤 1 - 让我们转到“文件”菜单并选择“新建”→“从动态 Web 模板创建...”

它将打开以下对话框，如下面的屏幕截图所示。

步骤 2 - 选择master.dwt文件，然后单击“打开”按钮。

步骤 3 - 保存网页并将其命名为datatable.html。

步骤 4 - 在设计视图中，转到主要内容部分并删除文本。

步骤 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 - 保存网页并在浏览器中预览。它看起来像下面的屏幕截图。