Walkthrough: Editing HTML Tables in Visual Web Developer

Article
10/22/2014

Table editing is an important part of many Web pages because tables are used to create the page layout. This walkthrough illustrates the table-editing features of the HTML editor in Microsoft Visual Studio. You will use tables to create the layout for a simple entry form on the page.

Note

The table-editing features described in this walkthrough pertain to HTML tables, not to the Table Web server control (the <asp:Table> control and its child controls).

Tasks illustrated in this walkthrough include:

Adding a table.
Selecting the table, rows, and columns.
Resizing elements.
Adding and removing table elements.
Setting cell characteristics such as background color and alignment.

Prerequisites

In order to complete this walkthrough, you will need:

Microsoft Visual Studio 2008 or Visual Web Developer 2008 Express Edition.

Creating the Web Site

If you have already created a Web site in Visual Studio (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to the next section, "Creating the Page Layout with a Table." Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

Open Visual Web Developer.
On the File menu, click New Web Site.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\WebSites.
In the Language list, click the programming language you prefer to work in.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Creating the Page Layout with a Table

You will begin by adding a table that defines the overall layout of the page.

To add a table for the page layout

If you do not already have a page open in the designer, add a page to the Web site.
Switch to Design view.
In the Table menu, click Insert Table.

The Insert Table dialog box appears.

Note

You can create tables either by using the Insert Table command, or by dragging a Table element from the Toolbox.
Click OK.

A two-column table is added to the page that takes up the entire width of the page.

Note

The borders around the cells in the table are displayed by default at design time to help you edit. Unless you explicitly set the table or cells to have a border, no border will appear when the table is rendered in the browser.

Creating a Form Layout with a Table

You can also use HTML tables to lay out the controls in a form. You will now create a second table inside the first one. You will later use the second table to create the layout for some controls in a form.

To add a table for the form layout

From the HTML group of the Toolbox,drag a Table element into the right-hand (main) cell.

When you drag a table from the Toolbox, Visual Web Developer creates an empty table of three columns and three rows. You need only two columns; in a moment, you will delete one of the columns.
Right-click in one of the cells in the left-most column. From the Delete sub-menu, click Columns to remove the column of the selected cell.

The column is deleted from the table.

Note

If you see a Delete option that does not have a submenu, it indicates that the focus is not in a cell. Right-click inside a cell in the left-hand column.
Click in the bottom right-hand cell and then press the TAB key to add a fourth row to the table.

You now have a table of two columns and four rows, which can be the container for your form controls.

Setting Characteristics of the Page Layout Table

Now that you have a form layout table inside the page table, you can finish laying out the page by editing the page layout table.

To set characteristics of the page layout table

In the page layout table, click in the top cell.

The thicker border around the cell indicates that it is selected and in content-edit mode.
In the Properties window, select the Style box and then click the ellipsis (…) button.

The Style Builder dialog box appears.
In the Category box, click Block, then select Centered in the text-align drop down.
On the Category box, click Font, in the Color drop down, select a color you like.

The settings you have made set the style for the cell at the top of the layout table.
Type Contoso Web Site as a heading.
Repeat steps 1 through 6 for the leftmost cell in the table, with these changes:
- Change the text to This site is maintained by Contoso, Incorporated.
- In the Category boxof the Modify Style dialog box, in the vertical-align drop-down list, click bottom.
In a production Web page, the side cell would probably be occupied by a menu of links or other content. However, for this walkthrough it does not matter what content the cell contains.

Building the Form

You can now build the form.

To add text and controls to the form layout table

In the form layout table (the table inside the page layout table), click in the top left cell and type Name:.
Click in the left cell of the second row and type Birth year:.
From the Standard group of the Toolbox, drag a TextBox control into the top right cell.
Set the TextBox control's ID property to textName.
Drag another TextBox into the second row's right cell and set its ID property to textBirthYear.
Drag a Button control into the third cell on the right and set its Text property to Submit.
Drag a Label control into the bottom right cell, set its ID property to labelDisplay, and clear its Text property.
Place the mouse cursor over the left-hand column until you see a selection symbol at the top of the column, and then click the symbol.

The left column is selected.
In the Properties window, click the Style cell, then click the ellipsis (…) in the cell to the right.

The Style Builder dialog box appears.
On the Category box, click Block, then select right in the text-align drop down.

The text captions in the form are right-aligned.
Click OK to close the style builder.
Select the left column again, and then drag its right edge to shrink the column until it is just wide enough to fit the caption text.

Programming the Form Controls

You can now program the form controls. The form displays the age that the user will be this year.

To program the form controls

Double-click the Button control in the form.

The editor creates a Click event handler.

Add the following highlighted code.

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 Sub

protected 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());
}

Testing the Page

You can now test the page.

To test the page

Press CTRL+F5 to run the page.

When the page is displayed in the browser, note the layout that you have created. Because you did not explicitly specify table borders, there are no lines on the form.
In the Name box, type your name.
In the Birth year box, type the year you were born, and then click the Submit button.

The age calculation is displayed in the form in the location you created with the form table.

Next Steps

In this walkthrough, you have exercised some of the capabilities of the visual table editor in Design view. You added tables in two ways, resized a table, added a row, deleted a column, set cell styles, and added text and controls as cell contents. Suggestions for more exploration include:

Learn more ways to work with tables. For details, see:
Learn some tips for editing tables in both Design view and Source view. For details, see HTML Table Editing Tips in Visual Web Developer.
Add validation to the Birth year text box so that users can enter only valid years. For more information, see Validating User Input in ASP.NET Web Pages.