Tables

Another Web server control is the Table control, which just displays an HTML table. This control is a good one if you want to visually organize what's going on in a Web page using rows and columns, usually to present data in tabular form. Previously, Web designers often used tables to get a measure of control over where elements were placed in Web pages, but now that you can position elements in an absolute manner, that's no longer needed.

You can create a table at design time or at run time. Doing so at run time is often useful because you can build a table by binding it to a data source. You can see a table at work in the Tables example in Figure 16.3, where I am listing the name, length of day, radius, and perihelion (farthest distance from the sun) of several planets.

Figure 16.3: The Tables example.

To create a table using a Table control, it helps to know how HTML tables are created, because your table will be drawn as an HTML table. You create a table in HTML with the <table> element, and an object of the Table class in VB.NET. You add rows to the table in HTML with <tr> (table row) elements, and with objects of the TableRow class in Visual Basic. And you add the cells in an HTML table with the <td> (table data) element, and with TableCell objects in Visual Basic. Here's what the generated HTML for the table in Figure 16.3 looks like:

<table id="Table1" bordercolor="Black" border="0"
style="border-color:Black;border-width:2px;
border-style:Solid;height:163px;width:313px;
Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 63px">
    <tr align="Center">
        <td style=
                 "border-width:1px;border-style:Solid;font-weight:bold;">
            Name
        </td><td style=
                 "border-width:1px;border-style:Solid;font-weight:bold;">
            Day
        </td><td style=
                 "border-width:1px;border-style:Solid;font-weight:bold;">
            Radius (miles)
        </td><td style=
                 "border-width:1px;border-style:Solid;font-weight:bold;">
            Perihelion (million miles)
        </td>
    </tr><tr align="Center">
        <td style="border-width:1px;border-style:Solid;">
            Mercury
        </td><td style="border-width:1px;border-style:Solid;">
            58.65
        </td><td style="border-width:1px;border-style:Solid;">
            1516
        </td><td style="border-width:1px;border-style:Solid;">
            43.4
        </td>
    </tr><tr align="Center">
        <td style="border-width:1px;border-style:Solid;">
            Venus
        </td><td style="border-width:1px;border-style:Solid;">
            116.75
        </td><td style="border-width:1px;border-style:Solid;">
            3716
        </td><td style="border-width:1px;border-style:Solid;">
            66.8
        </td>
    </tr><tr align="Center">
        <td style="border-width:1px;border-style:Solid;">
            Earth
        </td><td style="border-width:1px;border-style:Solid;">
            1
        </td><td style="border-width:1px;border-style:Solid;">
            2107
        </td><td style="border-width:1px;border-style:Solid;">
            128.4
        </td>
    </tr>
</table>

To help create the TableRow and TableCell objects you need in a table, the Visual Basic IDE uses collection editors, as we'll see in this chapter. In code, you can add contents to a table cell by adding literal controls or other controls to its Controls collection. Then you add the TableCell objects you've created to a table row's Cells collection. After that, you add the TableRow objects to the table's Rows collection, and you're all set.

Tip

It is important to know that any additions to modification of table rows or cells in code will not persist after you post the page back to the server. This is because table rows and cells are controls of their own, and not properties of controls.