Export (0) Print
Expand All

Walkthrough: Editing HTML Tables in Visual Web Developer 

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.

NoteNote

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.

In order to complete this walkthrough, you will need:

  • Visual Web Developer and the .NET Framework.

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

  1. Open Visual Web Developer.

  2. On the File menu, click New Web Site.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. 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.

  5. In the Language list, click the programming language you prefer to work in.

  6. Click OK.

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

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

To add a table for the page layout

  1. If you do not already have a page open in the designer, add a page to the Web site.

  2. Switch to Design view.

  3. In the Layout menu, click Insert Table.

    The Insert Table dialog box appears.

  4. Select Template.

    Table templates are predefined table layouts.

  5. In the Template list, select Header and side.

  6. Click OK.

    A two-column table is added to the page that takes up the entire height and width of the page. A single cell on top spans the columns, providing a place to put a header. The left-hand cell below the header is for navigation or side information. The right-hand cell below the header is the main display area for the page.

    NoteNote

    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.

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

  1. 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.

    NoteNote

    You can create tables either by using the Insert Table command, as you did earlier, or by dragging a Table element from the Toolbox.

  2. Move the mouse pointer over the table until the pointer changes to a move cursor (four-headed arrow), and then click to select the table.

  3. Drag the right-hand edge of the table to widen the table until it is most of the width of the page.

    As you drag, the table displays its current dimensions.

  4. 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.

    NoteNote

    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.

  5. 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.

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

  1. 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.

  2. In the Properties window, click the button in the Style box.

    The Style Builder dialog box appears.

  3. On the Text tab, in the Horizontal list, click Centered.

  4. On the Background tab, in the Color list, select a color you like. You can also click the button next to the Color box to display the Color Picker dialog box and select from additional colors.

    The settings you have made set the style for the cell at the top of the layout table.

  5. Type Contoso Web Site as a heading.

  6. Select the text and, in the Block Format list in the Formatting toolbar, click Heading 1 <H1>.

  7. 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.

    • Do not format the text as a Heading 1.

    • In the Text tab of the Style Builder dialog box, in the Vertical 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.

You can now build the form.

To add text and controls to the form layout table

  1. In the form layout table (the table inside the page layout table), click in the top left cell and type Name:.

  2. Click in the left cell of the second row and type Birth year:.

  3. From the Standard group of the Toolbox, drag a TextBox control into the top right cell.

  4. Set the TextBox control's ID property to textName.

  5. Drag another TextBox into the second row's right cell and set its ID property to textBirthYear.

  6. Drag a Button control into the third cell on the right and set its Text property to Submit.

  7. Drag a Label control into the bottom right cell, set its ID property to labelDisplay, and clear its Text property.

  8. Place the mouse cursor over the left-hand column until you see a selection symbol (a small square) at the top of the column, and then click the symbol.

    The left column is selected.

  9. In the Properties window, click the button in the Style box to display the Style Builder dialog box.

  10. In the Text tab, in the Horizontal list, click Right.

    The text captions in the form are right-aligned.

  11. Click OK to close the style builder.

  12. 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.

  13. Right-click in the layout table cell outside the form layout table, and then click Style.

    The shortcut menu provides an alternate way to display the Style Builder dialog box.

  14. In the Text tab, in the Vertical list, click top.

    The form layout table is aligned at the top of the cell.

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

To program the form controls

  1. Double-click the Button control in the form.

    The editor creates a Click event handler.

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

You can now test the page.

To test the page

  1. 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.

  2. In the Name box, type your name.

  3. 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.

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:

Community Additions

ADD
Show:
© 2014 Microsoft