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

[cmrhema]

Hi,

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

Regards

cmrhema

[balame2004]

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.

[cmrhema]

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

[Frinavale]

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:

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.

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.

[cmrhema]

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?

[Frinavale]

@cmrhema
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?

[Frinavale]

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):

Public Partial Class TemplatedUserControl
    Inherits System.Web.UI.UserControl
    Private _editing As Boolean = False
    Private m_messageTemplate As ITemplate = Nothing
    Private m_messageEditTemplate As ITemplate = Nothing
 
 
    <TemplateContainer(GetType(DataItem))> _
    Public Property DataTemplate() As ITemplate
        Get
            Return m_messageTemplate
        End Get
        Set(ByVal value As ITemplate)
            m_messageTemplate = value
        End Set
    End Property
    <TemplateContainer(GetType(DataItem))> _
   Public Property EditTemplate() As ITemplate
        Get
            Return m_messageEditTemplate
        End Get
        Set(ByVal value As ITemplate)
            m_messageEditTemplate = value
        End Set
    End Property
 
  Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
 
        Dim myData() As String = _
        {"first record", "second record", "third record", "fourth record"}
        Dim i As Integer
 
        If DataTemplate IsNot Nothing AndAlso _editing = False Then
            For i = 0 To myData.Length - 1
                Dim container As New DataItem(i, myData(i))
                DataTemplate.InstantiateIn(theItem)
                Me.Controls.Add(theItem)
            Next
        ElseIf EditTemplate IsNot Nothing AndAlso _editing Then
            For i = 0 To myData.Length - 1
                Dim theItem As New DataItem(i, myData(i))
                EditTemplate.InstantiateIn(theItem)
                Me.Controls.Add(theItem)
            Next
 
        End If
    End Sub
 
    Public Class DataItem
        Inherits Control
        Implements INamingContainer
 
        Private m_index As Integer
        Private m_message As String
        Friend Sub New(ByVal i As Integer, ByVal msg As String)
            Me.Index = i
            Me.Message = msg
        End Sub
 
        Public Property Index() As Integer
            Get
                Return m_index
            End Get
            Set(ByVal value As Integer)
                m_index = value
            End Set
        End Property
 
        Public Property Message() As String
            Get
                Return m_message
            End Get
            Set(ByVal value As String)
                m_message = value
            End Set
        End Property
    End Class
 
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:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="ScratchPad.WebForm1" %>
 
<%@ Register TagPrefix="uc" TagName="TemplateTest" Src="~/TemplatedUserControl.ascx" %>
 
    <asp:Panel runat="server" id="contents" style="border: none;">
            <div style="width:150px;float:left; text-align:center; font-weight:bold; border-bottom:solid 1px black;">Index</div>
            <div style="width:150px;float:left; text-align:center;font-weight:bold; border-bottom:solid 1px black;">Message</div>
            <div style="clear:both"></div>
            <uc:TemplateTest ID="myTemplatedCtrl" runat="server">
                <datatemplate>
                       <div style="width:150px;float:left;text-align:center"><asp:Literal runat="server" ID="textValue" Text="<%# Container.Index %>"></asp:Literal></div>
                       <div style="width:150px;float:left;text-align:center"><asp:Literal runat="server" ID="indexValue" Text="<%# Container.Message %>"></asp:Literal></div>
                       <div style="clear:both"></div>
                </datatemplate>
                <edittemplate>
                    <div style="width:150px;float:left; text-align:center"><asp:TextBox runat="server" ID="Literal1" Text="<%# Container.Index %>"></asp:TextBox></div>
                    <div style="width:150px;float:left;text-align:center"><asp:TextBox runat="server" ID="Literal2" Text="<%# Container.Message %>"></asp:TextBox></div>
                    <div style="clear:both"></div>
                </edittemplate>
            </uc:TemplateTest>
    </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:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        DataBind()
End Sub

[cmrhema]

Thank you Frinnavale for in depth clarification