演练：在 Visual Web Developer 中编辑 HTML 表格
更新：2007 年 11 月
表格编辑是许多网页的重要组成部分，因为表格可用于创建页布局。本演练演示了 Microsoft Visual Studio 中 HTML 编辑器的表格编辑功能。您将使用表格在页上为简单的输入窗体创建布局。
.gif "说明") 说明： |
|---|
在此演练中描述的表格编辑功能属于 HTML 表格，而不属于 Table Web 服务器控件（<asp:Table> 控件及其子控件）。 |
本演练中阐释的任务包括：
添加表。
选择表、行和列。
调整元素的大小。
添加和移除表格元素。
设置单元格的特性（如背景色和对齐方式）。
先决条件
若要完成本演练，您需要：
- Visual Web Developer 与 .NET Framework。
创建网站
如果已在 Visual Studio 中创建了网站（如通过执行 演练：在 Visual Web Developer 中创建基本网页 中的步骤），则可以使用该网站并跳至下一节“使用表格创建页布局”。否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在**“文件”菜单上单击“新建网站”**。
在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。
在**“位置”**框中输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在**“语言”**列表中，单击您想使用的编程语言。
单击**“确定”**。
Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。
使用表格创建页布局
首先添加一个定义该页整体布局的表格。
为页布局添加一个表格
如果尚未在设计器中打开页面，请向网站添加页面。
切换到“设计”视图。
在**“布局”菜单中单击“插入表”**。
出现**“插入表”**对话框。
选择**“模板”**。
表格模板是预定义的表格布局。
在**“模板”列表中选择“页眉和边”**。
单击**“确定”**。
将包含两列的表格添加到页面中，占据页面的整个高度和宽度。顶部的单个单元格跨越所有列，提供了放置页眉的位置。页眉下面左边的单元格用于导航或放置附加信息。页眉下面右边的单元格是页面的主要显示区域。
说明：默认情况下，在设计时将在表格中单元格的周围显示边框以便于编辑。除非将表格或单元格显式设置为具有边框，否则在浏览器中呈现表时不显示边框。
使用表格创建窗体布局
还可以使用 HTML 表在窗体中对控件进行布局。现在将在第一个表中创建第二个表。稍后将在窗体中使用第二个表为某些控件创建布局。
为窗体布局添加表
从**“工具箱”的“HTML”组中，将“表”**元素拖到右边的（主）单元格中。
从**“工具箱”**中拖动表时，Visual Web Developer 创建一个具有三列三行的空表。因为只需要两列，所以稍后您将删除其中一列。
说明：可以通过使用“插入表”命令（如前面执行的操作）或通过从“工具箱”中拖动“表”元素来创建表。
在表格上方移动鼠标指针，直到指针变成移动光标（四向箭头），然后单击以选择该表。
拖动表的右边缘以增加表格的宽度，直到该表达到页面的最大宽度。
拖动该表时，表格会显示其当前尺寸。
在最左边一列的一个单元格中右击。在**“删除”子菜单上，单击“列”**以移除选定单元格所在的列。
该列将从表格中删除。
说明：如果看到的“删除”选项没有子菜单，则表示焦点不在单元格中。请在左边列中的一个单元格中右击。
在底部右边的单元格中单击，然后按下 Tab 键向该表添加第四行。
现在该表为两列四行，它将用作窗体控件的容器。
设置页布局表格的特性
现在，页面表格内有一个窗体布局表格，可以通过编辑该页布局表格来完成对该页的布局。
设置页布局表格的特性
在页布局表格上，单击顶部单元格。
单元格边框变粗指示该单元格已选中且处于内容编辑模式。
在“属性”窗口中，单击**“样式”**框中的按钮。
出现**“样式生成器”**对话框。
在**“文本”选项卡上的“水平”列表中单击“居中”**。
在**“背景”选项卡上的“颜色”列表中，选择想要的颜色。还可以单击“颜色”框旁边的按钮，以显示“颜色选取器”**对话框并选择其他颜色。
所做的设置为布局表格顶部的单元格设置样式。
键入“Contoso 网站”作为标题。
选择文本，并在**“格式”工具栏的“块格式”列表中单击“标题 1 <H1>”**。
对表中最左边的单元格重复步骤 1 到 6，不同之处在于：
将文本更改为“本网站由 Contoso,Incorporated 维护”。
不要将该文本的格式设置为标题 1。
在**“样式生成器”对话框的“文本”选项卡上的“垂直”列表中，单击“底部”**。
在成品网页上，侧面的单元格可能被一个链接菜单或其他内容占据。但是在此演练中，单元格包含的内容无关紧要。
构建窗体
现在可以构建窗体了。
将文本和控件添加到窗体布局表格
在窗体布局表格（页布局表格中的表格）中，在左上角的单元格中单击并键入“姓名：”。
在第二行左边的单元格中单击并键入“出生年份：”。
从**“工具箱”的“标准”**组中，将 TextBox 控件拖到右上角的单元格中。
将**“文本框”控件的“ID”**属性设置为 textName。
将另一个**“文本框”拖到第二行右边的单元格，并将其“ID”**属性设置为 textBirthYear。
将 Button 控件拖到右边第三个单元格，并将其**“Text”属性设置为“提交”**。
将 Label 控件拖到右下角的单元格，将其**“ID”属性设置为 labelDisplay，并清空其“Text”**属性。
将鼠标光标放置在左边的列上，直到该列的顶部显示选择符号（小正方形），然后单击该符号。
选中左边的列。
在“属性”窗口中，单击**“样式”框中的按钮以显示“样式生成器”**对话框。
在**“文本”选项卡的“水平”列表中，单击“右”**。
窗体中的文本标题将向右对齐。
单击**“确定”**关闭样式生成器。
再次选择左边的列，然后拖动其右边缘以减小该列的宽度，直到其宽度正好适合该标题文本。
在窗体布局表格外的布局表格单元格中右击，然后单击**“样式”**。
还可以通过快捷菜单显示**“样式生成器”**对话框。
在**“文本”选项卡的“垂直”列表中，单击“顶部”**。
窗体布局表格在单元格的顶部对齐。
对窗体控件进行编程
现在可以对窗体控件进行编程。该窗体显示用户今年的年龄。
对窗体控件进行编程
双击窗体上的**“Button”**控件。
编辑器创建一个 Click 事件处理程序。
添加下面突出显示的代码。
Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Button1.Click Dim age As Integer age = DateTime.Now.Year - CInt(textBirthYear.Text) labelDisplay.Text = Server.HtmlEncode(textName.Text) & _ ", this year you are " & Server.HtmlEncode(age.ToString()) End Subprotected void Button1_Click(Object sender, EventArgs e) { int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text); labelDisplay.Text = Server.HtmlEncode(textName.Text) + ", this year you are " + Server.HtmlEncode(age.ToString()); }
测试该页
现在可以测试页面。
对页进行测试
按 Ctrl+F5 运行该页。
该页在浏览器中显示时，请注意所创建的布局。因为没有显式指定表的边框，所以窗体上没有框线。
在**“名称”**框中键入您的姓名。
在**“出生年份”框中，键入您出生的年份，然后单击“提交”**按钮。
年龄的计算结果显示在窗体中使用窗体表格创建的位置处。
后续步骤
通过此演练，您感受“设计”视图中的可视化表格编辑器的某些功能。并以两种方式添加表，调整表的大小，添加行，删除列，设置单元格样式和将文本和控件作为单元格内容添加。建议研究的其他方面包括：
了解使用表格的更多方式。有关详细信息，请参见：
了解有关在“设计”视图和“源”视图中编辑表格的一些技巧。有关详细信息，请参见 Visual Web Developer 中的 HTML 表编辑提示。
将验证添加到**“出生年份”**文本框中，以便用户只能输入有效的年份。有关更多信息，请参见 在 ASP.NET 网页中验证用户输入。
请参见
任务
演练：在 Visual Web Developer 中创建和使用 ASP.NET 母版页