By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,180 Members | 1,012 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,180 IT Pros & Developers. It's quick & easy.

Difference between <div> and <tr> tags in terms of speed

P: 375

I have two questions.

1. I have heard that replacing a <tr> <td> with <div> tags increases the rendering speed. Is it so, and if yes which speed does it increase, rendering speed or loading speed.

2. Is the main purpose of app_browser is to convert <tr><td> to <div> tags.

Kindly help


May 12 '09 #1
Share this Question
Share on Google+
7 Replies

P: 142
You can not replace <td> and <tr> tags with <Div> or vice versa. <tr> tag creates a html row in a html table and <td> creates a html cell in a html row. But div creates a division (or place holder) where we can place someother html control. Don't get confuse <div> tag with html row tag.
May 12 '09 #2

P: 375
Actually balame2004 what I meant to ask was, say u have a page in .net where all the controls are placed in table consisting of tr and td tags. Whereas I have another one where controls are placed in div tags only.

Will the one with div tags be more faster than the one with table
May 12 '09 #3

Expert Mod 5K+
P: 9,731
It sounds like you've got a case of "div-itis" (someone once told me this too so don't feel bad)

You don't have to place controls in <div> tags at all if you don't need to group things together.

Especially with concerns to developing a .NET application. You're more likely to use a Panel (which actually renders as a <div> tag when it is sent to the browser) because you can access Panels in your C# or VB server code.

The only time you should be using tables is to display tabular data. This is stuff that should be displayed in a table... in other words, tables should not be used as a layout for displaying your control; CSS should be used instead.

Tables do take longer to load than <div>s but it's not so only a matter of loading speed that you should be concerned with. You should also consider accessibility and maintainability.

An Accessibility example:

If someone who was blind was using a text to speech application to view your web site and you were using a table to as lay out as such:
Expand|Select|Wrap|Line Numbers
  1. This is a paragraph that          This is another paragraph 
  2. should be displayed in            that is displayed in 
  3. Column 1 of the table.            column 2 of the table.
It would be read as:
"This is a paragraph that
This is another paragraph
should be displayed in
that is displayed in
Column 1 of the Table.
Column 2 of the table"

As you can see, using a table to display the web content wont make any sense to anyone using a text to speech reader.

A maintainability example:

It is a lot easier to change css style for elements to do things like make the content appear "above" the rest of the content if the data is not in a table, but in it's own group.
May 13 '09 #4

P: 375
Actually Frinnvale, I came to know thro a web designer that instead of displaying anything into tables if its displayed in a div manner , the performance, (i think he meant rendering is faster). So in fact even in gridview for each and every row , the designer askd to cover with div and replace all the tr. Is it so?
May 13 '09 #5

Expert Mod 5K+
P: 9,731
You don't.
The GridView is meant to display Tabular data and so it dynamically creates a table that displays this data.

If your data is not supposed to be displayed in a table then consider using a different control, or creating your own control, to suit your needs.

If your data is supposed to be displayed in a table then you could continue to use the GridView. The GridView has paging capability. This means that if you wanted to reduce the load time you could reduce the number of rows displayed at one time and let the "page" to view the next/previous rows.

What is the data you're displaying?
How should it be displayed?
May 13 '09 #6

Expert Mod 5K+
P: 9,731
You could consider using a Template Item to format the display of your data....but a Table will still be rendered if you use a GridView.

You could create your own Templated Control instead of using an existing ASP.NET control if you want. Then you can specify exactly what should be placed where and how without using tables (if you wish).

For example, here I've created a new Web User Control (named TemplatedUserControl).

This User Control has 2 properties:
  • one that accepts a template used to display the data,
  • and one that accepts a template used to edit the data.

This control has a private class "DataItem" which inherits from the Control class and implements the INamingContainer interface. This private class is used in order to display dynamic data using a unique name in the templated control.

The Control dynamically displays the data (which you can retrieve from a database but here I'm just using an Array of Strings) by dynamically creating instances of the DataItem class which is applied to the template(s) provided (using the 2 template properties I described earlier):

Expand|Select|Wrap|Line Numbers
  1. Public Partial Class TemplatedUserControl
  2.     Inherits System.Web.UI.UserControl
  3.     Private _editing As Boolean = False
  4.     Private m_messageTemplate As ITemplate = Nothing
  5.     Private m_messageEditTemplate As ITemplate = Nothing
  8.     <TemplateContainer(GetType(DataItem))> _
  9.     Public Property DataTemplate() As ITemplate
  10.         Get
  11.             Return m_messageTemplate
  12.         End Get
  13.         Set(ByVal value As ITemplate)
  14.             m_messageTemplate = value
  15.         End Set
  16.     End Property
  17.     <TemplateContainer(GetType(DataItem))> _
  18.    Public Property EditTemplate() As ITemplate
  19.         Get
  20.             Return m_messageEditTemplate
  21.         End Get
  22.         Set(ByVal value As ITemplate)
  23.             m_messageEditTemplate = value
  24.         End Set
  25.     End Property
  27.   Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
  29.         Dim myData() As String = _
  30.         {"first record", "second record", "third record", "fourth record"}
  31.         Dim i As Integer
  33.         If DataTemplate IsNot Nothing AndAlso _editing = False Then
  34.             For i = 0 To myData.Length - 1
  35.                 Dim container As New DataItem(i, myData(i))
  36.                 DataTemplate.InstantiateIn(theItem)
  37.                 Me.Controls.Add(theItem)
  38.             Next
  39.         ElseIf EditTemplate IsNot Nothing AndAlso _editing Then
  40.             For i = 0 To myData.Length - 1
  41.                 Dim theItem As New DataItem(i, myData(i))
  42.                 EditTemplate.InstantiateIn(theItem)
  43.                 Me.Controls.Add(theItem)
  44.             Next
  46.         End If
  47.     End Sub
  49.     Public Class DataItem
  50.         Inherits Control
  51.         Implements INamingContainer
  53.         Private m_index As Integer
  54.         Private m_message As String
  55.         Friend Sub New(ByVal i As Integer, ByVal msg As String)
  56.             Me.Index = i
  57.             Me.Message = msg
  58.         End Sub
  60.         Public Property Index() As Integer
  61.             Get
  62.                 Return m_index
  63.             End Get
  64.             Set(ByVal value As Integer)
  65.                 m_index = value
  66.             End Set
  67.         End Property
  69.         Public Property Message() As String
  70.             Get
  71.                 Return m_message
  72.             End Get
  73.             Set(ByVal value As String)
  74.                 m_message = value
  75.             End Set
  76.         End Property
  77.     End Class
  79. End Class

Ok, so now we have a Templated Control.
To use this you would create an ASP page and add the control to it:

Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="ScratchPad.WebForm1" %>
  3. <%@ Register TagPrefix="uc" TagName="TemplateTest" Src="~/TemplatedUserControl.ascx" %>
  5.     <asp:Panel runat="server" id="contents" style="border: none;">
  6.             <div style="width:150px;float:left; text-align:center; font-weight:bold; border-bottom:solid 1px black;">Index</div>
  7.             <div style="width:150px;float:left; text-align:center;font-weight:bold; border-bottom:solid 1px black;">Message</div>
  8.             <div style="clear:both"></div>
  9.             <uc:TemplateTest ID="myTemplatedCtrl" runat="server">
  10.                 <datatemplate>
  11.                        <div style="width:150px;float:left;text-align:center"><asp:Literal runat="server" ID="textValue" Text="<%# Container.Index %>"></asp:Literal></div>
  12.                        <div style="width:150px;float:left;text-align:center"><asp:Literal runat="server" ID="indexValue" Text="<%# Container.Message %>"></asp:Literal></div>
  13.                        <div style="clear:both"></div>
  14.                 </datatemplate>
  15.                 <edittemplate>
  16.                     <div style="width:150px;float:left; text-align:center"><asp:TextBox runat="server" ID="Literal1" Text="<%# Container.Index %>"></asp:TextBox></div>
  17.                     <div style="width:150px;float:left;text-align:center"><asp:TextBox runat="server" ID="Literal2" Text="<%# Container.Message %>"></asp:TextBox></div>
  18.                     <div style="clear:both"></div>
  19.                 </edittemplate>
  20.             </uc:TemplateTest>
  21.     </asp:panel>

Notice the Templates that I've supplied to the instance of the template control (the TemplateTest control). These Templates are passed into the 2 properties I described above.

If the Templated Control is configured such that it is not in edit mode the content will be displayed as text in <div> tags that have styles to make the text appear as if in a table layout....otherwise the text displayed in TextBoxes within the <div> tags. (I didn't add a property to let you specify whether or not the Template Control is in edit mode....just change the private _edit variable member in the Templated Control to change which template is used)

All you have to do in the ASP page is call the DataBind method to bind the data retrieved in the Templated control to the template provided in the page:
Expand|Select|Wrap|Line Numbers
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2.         DataBind()
  3. End Sub
May 13 '09 #7

P: 375
Thank you Frinnavale for in depth clarification
May 14 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.