How to create table in visual studio-Trickcode

Inserting a Table,Inserting a Table,Rows and Columns,Splitting Cells,Merging Cells
Share it:
How to create table in visual studio


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.


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

First, the Size category allows you to indicate the number of rows and columns of the table. In the Layout section, you can change 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 specifies whether the borders between every cell will be collapsed 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 setting 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.

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.

Inserting a Table



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.

Rows and Columns


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.

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


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. The first row can actually be a cell that spans two columns. It means that its total width is the combined width of the 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.
Merging Cells



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.
The selected cells will now be merged into one single cell.
Share it:

aspnet

Post A Comment:

0 comments: