HTML Table Editing Tips in Visual Web Developer
The Visual Studio HTML table editor is a powerful tool for manipulating HTML tables to define the layout of your Web pages and to display content in column format. The following tips will help you make the best use of the HTML table editor.
Editing HTML Tables
The following points describe general table-editing behavior:
The HTML table editor is a visual way to edit HTML table elements, such as the table, tr, and td elements. While the HTML table editor provides a convenient way to edit those elements, it cannot provide editing facilities for any capabilities that are not supported by HTML tables.
The table editor works with HTML tables (table elements and their child elements), but it does not with the ASP.NET Table control (asp:table element). The ASP.NET Table control is designed primarily to be used programmatically rather than for static layout, the way HTML tables are often used.
Design view renders the table in a manner similar to how it will appear in a browser. It does this by interpreting the table's HTML elements in much the same way a browser will. For more information, see the "Sizing and Resizing Behavior" section later in this topic.
Scope of Edits
It is helpful to understand how edits you make in Design view are applied to table elements. Note the following:
Each cell in the table is considered a member of the row or column that it starts in, as displayed in Design view. An operation on a row or column affects all of the members of that row or column. Mapping a cell in Design view to a corresponding td element in Source view might not always work as expected if cells contain colspan or rowspan attributes.
Row operations affect each of the td elements in that row. They do not affect the tr element.
Selecting and modifying a column affects any th elements that are in the column.
Sizing and Resizing Behavior
The table editor can sometimes work in unexpected ways when you initially specify table, row, or column dimensions, or when you are resizing these elements. The behavior of table element dimensions reflects the behavior that the table will have in the browser. For example, columns that do not have a specific width setting will grow or shrink according to the overall width of the table, the width of the other columns in the table, and the content that all of the columns contain.
Content Takes Precedence
In general, the size of content in a cell takes precedence over width or height settings on cells or rows. For example, if a table cell contains a graphic, or img element, the size of the graphic takes precedence over the width of the cell or even of the table. This is true also for controls in table cells.
If cells contain text, and if the cell's nowrap attribute is not set, the text will wrap within the cell's width. However, if the text does not contain white space, such as spaces or punctuation, there is no place for the text to wrap and the cell width will be readjusted to accommodate the text.
Content also takes precedence for row height. If text wraps within a cell, it can cause a row to be higher than the height setting specified for the tr element that represents the row.
Guidelines for Table Sizing and Resizing
Because of the way HTML is designed, it is possible to assign conflicting dimension settings to a table and the elements it contains. For example, a two-column table might be assigned a width of 100%, but the two columns might each be assigned a width of 100 pixels.
The following table summarizes how sizing is handled in the table editor. In all cases, the width of content takes precedence.
Dimensions specified |
Behavior |
|---|---|
Width is specified for the table and for all of the table's columns, or height is specified for the table and for all of the table's rows. |
Table dimensions take precedence; the table calculates column or row sizes proportionally. |
Width is specified for the table and for some of the table's columns, or height is specified for the table and for some of the table's rows. |
The sized elements are rendered using exact dimensions, and the remaining elements are resized to fill out the full dimensions of the table. Note The table editor displays the width of unsized table elements as "auto." |
Width is specified for each of the table's columns but not for the table itself, or height is specified for each of the table's rows but not for the table itself. |
The table width or height is calculated by adding the width of all of the table's columns or the height of all of the table's rows. |
No width or height is specified for the table or any of the table's elements. |
The width or height is calculated solely on cell content and the space required for borders. |
Note
If you are resizing a row or column and the td elements use different units for height or width, the table editor normalizes the units into pixels.