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

Article
10/22/2014

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 Note: 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

Select the table to which you want to add a caption.
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

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.
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

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.
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

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.
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.

Share via