How to: Create and Edit HTML Tables in Design View
The HTML Designer provides tools that make it easy to create and edit tables in your Web pages.
Note
This topic discusses the HTML table element, which is frequently used to create page layouts and to display data in columns. To create tables dynamically, use the Table ASP.NET Web server control. For details, see Table, TableRow, and TableCell Web Server Control Overview.
Procedures
To create a table from the Toolbox window
- In the Toolbox, from the HTML group, drag a Table element onto the page.
To create a table from the Layout menu
On the Layout menu, click Insert Table.
In the Insert Table dialog box, specify the table properties, and then click OK.
Note
If the table does not have a border, you can choose Visible Borders on the View menu to display border outlines.
To add content to a table cell
- In Design view, place the insertion point in the cell in which you want to add content, and then type the text.
To add columns, rows, and cells to a table
Place the insertion point in a cell in the column or row next to where you want to insert the new column, row, or cell.
Note
Placing the cursor inside a cell is sufficient. You do not have to select the entire column, row, or cell.
On the Layout menu, click Insert, and then click the appropriate command to insert a column, row, or cell.
Note
You can also right-click the column or row, click Insert, and then click the appropriate command.
To select tables, columns, rows, or cells
Place the insertion point in a cell in the table, column, or row that you want to select.
On the Layout menu, click Select, and then click Table, Column, Rows, or Cell.
To merge cells
Select the cells that you want to merge.
Note
Press the CTRL key while clicking adjoining cells to select them.
Right-click the selected cells, and then on the shortcut menu, click Merge Cells.
The cells are merged into a single cell that spans the width of the original cells.
To resize table elements
Right-click the row or column, click Select, and then click the element that you want to resize.
Drag the element's borders it is the desired size.
The table displays the size of the element that you are resizing.
Note
If the selection includes elements that use different size units (for example, percentage and pixels), resizing the element changes the size units of all elements to pixels.