Nannette Thacker ShiningStar.net

HTML Tables to ASP.net Table Controls

By Nannette Thacker

If you're new to ASP.net, but familiar with ASP Classic or HTML, you might wonder about the ASP.net table control.

Dragging an HTML table from your toolbox...



... will generate these table commands:

<table>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

But since we want to stick with the new ASP.net controls, we'll instead drag our Standard Table control onto our form.



But all it does is generate this code:

<asp:Table ID="Table1" runat="server">
</asp:Table>

The above code simply looks like this on the screen:



What in the world do you do with that?

At this point, right click the Table in the Design view and select Properties.



The Properties window will display with our Table1 properties.



To assign Rows, go to the bottom and select the Rows property. A little button will appear on the right [...], select it.



This will open the TableRow Collection Editor with properties for your row, <TR>. Select "Add" to add rows to your table.



To add Cells or "<TD>"s, go to the bottom of the TableRow Properties and select the "Cells" Property. A little button will appear [...]; select it. This opens the TableCell Collection Editor. Select "Add" to add columns to your table.



Select OK to close each window. Now look at your code.

We have inserted a few words within our TableCell properties. Now our finished code looks like this:

<asp:Table ID="Table2" runat="server">
    <asp:TableRow ID="TableRow1" runat="server">
        <asp:TableCell ID="TableCell1" runat="server">
        This is Cell 1
        </asp:TableCell>
        <asp:TableCell ID="TableCell2" runat="server">
        This is Cell 2
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

On screen, it looks like this:



But where are the other common values you are used to using within tables, rows and cells?

Let's play around with our Properties. You may set the Table's Appearance. Notice here, I set the BackColor to White, the BorderColor to Red and the BorderWidth to 1px. I also set CellPadding and CellSpacing to 2 and assigned a CssClass. (If you set the class, it can handle the majority of these properties for you, but that's another story.) The Font Forecolor is set to Navy and Gridlines to Both. Play around with the Properties and you'll likely find other values you may need.



In our Layout Property, I set the HorizontalAlign to "Center."



Now I want to skip over to the TableCell Collection Editor and set the TableCell alignment to "Right" for the first cell and Wrap to False.



Our finished table now looks like this:

This is Cell 1

This is Cell 2

And the generated code looks like this:

<asp:Table ID="Table1" runat="server" BackColor="White" 
    BorderColor="Red" BorderWidth="1px" 
    CellPadding="2" CellSpacing="2" 
    CssClass="tablecell" ForeColor="Navy" 
    GridLines="Both" HorizontalAlign="Center">
        <asp:TableRow runat="server">
            <asp:TableCell runat="server" 
                HorizontalAlign="Right" Wrap="False">
                This is Cell 1
                </asp:TableCell>
            <asp:TableCell runat="server" 
                HorizontalAlign="Left" 
                VerticalAlign="Middle">
                This is Cell 2
                </asp:TableCell>
        </asp:TableRow>
</asp:Table>

From the above, you'll see the "Align" in an HTML Table is replaced by "HorizontalAlign." "Valign" is replaced with "VerticalAlign." "Nowrap" is replaced with Wrap="False."

Play around with the ASP.net Table control and you'll soon find all the missing HTML pieces.

If you View your Table in a web browser and View the Source Code, it has been generated client side to look like this. (I have added line breaks so it will fit on the screen.)

<table id="Table1" class="tablecell" cellspacing="2" 
  cellpadding="2" align="Center" rules="all" border="1" 
  style="color:Navy;background-color:White;border-color:Red;
	border-width:1px;border-style:solid;">
	<tr>
	  <td align="right" style="white-space:nowrap;">
           This is Cell 1
          </td>
          <td align="left" valign="middle">
           This is Cell 2
          </td>
	</tr>
</table>

Nannette
I want to be a Paladin when I grow up!