HTML pages can be, and are, created with any text editor. Microsoft Notepad can work perfectly well for creating even the most complex Web Forms, presuming that you have a very good memory for HTML syntax. The reality is, most developers will do a lot better using an editor that actually supports HTML. One of the best options for ASP.NET developers is Microsoft Visual Studio 2005.
In the examples in Chapter 1, "The Web Forms Environment," I used the HTML <br /> tag to create line breaks for form layout. In the real world, most sites use HTML tables to create appealing form layouts, often with cascading style sheets classes assigned to the tables as well. HTML tables are powerful tools for Web Form layout, and a basic understanding is critical. First, a couple of examples will help illustrate some of the features of HTML tables.
In a new Web site created in Visual Studio named WebFormLayout, I created a page named SimpleTable.aspx. In Source view, I added the following HTML markup inside the <form> tag.
<table border="1"> <tr> <td>This is the left column.</td> <td>This is the right column.</td> </tr> </table>
Note
In this and most of the introductory examples in this chapter, I set the border attribute of the table to a non-zero value so that my tables will be obvious when the form is viewed in Visual Studio Design view or a browser. This is almost never a good idea in working Web sites, because the border can be a needless distraction from the overall design. In addition to setting the border of a table, you can set attributes such as cellpadding and cellspacing to pad contents within cells and set spacing between cells.
Inside the opening and closing table tags, several other tags are allowed. The most important of these are the tr and td tags. The tr tag is used for a row in a table, and the td tag is used for a column in a table. The td tag is for Table Data; a similar tag, th (for Table Header), will not be used in any examples here. Unless you specify differently, with a few exceptions, the number of columns in each row of a table should be the same.
Note
In my examples, I format the HTML in a way that I find pleasing (indented with opening and closing tags lined up). Previous versions of Visual Studio would have politely allowed my formatting, and then eaten it up and formatted the HTML however it pleased when I changed from Source view to Design view and back. The actual formatting of HTML, for the most part, makes no difference in the way that the HTML is rendered in a browser. However, for a developer, the layout can be important in understanding the structure of the HTML document. Visual Studio 2005 leaves your HTML formatting alone, a feature that is more important than it might sound. Just ask any HTML developer who has used earlier versions of Visual Studio!
When SimpleTable.aspx is displayed in a browser, it appears as shown in Figure 3-1.
Figure 3-1: SimpleTable.aspx in a browser
As mentioned in the preceding note, Visual Studio 2005 does not modify the layout of entered HTML markup as earlier versions did. More importantly, IntelliSense support in Visual Studio 2005 makes it much easier to select appropriate attributes and values for standard HTML tags, as well as Web control tags. For instance, if you press the Spacebar inside a table tag in the Source view in Visual Studio, a list of attributes appears, as shown in Figure 3-2.
Figure 3-2: IntelliSense technology in Visual Studio showing available attributes for the table tag
HTML Table Width
One of the first things you will probably want to modify in a table is the width. For instance, the following table was created in Visual Studio, with no content inside a two-column table.
<table><tr><td></td><td></td></tr></table>
In Design view, the table appears as shown in Figure 3-3.
Figure 3-3: An HTML table with no content in Design view
One of the nice features of Visual Studio is the ability to drag and drop controls onto a form. When you are planning to create a table-based form design, the layout shown in Figure 3-3 is not very helpful. You certainly could drag and very carefully drop a control into one of the columns in the table in Figure 3-3, but adding a width attribute to the table tag, as shown here,
results in the table appearance shown in Figure 3-4.
Figure 3-4: An HTML table with a width of 500 and no content in Design view
It is far easier to drag and drop controls into the columns in the table shown in Figure 3-4. In addition to setting a table width to an absolute size (in this case 500 pixels, because pixels are the default scale), you can also set a table width to a percentage. For instance, I added the following markup to a page named TableWidth.aspx.
The following table will be 500 pixels wide: <table border=1 width=500> <tr> <td>This is the left Column.</td> <td>This is the right Column.</td> </tr> </table> <br /> The following table will be 100% of the width of the browser window: <table border=1 width=100%> <tr> <td>This is the left Column.</td> <td>This is the right Column.</td> </tr> </table> <br />
When run in a browser, the result was the screen shown in Figure 3-5.
Figure 3-5: TableWidth.aspx in a browser with a normal width
When I changed the width of the browser, the first table remained the same size. The second table (the table with the width set to 100 percent) was reduced in size so that the text in the columns wrapped. The result is shown in Figure 3-6.
Figure 3-6: TableWidth.aspx in a browser with a reduced width
In addition to setting the width of a table, it is possible to set the width of columns as well. The width of a td tag can also be set in pixels or as a percentage of the total table width. In theory, you could even mix and match make one column 200 pixels wide and another column 30 percent. But the result can vary from browser to browser, and this sort of mixing is generally a bad idea. However, tables can be nested, with one table inside another, and setting the width of one table in pixels and the other as a percentage is not only acceptable, it is common.
One thing to remember is that HTML is a markup language, and in many cases, the attributes you set are more like suggestions than precise placement directions. Look at Figure 3-7.
Figure 3-7: TableColumnWidth.aspx in a browser
In the WebFormLayout project, I added a new page named TableColumnWidth.aspx. To the markup in this form, I added the following HTML.
This table has the left column set to 120 pixels wide, with a total width of 500. <table border="1" width="500"> <tr> <td width="120">This is the left column.</td> <td>This is the right column.</td> </tr> </table> <br /> This table is set the same. But, wait, what happened? <table border="1" width="500"> <tr> <td width="120"><img src="/books/4/401/1/html/2/flower.jpg" alt="Flower from Hawaii" /></td> <td>This is the right column.</td> </tr> </table>
Note
In all cases, when I display an image, I include an alt attribute, which provides alternate text that is especially useful for visually impaired users.
Two HTML tables are defined in this markup, and both have the left column set to a width of 120 pixels (the pixels unit is the default because no other unit type is specified). In the first table, I added the text declaring which column the text should appear in. In the second table, I placed an HTML image control in the left column. The image control, identified by the img tag, has its src (for source) attribute set to "flower.jpg." An image file is basically unbreakable, meaning that unlike text with embedded spaces, it cannot be conveniently broken into multiple lines. When the flower image, which is 320 x 240 pixels, is placed in the 120-pixel-wide column, the column expands to accommodate the image. If I made the image width 120 pixels and the height 90 pixels, the image would maintain the correct aspect ratio and the column width would not expand. Adding the following code to the page accomplishes this (resizing the image using height and width attributes).
This table is also set the same. But this time, I have resized the image. <table border=1 width=500> <tr> <td width=120><img src="/books/4/401/1/html/2/flower.jpg" alt="Flower from Hawaii" height=90 width=120 /></td> <td>This is the right column.</td> </tr> </table>
This additional table appears as shown in Figure 3-8.
Figure 3-8: TableColumnWidth.aspx in a browser showing the third table with a resized image
One thing to remember about setting the height and width of an image as I did here is that this is not a good way to display a thumbnail image. Generally, thumbnail images are displayed to save download time and network space when an image is displayed. Reducing the height and width in the browser, as shown in the previous example, results in no savings of download time or network space the same large image is downloaded and then displayed in a smaller size, which is wasteful.
Note
The height and width attributes can also be added even when you don't need to resize the image. Setting these attributes allows the page layout to remain correct even if the image is not found, and it provides a hint to the browser that can make page loading more efficient.
HTML Table Alignment
In addition to sizing an HTML table, you might also want to align the table overall or align content within a column. When considering the alignment of a table overall, you should think about how HTML tables are often used. One use, for example, is to set the overall structure of the page. Often, all content on a page is placed within a single table, by using a complex set of attributes that I will explain later.
If all content is placed inside a single table, what happens when the table is narrower than the overall size of the browser window? For instance, I am writing this book on a PC with a 21.3-inch LCD display, and the resolution is set to 1280 x 1024. However, when I create a Web Form application, I commonly target it to look good at 600 x 800. (The vast majority of PCs come with the screen resolution set to at least 600 x 800, meaning that your Web Form layout should work for most users.) So, when the table containing the content is narrower than the screen, what happens to the rest of the screen? That all depends on how you align the table.
In the WebFormLayout project, I created a new Web Form named TableAlign.aspx and added the following markup.
This table is 500 pixels wide. <table border=1 width=500> <tr> <td>This is the left column.</td> <td>This is the right column.</td> </tr> </table> <br /> This table is 500 pixels wide, with align set to center. <table border=1 width=500 align=center> <tr> <td>This is the left column.</td> <td>This is the right column.</td> </tr> </table>
This markup creates two tables, each 500 pixels wide. The second table also has an align attribute set to center, meaning that the table should be centered in the browser. The result is shown in Figure 3-9.
Figure 3-9: TableAlign.aspx showing a table without alignment and a centered table
Another option when creating an overall table to contain content on a Web Form is to set the width to 100 percent (leaving align unset, because it will not matter). This creates a page that will always take up the entire width of the browser. In some cases, allowing the Web Form to be the width of the browser is appropriate. Before doing so, it is useful to view the page on a high-resolution display to ensure that the Web Form layout remains reasonable when the table is quite wide.
Columns can also be aligned, both horizontally and vertically. Vertical alignment is useful only when the height of the cell is set or is higher than the content of the current cell because the content in another cell in the same row is taller. I created a new Web Form, TableColumnAlign.aspx, and added the following markup to show all the possible combinations of alignment.
<table border=1 width=500> <tr> <td align=left>This is left aligned.</td> <td align=center>This is center aligned.</td> <td align=right>This is right aligned.</td> </tr> <tr> <td align=center valign=middle>This is content that is centered vertically and horizontally.</td> <td>This is a great deal of text, repeated a number of times, in order to ensure that the cell wraps. This is a great deal of text, repeated a number of times, in order to ensure that the cell wraps. This is a great deal of text, repeated a number of times, in order to ensure that the cell wraps. This is a great deal of text, repeated a number of times, in order to ensure that the cell wraps. </td> <td align=right valign=bottom>This is right aligned and valigned to bottom. </td> </tr> </table>
When run, TableColumnAlign.aspx looks as shown in Figure 3-10.
Figure 3-10: TableColumnAlign.aspx showing tables with various alignments set
When setting the align attribute, allowed values are left, right, and center. When setting the valign attribute, allowed values are baseline, bottom, middle, and top. The baseline setting is useful only with Netscape, and it aligns the text to the first line of text in other cells in the row.
Spanning Columns and Rows in HTML Tables
In addition to sizing and aligning content within tables, sometimes you need a different number of rows in one column, or a different number of columns in one row. For example, a common overall page layout is shown in Figure 3-11.
Figure 3-11: A common page layout structure
This sort of page can be constructed in several ways. One way would be to create the Page Banner as a single-row, single-column table, and the Menu and Main Content as a two-column, single-row table. There is one problem with this structure: If the content in any of the cells exceeds the required size, one of the tables will be wider than the other.
To demonstrate a page layout such as that shown in Figure 3-11, I added a page named TablePageLayout.aspx with the following table markup.
A couple of new attributes are used in this example. First, the background color is set by using the bgcolor attribute. In HTML markup, colors are described by using the names of common colors or by using a number sign (#) followed by six hexadecimal digits. Each two of the digits represents the intensity of one of three colors: red, green, and blue.
Another new attribute used in this example is colspan. In this example, I created a two-column, two-row table. In the first row, I wanted one wide column. To achieve this, I created a single td element and used the colspan attribute to indicate that the td element should span two columns. I also explicitly set the width of the left cell in the second row (which is where I would expect the menu to be).
Finally, for the banner, I used an h1 tag. The h1 tag is used on a single line to indicate that the line should be displayed as a header. Several header tags (h1, h2, and so on) can specify how text inside the tag should be rendered. Unlike some other ways of controlling the formatting of text, these tags do not specify the exact font, font size, or other precise formatting. Rather, the h1 tag specifies a general look (that is, a heading) and allows the browser to determine the exact font and formatting to use.
When run, the page appears as shown in Figure 3-12.
Figure 3-12: TablePageLayout.aspx in a browser
Your table layout can be quite complex. For example, I have a classic ASP application that uses both the colspan attribute and the rowspan attribute (an equivalent attribute that allows a td attribute to span multiple rows) to create a very complex display that nicely groups all hospital patients assigned to each resident.
Putting It All Together: A Simple Web Form
Using the table attributes just discussed, as well as the Web controls introduced in Chapter 2, "A Multitude of Controls," you can create a simple Web Form. SimpleWebForm.aspx, added to the WebFormLayout project, will be our example for laying out a form by using tables and Web controls. Figure 3-13 shows SimpleWebForm.aspx in a browser.
Figure 3-13: SimpleWebForm.aspx in a browser
Recall that in all examples so far, I set the border attribute to 1 to show all tables clearly. Here, setting the border attribute to 0 will perhaps give a better view of what a completed form might look like. Figure 3-14 shows the same form with no border showing.
Figure 3-14: SimpleWebForm.aspx in a browser with table borders not visible
The markup to create the table to hold the form is shown here.
Both the row with the title and the row with the buttons have a single cell that spans both columns of the table. In the other rows, the left column widths are set to 50 percent of the table width, and each column is right justified. The drop-down list and list box have their items declared in the markup. Starting in Chapter 5, "Data Binding," we'll look at list controls fed by data sources.
It is important to remember that the example shown in Figure 3-14 is a very simple form. In most cases, form layout will be much more complex. For example, as I am writing this book, I am converting a Microsoft Office Access application to a Web application. One of the major forms in the application is 17 inches long! More importantly, the individual sections of the form are quite complex, with many individual rows containing varying numbers of controls. When converting the form to a Web Form, the first step was to break up the form into several steps by using a Wizard control (which will be covered later in this chapter). One of the more complex pages in the Wizard control is shown in Figure 3-15. Note that the form is a little too wide to display at the resolution of the screen on which the application is displayed.
Figure 3-15: A real-world application showing a complex form
In the Access form, many of the controls were aligned in ways that were not convenient for a Web Form. For instance, in the original form, the labels "Who Does Upgrade" and "IT Administrator" were directly aligned on the colons, and the associated combo boxes were aligned on the left. In the Web Form, such an alignment would require complex nesting of tables that would make the page unmanageable. In Figure 3-15, controls after the first label/control pair are placed by using space characters (generally an HTML nonbreakable space, ).
A great number of other items can be manipulated to modify the appearance of the rendered tables and controls. In addition to colors, as we have seen in previous examples, fonts can be changed as well, by setting a style, or, in the case of Web controls, by setting the font on the individual Web controls.
In addition to using markup to control the properties of HTML controls, you can also set the properties of HTML controls programmatically. Recall that in Chapter 2, I mentioned that in addition to the System.Web.UI.WebControls namespace, where most of the Web controls that I use in this book are located, there is an alternate namespace for controls, System.Web.UI.HtmlControls. The controls in the HtmlControls namespace are merely a thin layer on top of the existing HTML controls; they provide a less consistent object model than the controls in the WebControls namespace.
By adding the runat=server attribute to any HTML element and giving it a unique ID, you can reference the control in code. For example, imagine that you created a table and, depending on some condition determined at run-time in code, you needed to hide one row of the table. Let's use the following table markup for this example.
<table> <tr> <td>Left column</td> <td>Right column</td> </tr> <tr runat="server" > <td>Left column that might be hidden</td> <td>Right column that might be hidden</td> </tr> </table>
In code, you would be able to make the row identified as trHide invisible by setting the Visible property of the trHide object, as shown here.
trHide.Visible=false;
All properties of the various HTML controls can be set programmatically if the runat=server attribute is added to the tag. The MSDN documentation on HTML controls describes all of the properties of all of the HTML controls.
There are some problems with laying out a Web Form by using traditional HTML markup. For instance, imagine that you have dozens of elements on the page, and you need to change the font. If the font is defined for each element (each label, each text box, and so on), changing the font requires each style to be manually manipulated. I have manually manipulated styles in several large-scale systems, including one that allowed a single application to generate what ended up being a very different appearance so that the same application could be used by customers of many different clients, with each client's customers getting their own look and feel. Manipulating styles involved changing a large number of inline <FONT> tags. Even as I worked on that project, I knew that there had to be a better way. Fortunately, there is.
