Udostępnij za pośrednictwem


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

After creating a table, you can add new elements, such as rows, columns, and cells. You can also remove existing elements.

To add a table

  • Perform one of the steps listed in the following table.

    Table type

    Steps

    A table with no content and no attributes set

    • From the HTML group of the Toolbox, drag a Table element onto the page.

      Visual Studio creates a table with three rows and three columns.

    A table with attributes that you specify as you create it

    • In the Layout menu, click Insert Table, and then specify the table and cell options in the Insert Table dialog box.

To add rows, columns, or cells to a table

  • Perform one of the steps listed in the following table.

    Table element

    Steps

    A row inside the table

    • Place the insertion point in the row next to where you want to insert the new row; in the Layout menu, click Insert, and then click Row Above or Row Below.

      -or-

      Right-click anywhere in the row where you want to insert the new row, click Insert, and then click Row Above or Row Below.

    A row at the end of the table

    • Press the TAB key in the last cell of the table.

    A column

    • Place the insertion point in a cell in the column next to where you want to insert the new column; in the Layout menu, click Insert, and then click Column to the Right or Column to the Left.

      -or-

      Right-click anywhere in the column where you want to add the new column, click Insert, and then click Column to the Left or Column to the Right.

    A cell

    NoteNote:
    The editor does not prevent you from creating a table with uneven numbers of cells in rows. The editor will not automatically span a cell to accommodate uneven numbers of cells in other rows
    • Place the insertion point in the cell next to where you want to insert the new cell; in the Layout menu, click Insert, and then click Cell to the Left or Cell to the Right.

      -or-

      Right-click anywhere in the column where you want to insert the new cell, click Insert, and then click Cell to the Left or Cell to the Right.

To add a table caption

  1. Select the table to which you want to add a caption.

  2. In the Layout menu, click Insert, and then click Caption.

Merging Table Cells

You can combine, or merge, cells to form columns or rows that span other columns. For example, in a three-column table, you can combine the cells in the top row to form a single row that spans all three columns.

To merge table cells

  1. Select the table cells that you want to merge. For details, see How to: Select HTML Table Elements and Contents in Visual Web Developer.

    Note

    You can merge table cells only if the selected cells form a rectangle.

  2. In the Layout menu, click Merge Cells.

    -or-

    Right-click the selected table cells and then click Merge Cells.

    The cells are merged into a single cell with a colspan or rowspan attribute added to the markup, as appropriate.

Removing Table Elements

Removing any table element permanently deletes it from the page.

To remove a table

  • In the Layout menu, click Delete, and then click Table.

    -or-

    Select the table and then press the DELETE key.

To remove a row or column from a table

  1. Place the insertion point in the row or column that you want to remove. If you are deleting cells, select the cell or cells that you want to delete. For details, see How to: Select HTML Table Elements and Contents in Visual Web Developer.

  2. In the Layout menu, click Delete, and then click Row or Column.

    -or-

    Alternatively, select the table row or column that you want to delete and press BACKSPACE.

To remove table cells

  1. Click the table cell or cells that you want to delete. For details, see How to: Select HTML Table Elements and Contents in Visual Web Developer.

  2. In the Layout menu, click Delete, and then click Cells.

    -or-

    Alternatively, select the table cell or cells that you want to delete and press BACKSPACE.

See Also

Tasks

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

How to: Resize HTML Table Elements in Visual Web Developer