Creating a Table

To see how to use the Table, TableRow, and TableCell classes, I'll take a look at the Tables example on the CD-ROM, which was discussed in the In Depth section of this chapter. You can see the table created in that example, which displays data on several planets, in Figure 16.3.

You can design tables in the Visual Basic IDE. Just add a Table control to a Web page, and click its Rows property in the Properties window to open a TableRow Collection Editor, as you see in Figure 16.8. You can add new table rows to the table by clicking the Add button, as in other collection editors; you set the properties of each row in on the right side of the editor.

Figure 16.8: The TableRow Collection Editor.

To add table cells to a table row, click the Cells property's ellipsis ("...") button in the TableRow Collection Editor, opening the TableCell Collection Editor you see in Figure 16.9. You can add cells to a row by clicking the Add button, just as you'd add items to any collection, and you can set the properties of the various cells, such as font properties, in the editor as well. I've made the font in the top row of the table bold to make it stand out as a table header, and you can do that either by setting the Font property on a cell-by-cell or row-by-row basis.

Figure 16.9: The TableCell Collection Editor.

Tip

There is a TableHeaderCell class, which corresponds to the <th>element that you use for table headers (this element displays its text in bold), but the TableRow Collection and TableCell Collection Editors don't support this class, so in this example, I've used the Bold property to bold the text in the top row of the table.

Here's the HTML created by this example and displayed in the browser:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="Tables.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>Tables example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema
        content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:Table id=Table1 style="Z-INDEX: 101; LEFT: 96px;
POSITION: absolute; TOP: 63px" runat="server" BorderStyle="Solid"
 Height="163px" Width="313px" BorderColor="Black" BorderWidth="2px">
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" Text="Name"></asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" Text="Day"></asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" Text="Radius (miles)"></asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" Text="Perihelion (million miles)"></asp:TableCell>
</asp:TableRow>
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="Mercury">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="58.65">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="1516">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="43.4">
</asp:TableCell>
</asp:TableRow>
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="Venus">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="116.75">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="3716">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="66.8">
</asp:TableCell>
</asp:TableRow>
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="Earth">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="1">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="2107">
</asp:TableCell>
<asp:TableCell BorderStyle="Solid" BorderWidth="1px" Text="128.4">
</asp:TableCell>
</asp:TableRow>
</asp:Table>

    </form>
  </body>
</HTML>

You can see the table created by this example in Figure 16.3.

You also can add rows to a Table object in code, of course, with the Rows collection's Add method:

Dim Table1 As New Table()
Dim TableRow1 As New TableRow()
Table1.Rows.Add(TableRow1)

And you can add new cells to a row, then add that row to a table in a like manner. To add cells to a row, just use the row's Cells collection's Add method:

Dim Table1 As New Table()
Dim TableRow1 As New TableRow()
Dim TableCell1 As New TableCell()
TableRow1.Cells.Add(TableCell1)
Table1.Rows.Add(TableRow1)