Microsoft Expression Web - 数据表

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

步骤1 : 让我们转到文件菜单,然后选择 New → 从动态网页模板创建...

动态网页模板

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

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

Master. dwt

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

Datatable.html

第4步 : 在设计视图中,转到主要内容部分并删除文本.

main-content

第5步 : 接下来,转到 Table →  Insert Table ... 菜单选项将打开Insert Table对话框.

选择行数和列数.您还可以设置不同的布局选项,如对齐,填充,边框的大小和颜色以及背景颜色等.完成后,单击"确定".

插入表格

步骤6 :  datatable.html的设计视图现在显示如下 :

Design View Datatable

现在,如果您查看页面的代码视图,您将看到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".

auto-style2

第8步 : 在"重命名类"对话框中,在新名称字段中输入 mytable .确保勾选此页面中的重命名类引用,然后单击确定.

mytable

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

您的网页

第9步 : 要格式化此表并对其应用某种样式,请转到"管理样式"任务面板,然后单击新样式...

管理风格

步骤10 : 在"新建样式"对话框中,设置边框设置,然后单击"确定".还有另一种格式化数据表的选项.在设计视图中,右键单击表格并选择修改 → 表格自动套用格式...

表格自动套用格式

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

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

设计视图网页

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

添加一些数据

第12步 : 保存您的网页并在浏览器中预览.它看起来像下面的截图.

网页截图