Generating Tables with Visual Web Developer
HTML tables are used to present data in rows and columns. Tables are also used to create the overall layout of your page although it is no longer recommended. We will be also using tables to create a grid layout for our web forms so it will be easier to align server controls.
Typing tables manually in Code Editor can sometimes be
confusing especially when your tables become complex and contain large amounts
of data. Thankfully, Visual Web Developer's Designer has amazing tools for
generating an HTML table and customizing it the way you want. You will no
longer need to manually type a table in the Code Editor ever again.
To demonstrate these tools, create a new Web Form and name
it table-tools.aspx . Go to the Designer and click inside the
body element.
Inserting a Table
The Table Menu in the Menu Bar
contains the tools that we will need to generate a table. We can start
creating a table by going to the Table menu and clicking the Insert Table.
Navigating To the Table's Components
An HTML <table> element is composed of different parts such as <tr> elements and <td> elements. It is easy to select an <td> element which is the cell of a table. You simply click on a cell of a table and that cell will be selected. You can then type anything you want or insert any HTML element in that cell.
Selecting the whole row is not that simple. First, you can click the separator between the row you are selecting and the row below it. You select all the cells of a particular row. To do that, click the first cell, then hold the Ctrl key while clicking the subsequent cells. Finally, the easiest way is to go to the tag navigator and click the tr tag.
To select a whole column, you can select all the cells of a particular column manually using the same Ctrl+Click method. You can also click the separator between the column you are selecting and the next column.
To select the whole table, position your cursor on the outer border of the table. Your cursor should turn into a cross. Click your mouse to select the whole table. Similarly, you can go to the tag navigator and simply click the table tag.
Adding More Rows and Columns
Sometimes, you cannot predict the number of rows and columns needed by your table. So you may need to add more of them later as you work. It is very easy to add more rows and columns to your table. First, select a cell in your table. The row or column that will be added will be placed relative to the cell's position. For a demonstration, click the cell located at the lower left of your table. Go to Table menu > Insert > Rows and Columns. A dialog will show up asking some details about which do you want to add.The dialog asks you if you want to add a row or a column. It also asks you for the number of rows or columns to add. The Location tells where you want the added rows or columns to be added in relation to the position of the selected cell. For rows, if you choose the Below selection, then the rows will be added below the selected cell. The above selection adds the new rows above the selected cell. For columns, you can choose the Right of selection to add the new columns to the right of the selected cell while the left of selection adds them to the left. Clicking OK will insert the rows and columns you want to add to their proper places.
There are also some more options in the Table > Insert menu which simply serves as a shortcut to the dialog we have just discussed.
Splitting Cells
There are times when you want to split cells into two. For example, you want a cell below a header cell to be split into two subheaders.- To split a cell, simply select the cell that you want to split by clicking it and then go to the Table > Modify >
- Once you click the Split Cells menu item, a window will pop up asking for more options.
You can choose whether to split the cell into columns or into rows. You even have a nice preview of a split cell which changes depending on whether you choose to split into columns or rows. Below specifies how many cells you want the current cell to be split into.
Merging Cells
Thankfully, merging cells is as easy as splitting them. To merge cells, you first need to select multiple cells. Select a single cell. To select subsequent cells, press and hold the Ctrl key and click the next cell. Continue holding the Ctrl key while clicking the subsequent cells. Figure 11 shows a table with multiple cells selected.
Note when selecting cells. Selected cells must be continuous so you can't skip cells. You can select continuous columns or rows or you can have selected cells composed of multiple columns and rows. Just be sure that selected cells are rectangular, meaning that a number of cells in each row and each column is equal.
- To merge cell, go to Table > Modify > Merge.
Post A Comment:
0 comments: