<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:Table control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                Table control is used to structure a web pages. In other words to divide a page into several rows and colums to arrange the information or images.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        Table control is used to structure a web pages. In other words to divide a page into several rows and colums to arrange the information or images.
        When it is rendered on the page, it is implemented through &lt;table&gt; HTML tag.
        <p>
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;table&gt; tag. 
        </p>
        <p>
        We can simply use HTML &lt;table&gt; control instead of using asp:Table control. However many of one benefits of using asp:Table control is we can 
        dynamically add rows or columns at the runtime or change the appearance of the table. <br />
        You can skip ID property of the TableRow or TableCell, however it is advisable to write these property otherwise you will not be able to play with these controls. 
        </p>
        
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">BackImageUrl</td>
                <td>
                    Used to Set background image of the table
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Caption</td>
                <td>
                    Used to write the caption of the table.                    
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : Table
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/table.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                
                    <asp:Table ID="Table1" runat="Server" CellPadding="2" CellSpacing="1" 
                    BorderColor="CadetBlue" Caption="Demo of asp:Table control" BorderWidth="1" BorderStyle="Dashed">
                        <asp:TableRow runat="Server" BorderWidth="1">
                            <asp:TableCell runat="Server" BorderWidth="1">
                                Row 1 - Cell 1
                            </asp:TableCell>
                            <asp:TableCell ID="TableCell1" runat="Server">
                                Row 1 - Cell 2
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow ID="TableRow1" runat="Server">
                            <asp:TableCell ID="TableCell2" runat="Server">
                                Row 2 - Cell 1
                            </asp:TableCell>
                            <asp:TableCell ID="TableCell3" runat="Server">
                                Row 2 - Cell 2
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                    
                </td>
                <td>
                    <asp:Button ID="btn1" runat="Server" OnClick="AddRowAndColumn" Text="Add One Row and 2 Column" />
                    <asp:LinkButton ID="lnl1" runat="Server" OnClick="ChangeTableBackColor" Text="Change Table Back Color"></asp:LinkButton>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <pre>
    &lt;asp:Table ID="Table2" runat="Server" CellPadding="2" CellSpacing="1" 
        BorderColor="CadetBlue" Caption="Demo of asp:Table control" BorderWidth="1" BorderStyle="Dashed"&gt;
            &lt;asp:TableRow ID="TableRow2" runat="Server" BorderWidth="1"&gt;
                &lt;asp:TableCell ID="TableCell4" runat="Server" BorderWidth="1"&gt;
                    Row 1 - Cell 1
                &lt;/asp:TableCell&gt;
                &lt;asp:TableCell ID="TableCell5" runat="Server"&gt;
                    Row 1 - Cell 2
                &lt;/asp:TableCell&gt;
            &lt;/asp:TableRow&gt;
            &lt;asp:TableRow ID="TableRow3" runat="Server"&gt;
                &lt;asp:TableCell ID="TableCell6" runat="Server"&gt;
                    Row 2 - Cell 1
                &lt;/asp:TableCell&gt;
                &lt;asp:TableCell ID="TableCell7" runat="Server"&gt;
                    Row 2 - Cell 2
                &lt;/asp:TableCell&gt;
            &lt;/asp:TableRow&gt;
        &lt;/asp:Table&gt;
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        
        
        </div>
    <br />
    
    <script language="javascript" type="text/javascript">
        function GiveAlertToUser()
        {
            alert("Hi Dear, Client side method worked.");
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top