Share via


Introduction to Editing HTML Tables in Visual Web Developer

You can use HTML tables in your Web pages to define page layout and to display content in column format. Visual Studio allows you to edit HTML tables visually in Design view, or as markup in Source view.

Table Editing in Design View

In Design view, the Web page designer provides a table editor that allows you to edit HTML tables visually. You can add a table to a page either from the Toolbox or using a dialog box that offers options for setting table and cell properties. The table is displayed in the designer as it will appear in the browser. (By default, the designer adds visible borders around the table to make it easier to edit, even if your table is not set to display borders.)

Note

As with all elements in the Web page designer, the table editor creates XHTML-compatible markup. For more information, see XHTML in Visual Web Developer.

The table editor allows you to select rows, columns, or individual cells and set their properties. You can also use the editor to resize columns, rows, or cells.

Note

The table editor allows you to edit HTML tables (table elements and their child elements), but not the ASP.NET Table control (asp:table elements). ASP.NET Table controls are most often used programmatically to create tabular display and are therefore not typically used for layout in the page.

Table Layout Templates

Because HTML tables are often used to define the layout of elements in the page, the table editor provides a set of predefined layout templates. When you create a table, you have the option of selecting common layouts, including tables that define the following:

  • A cell for a header and another cell for the main content.

  • A cell for the main content and another cell for side content.

  • A cell for the header, a cell for side content, a cell for the footer, and one cell for the main content.

Note

When you first create a table that is based on a predefined template, the table does not contain content, so it might render differently than you expect. Test your table layout by adding content.

After creating a table using a layout template, you can customize the template to suit your particular layout needs.

Table Editing in Source View

You can edit HTML tables in Source view as you would edit any HTML elements. For example, the editor provides IntelliSense and validation for table elements just as it does for other elements. The following editor features are particularly useful when working with tables in Source view:

See Also

Tasks

How to: Add and Remove HTML Table Elements in Visual Web Developer

How to: Select HTML Table Elements and Contents in Visual Web Developer

How to: Resize HTML Table Elements in Visual Web Developer