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:
The HTML editor tag navigator, which displays the currently selected element and its location within the tag hierarchy of the page. For details, see HTML Editor Tag Navigation in Visual Web Developer.
Tag outlining, which allows you to collapse blocks of markup, such as an entire table. For details, see How to: Collapse and Expand HTML Elements in Visual Web Developer.
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