在本章中,我们将学习如何在网页中添加数据表.让我们创建一个新的HTML页面,但是在这里我们要将动态Web模板应用到我们的HTML页面.
步骤1 : 让我们转到文件菜单,然后选择 New → 从动态网页模板创建...
它将打开以下对话框,如以下屏幕截图所示.
步骤2 : 选择 master.dwt 文件,然后单击打开按钮.
第3步 : 保存网页并将其命名为 datatable.html .
第4步 : 在设计视图中,转到主要内容部分并删除文本.
第5步 : 接下来,转到 Table → Insert Table ... 菜单选项将打开Insert Table对话框.
选择行数和列数.您还可以设置不同的布局选项,如对齐,填充,边框的大小和颜色以及背景颜色等.完成后,单击"确定".
步骤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步 : 保存您的网页并在浏览器中预览.它看起来像下面的截图.