Visual C# Tutorials

Generating Tables with Visual Web Developer

HTML tables are used to present data in rows and columns. Tables are also used 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 webforms so it will be easier to align server controls.

Typing tables manually in Code Editor can sometimes be confusing specially 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 (You can create a new web site or use an existing web site we created in the previous lessons). Go to the Designer and click inside the body element.

Inserting a Table

The Table Menu in the Menu Bar contains that tools that we will need to generate a table. We can start creating a table by going to Table menu and clicking Insert Table.

Figure 1

The Insert Table window will pop out showing different options you can modify to change the look of your generated table.

Figure 2

First, the Size category allows you to indicate the number of rows and columns of the table. In the Layout section, you can chage the alignment of the whole table, make it float to the left or right, specify the width and height of the table, add cell padding and cell spacing. You can also add a border and specify its size and color. The collapse table border checkbox specify whether the borders between every cell will be collapse into a single border. The Background section allows you to specify a background color of the table and even use an image background for it. The last option at the bottom of the window allows you to save this settings so this will be the default for every other table you will create. For now, leave the defaults and click OK. A table will now be generated and you can immediately see it in the designer.

Figure 3

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

Figure 4

To select a whole column, you can select all the cell 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 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.

Figure 5

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 Below selection, then the rows will be added below the selected cell. Above selection adds the new rows above the selected cell. For columns, you can choose Right of selection to add the new columns to the right of the selected cell while 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 shortcut to the dialog we have just discussed.

Figure 6

You can immediately add a column to the left or right, and a row above or below. As you can see, there are quite some handy shortcut keys for each of them. Ctrl+Alt+Left and Ctrl+Alt+Right for adding new columns to the left and to the right of a selected cell. Ctrl+Alt+Up and Ctrl+Alt+Down for adding rows above and below a selected cell. You can also see the Cell to the Left and Cell to the Right options. This will simply add a single cell to the left or to the right of the selected cell. The Caption menu allows you to add a caption to your table (inserts a <caption> element inside the table).

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

Figure 7

To split a cell, simply select the cell that you want to split by clicking it and then go to the Table > Modify > Split menu.

Figure 8

Once you click the Split Cells menu item, a window will pop up asking for more options.

Figure 9

You can choose whether to split the cell into columns or into rows. You even have a nice preview of a splitted cell which changes depending whether you choose split into columns or rows. Below specifies the how many cells you want the current cell to be split into.

Figure 10

Merging Cells

Merging cells is a very common task when working with tables. There are times when you need to span a single cell into multiple rows or columns. We can again take a look at the example in Figure 7. The first row can actually be a cell which spans two columns. It means that its total width is the combined width of two 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.

Figure 11

Note when selecting cells. Selected cells must be continuous so you can't skip cells. You can select continous 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 number of cells in each row and each column is equal.

To merge cell, go to Table > Modify > Merge.

Figure 12

The selected cells will now be merged into one single cell.

Figure 13

---

Previous Lesson Formatting Texts

Index ASP.NET

To Be Continued...

blog comments powered by Disqus