Share via

How to: Resize HTML Table Elements in Visual Web Developer

  • Article

After creating a table or adding elements to it, you can resize the elements or the table itself.

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.

This topic presents changes you can do by using the designer only. You can also format an HTML table by working with cascading style sheets (CSS) styles. For more information, see Working with CSS Overview

To resize table elements

  • Perform the steps listed in the following table.

    As you drag the border for the table, row, column, or cell, the watermark displays the size of the element that you are resizing.

    Table element

    Size adjustment

    Steps

    Table

    Adjust overall table size

    • Select the table that you want to resize and then drag its resize handles.

    Row

    Adjust row height of an individual row

    Resizing the row creates a new CSS class that is defined in the current page. The designer uses the same CSS class for different rows if they have the exact same formatting.

    1. Hover the mouse over the row that you want to resize. Notice the cursor changes to a resize arrow and a tool tip text appears with the current height.

    2. Drag the cursor to the desired height.

    Column

    Adjust column width of an individual column

    Resizing the column creates a new CSS class that is defined in the current page. The designer uses the same CSS class for different columns if they have the exact same formatting.

    1. Hover the mouse over the column that you want to resize. Notice the cursor changes to a resize arrow and a tool tip text appears with the current width.

    2. Drag the cursor to the desired width.

    Cell

    Adjust size of an individual cell

    Resizing the cell creates a new CSS class that is defined in the current page. The designer uses the same CSS class for different cells if they have the exact same formatting.

    • Select the cell that you want to resize, and then press the SHIFT key and hold it while dragging the cell's border.

      NoteNote:
      If you do not hold down the SHIFT key, you will resize the entire row, not the cell.

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

Concepts

How to: Use the Apply Styles and Manage Styles Windows

Working with CSS Overview

Change History

Date

History

Reason

August 2008

Revised the steps to reflect changes in the designer for Visual Studio 2008.

Customer feedback.