Microsoft Expression Web – 数据表

Microsoft Expression Web – 数据表


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

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

动态网页模板

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

步骤 2 – 选择master.dwt文件,然后单击打开按钮。

主载重吨

第 3 步– 保存网页并将其命名为datatable.html

数据表.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”。

自动风格2

步骤 8 – 在重命名类对话框中,新名称字段中输入mytable确保在此页面中重命名类引用被勾选,然后单击确定。

我的表

现在,在设计视图中查看您的网页。它将显示如下 –

你的网页

第 9 步– 要设置此表格的格式并对其应用一些样式,请转到“管理样式”任务面板并单击“新建样式”…

管理风格

步骤 10 – 在“新建样式”对话框中,设置边框设置,然后单击“确定”。还有另一个选项可以格式化您的数据表。在设计视图中,右键单击表格并选择修改 → 表格自动套用格式…

表格自动套用格式

在此对话框中,您将看到不同的格式和其他设置。让我们选择专业格式,然后单击确定。

步骤 11 – 现在,您网页的设计视图如下所示 –

设计视图网页

让我们在设计视图中添加一些数据。

添加一些数据

第 12 步– 保存您的网页并在浏览器中预览。它将类似于以下屏幕截图。

网页截图

觉得文章有用?

点个广告表达一下你的爱意吧 !😁