|
Create Cool Custom Tables
Learn how to create and customize data-intensive tables in ASP.NET Web applications.
by Dan Fergus
Posted May 10, 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 (see Additional Resources).
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.
Back to top
|