Nannette Thacker ShiningStar.net

ASP.net Web Application Development

Sponsors

News

See all Blog Posts by Nannette.

Nannette Thacker, consultant and owner of Shining Star Services LLC, specializes in development of custom dynamic database driven web applications utilizing ASP.net technologies. Nannette has been developing ASP sites since 1997. Nannette has written numerous articles on web development techniques and tutorials.

Nannette is the owner and developer of ChristianSinglesDating.com.

 Subscribe in a reader





View Nannette  Thacker's profile on LinkedIn

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!

Comments

Shannon said:

Hmm, I'm not sure..

I never saw the point in using the ASP.NET Table

# February 18, 2008 8:30 AM

shiva said:

How can we add line break to Asp.Net Table Control

# July 14, 2008 12:06 PM

rajasekhar said:

this is the waster article......ur cheating....

i need html table properties..but u present the asp table control......i don't need to burden my server code....

# September 10, 2008 3:01 AM

nannette said:

Eric,

This MSDN article should answer those questions:

msdn.microsoft.com/.../system.web.ui.webcontrols.table.aspx

Nannette

# September 12, 2008 11:41 PM

Chronofied said:

Yeah, the reason for the ASP.net table is to create a dynamic object rather than a static one.  If you want your table to do more than just sit there, build it using ASP.net, and use a language like C# or VB to give it some life.

# January 9, 2009 5:52 PM

... said:

Gute Arbeit hier! Gute Inhalte.

 (translated: Good work here! Good contents.)

# March 3, 2009 5:27 AM

... said:

Interessante Informationen.

# March 5, 2009 5:44 AM

saikentr said:

Thank you for taking the time to write the article. It was good information.

# March 7, 2009 4:50 PM

Yong Li said:

Is there any performance advantage using HTML Table?

# March 12, 2009 6:23 PM

S Shirani said:

If i want to display this

Response.Write(dtrEmp("DNAME"))

in TableCell what should i do this??

# March 18, 2009 12:49 PM

expert said:

c# code who not connection Table1. ????

# March 20, 2009 12:06 PM

Joe said:

Pointless. Why not explain more about the differences between the two controls in terms of performance and capability and on how to manipulate them in code-behind. Which one for which task etc.?

Seems people will be creating tutorials on how to use a label next..

# March 27, 2009 6:55 AM

Panna said:

yeah..gr8 job..though its not of much use, can use it for some expe.nthn else..thnx agen..u hv done a gr8 job.

# May 22, 2009 3:36 AM

SA said:

Great Article!

Good for learners

# June 18, 2009 2:43 AM

Robbie said:

ASP.Net tables are also useful for displaying right-to-left languages, since many browsers, especially on mobile devices, don't properly change the order of table cells.

# July 28, 2009 3:18 PM

goldbishop said:

Nagaraj,

 If you are trying to do that, just use a Gridview.  This Table object, would used more for developing a report layout, or very dynamic information (information that can be reproduced via a refresh) but doesnt necessarily require a user to change the information.

 I plan on using it as a summary report at my job.  Its alot better to use this when you have a nesting of table controls within a summary report.  In my instance, i will end up having close to 30 table definition objects to produce the report, only due to the specifications of the user department makes it necessary.

 For everyone else, quit moaning, this is more of a graze the top to open up the information, if you want deeper information about the table object, crack it open in the MSDN library and get all the information you want from there.  This gives newbies that ability to decide, pending on their need, if they want to go HTML or ASP tables.

# August 14, 2009 1:25 PM

Peter said:

Thank you. I was looking for a solution to disable a table. asp.net table has this ability.

# September 27, 2009 1:28 PM

Phil said:

Perfect...The event I used the .Add in was was Page_LoadComplete.  Worked like a charm.  Thanks!

# December 5, 2009 10:05 AM

vivek said:

very good notes

i apply it in my project

# February 23, 2010 4:00 AM

arun said:

i wil try ur table

# August 23, 2010 6:22 AM

Darth Continent said:

Nice summary, thanks!

# October 5, 2010 3:00 PM

ABDUL QADER FAROOQI said:

it is good but when i use this to add an other new row in runtime no new row add.Rows are overlaped.

# October 27, 2010 3:35 AM

jango said:

I found this useful. The microsoft docs give you all the members and whatnot, but nothing on how to actually put the thing on a page :) It was just the sort of elementary info I needed. Thanks.

# October 28, 2010 4:21 PM

tarun said:

good job sweetheart

# January 6, 2011 2:17 AM

Fred s said:

Clasic Asp does this so much easier.

don't you miss it?

# January 25, 2011 6:06 PM

nannette said:

Fred,

You can still input your tables as pure HTML. The controls come in handy when you're building code programmatically, but even then you could build your tables as a string and add it as a label, as you used to do in ASP classic. I don't believe we've lost any of the features we had in classic, just gained a whole lot more.

Nannette

# January 26, 2011 6:09 PM

kanika said:

thanx it helped me a lot.

# February 5, 2011 9:28 PM

Gustavo said:

Una ves que tengo la tabla llena de informaciòn, ¿ahora como la lèo? la llene con el resultado de unos Web Service, pero para consumir otro necesito los datos de la tabla que llene con el primero, como lo puedo hacer?

Gracias por el apoyo...

# May 26, 2011 10:25 PM

nithya said:

HI...

  I build a table like your way... it is neatly aligned..... but the pblm is in the table cell i added textbox, label etc... In that i can't go to the textbox event i click the textbox its shows the table property.... i have to write the code for textbox event handler.... help me to overcome this pblm.......

Thanks in advance.........

# July 7, 2011 5:27 AM

ranga said:

Good article......

how to invisible the table ???

# July 8, 2011 2:30 AM

baboso#4 said:

Your simple explanation helped a lot.  I wasn't looking at getting deeper, but a quick refresher on using the asp table and as such is a greate article.  You took the time an patience to add all the pictures and such. Thanks,

# September 5, 2011 11:27 AM

jeni said:

i want to add td within td how i can add?

# September 28, 2011 9:32 AM

Boog said:

Was totally stuck until I read this, now back up and runnnig.

# January 17, 2012 11:37 PM

The Chill said:

48989

# September 3, 2012 10:11 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)