Practical ASP.NET

Create Cool Custom Tables

Learn how to create and customize data-intensive tables in ASP.NET Web applications.

• By Dan Fergus
• 07/01/2004

Technology Toolbox: ASP.NET

A familiarity with .NET does not necessarily make Web programming easy. You must deal with the statelessness of Web applications, and you need to get a handle on the nuances of ASP.NET. I'll help you through one of those nuances: tables in ASP.NET Web applications. I've never seen a Web page holding a significant amount of information that didn't have at least one table. View the source of any such Web page and you'll find <table>/</table> tags somewhere on it.

There are at least two different types of tables you can add to a Web page: the Web Forms Table control and the standard HTML table. You might assume you should use the Table control (see Figure 1), but I recommend considering the standard HTML table first. You can add this table through the HTML tab in the Toolbox, through the Table | Insert | Table menu, or by typing the begin table and end table tags (<table></table>) in your HTML editor.

Each method gives you a different degree of latitude for your design. Inserting a standard table through the menu lets you choose how many rows and columns you want in the table, along with other options related to the appearance of the table. On the other hand, dropping a table from the Toolbox automatically produces a standard three-by-three table with borders.

Keep the CellPadding property in mind as you design your table. This property sets the amount of space left between the edge of a cell and any content in the cell. CellSpacing determines the amount of space between each of the cells.

You undoubtedly aspire to tweak your UI more than this, so select Build Style from the context menu of the table. This rather complex dialog box gives you a wealth of options (see Figure 2). For example, you get several choices when you select the Other tab and click on the Borders dropdown. Select "Collapse cell borders," then click on OK. You'll see that your table looks a little different (see Figure 3). The reason for this will become obvious later on.

Stuff Your Table With Data—and Style
Formatting your table is only the beginning. Now you can start building the information into your page by adding data or controls into the cells. You use this approach mostly for static page data that you fix at design time. However, you can also use this approach as the basis for dynamic page information. Insert controls into the cells, then populate the controls at run time with data from a database or some other source. IBuySpy applications and ASP.NET Starter Kits are two of the best examples of this technique.

One of my first Web sites, which featured scheduling for umpires, demonstrated this kind of table. The site featured a table used to display the available classes in the district. I designed it to be populated at run time with data from SQL Server. The design called for headers on each column and alternating dates in the table displayed in different colors.

These requirements meant that I couldn't build the table at design time and test it with the early versions of third-party grids that existed at the time. Those grids didn't do what I wanted anyway. That left me with the option of exploring dynamic ASP.NET server-side tables. However, this option didn't offer much visual pizzazz—at least not at design time. It produced only three little "#" characters. The detailed work begins with building the various rows and columns of the table at run time. Start by applying some attributes to the table:

tblClasses.Style.Add(
   "BORDER-COLLAPSE", "collapse");
tblClasses.BorderColor = Color.BurlyWood;
tblClasses.BorderWidth = 2;

You set the Border property in the earlier exercise in order to collapse the border to a thin line. Go to the Web page with that property set and view the source. The page source reveals that the Style property of the table has a value set that tells the browser to alter the default border style. You can use that information to set the style of your runtime table as shown in the preceding code snippet. In fact, you should make a habit of looking at the source of any Web page you like. This enables you to determine what styles the page uses for its table(s). Then you can use that style in your own table by employing the Style.Add method.

Build Your Rows and Columns
It's now time to consider what it takes to build your table's rows and columns. Start by building your table header (see Listing 1). First, you must create each row, then add a "cell" to each row. The code creates a TableCell, sets its properties, then adds it to the TableRow object. You add the TableRow object to the table after you've added all the cells to the TableRow. You can assign styles from your style sheet to each cell object in addition to the obvious properties, such as cell width and text.

The data comprises an array of ClassInfo objects. You create the rows for the table with code that resembles what you used to build the header. You create a row, set properties, create cells, set properties, and add to the row that you added to the table. The flexibility of this design enables you to adjust easily how the rows are displayed. Use the row's BackColor to set an entire row to a single color:

TableRow r = new TableRow();
r.BackColor = Color.Burlywood;

Alternatively, you can set each individual cell to a custom color, overriding the row's BackColor setting:

TableCell c = new TableCell();
c.BackColor = Color.Khaki;
c.Width = 180;

You can use the methods presented here to fine-tune every cell in your tables. I hope you agree that this justifies the extra effort required to code every row and cell. The finished product will make you look like a real pro (see Figure 4). When you start feeling trapped by the limitations of static tables and third-party grids, a little extra coding and some imagination can give you tables that fit your desires.

• Get Code Download