Web Page Structuring Using Tables in Adobe Dreamweaver CS4
This chapter is from the book
This chapter is from the book
This chapter is from the book
One of the biggest complaints print designers have when moving from print design to web design is the fact that HTML is so finicky. More specifically, the placement of elements within your web pages is limited because of the lack of support (within browsers) to control the organization of text, images, and media within the page. Although this might be true to a certain extent, HTML is, in fact, extremely flexible and offers many rich elements that can be used to control the organization of components. As the book unfolds, you'll learn about various elements and technologies Dreamweaver offers to control the pinpoint accurate placement of elements on your page. Technologies such as CSS and options such as AP Elements and tables can be used by web developers who strive for the fluid look print design programs have offered for years. The trick is learning the intricacies of the elements and how Dreamweaver allows you to work with them within its framework.
In this chapter, we'll begin to move from the simplicities of inserting and modifying elements on the page to a richer topic that involves structuring and placing elements on the page using HTML tables. As you'll begin to see, tables offer a flexible and simple alternative to the basic formatting techniques we've covered thus far for controlling the placement of elements within your web pages.
To work with the examples in this chapter, visit the book's website to download the exercises files used in this and other chapters. You'll want to replace the files for Chapter 3, "Dreamweaver Site Management," in your working VectaCorp folder with the files for Chapter 4, "Web Page Structuring Using Tables." Again, I'll place mine in C:\VectaCorp\.
Inserting and Working with Tables
If you remember, in Chapter 2, "Building a Web Page," the development of our Vecta Corp web page was severely limited to inserting text and images in a vertical, linear fashion. Elements on the page were organized so that we inserted text and images, followed by a line break, then either more text or another image, and then repeated the process until the page looked somewhat presentable. Although this process might work for simple web pages, it reveals drawbacks that become immediately obvious when large amounts of text are added to the page. As you can see from Figure 4.1, the background image that we added to the page begins to repeat itself near the bottom of the companydirectory.html page.
)
Figure 4.1 The background image begins to repeat itself near the bottom when there's too much text on the page.
The reason for this flaw might not seem immediately clear, but it begins to reveal itself with some explanation. The image we used for the background (header_bg.gif) is 1 pixel wide by 2,000 pixels high. The positive side is that the image always tiles horizontally no matter how wide we make the page. The downside is that the image is 2,000 pixels high, and because the natural viewing of pages is such that users navigate up and down, if the page exceeds that 2,000 pixel height, the image will tile vertically as it does horizontally. Another problem, visible in Figure 4.2, is that no definitive break exists between paragraphs. Depending on how the page's width is resized, the text and images might run together.
)
Figure 4.2 Because there's no definitive break between paragraphs, text and images might run together.
Although these design flaws are minor, they begin to demonstrate the complexity that our designs could potentially hold. As your web pages become more intricate and complex, structuring your web pages using elements such as tables becomes a viable alternative.
Working with tables in Dreamweaver can be a complex process depending on how intricate your design becomes. To walk you through all the table-based features exposed by Dreamweaver, we'll rebuild our Vecta Corp website from scratch. Not only will this help you understand all the features available for working with tables in Dreamweaver, but it will also show you how the small design flaws mentioned previously can be avoided by using tables to structure your pages instead. To insert a new table, create a new blank HTML page and then choose Insert, Table. The Table dialog box appears similar to Figure 4.3.
)
Figure 4.3 Insert and format basic properties for a table from the Table dialog box.
The features outlined within the Table dialog box should start looking relatively familiar. If you've used word-processing, database, or spreadsheet programs, the concept of rows, columns, and headers should be recognizable.
The features provided for working with tables in HTML go far beyond the simplicities of rows and columns. The Table dialog box displays a few options, separated into three parts: Table Size, Header, and Accessibility. A detailed list of the features outlined within these three parts is given next:
- Rows—Enter a number within this text box to set the number of rows the table will contain.
- Columns—Enter a number within this text box to set the number of columns (cells within a row) the table will have.
- Table width—Enter a number within this text box to set the width, in either pixels or a percentage, a table will have.
- Border thickness—Enter a number within this text box to set the thickness of the border in pixels that the borders will have. If you don't enter a value here, browsers will interpret the border thickness as 1. To avoid this problem, either enter a numeric value greater than 0, or if you don't want a border, enter 0.
- Cell padding—Enter a number within this text box to set the padding value between the contents of a cell and the cell border. If you don't enter a value here, browsers will interpret the cell padding as 1. To avoid this problem, either enter a numeric value greater than 0, or if you don't want cell padding, enter 0.
- Cell spacing—Enter a number within this text box to set the spacing between cells. If you don't enter a value here, browsers will interpret the cell spacing as 2. To avoid this problem, either enter a numeric value greater than 0, or if you don't want cell spacing, enter 0.
- Header—Headers are a quick way of formatting rows within a table so that the contents within the header are centered and boldface. Four options exist when working with Headers. Choose None (the default) if you don't want a header within your table. Choose Left if you'd like to have the left column of the table designated as a header, choose Top if you'd like to designate the top row of the table as a header, and choose Both if you'd like to designate both the top and left portions of the table as headers.
- Caption—Enter a value within this text box to have text appear outside of the table describing contents within it. More on this feature can be found in the online Appendix A, "Accessibility."
- Align caption—Choose an option from this menu to set the alignment of the caption in relation to the table. Five options exist within this list, including Default (Center), Top, Bottom, Left, and Right. More on this feature can be found in Appendix A.
- Summary—An important accessibility option is the summary attribute of the table. Because screen readers cannot decipher the contents within a table accurately, entering a brief description here ensures that users with screen readers can get a clear portrayal of the contents of your table. More on this feature can be found in Appendix A.
Accepting the default properties already in the Insert Tables dialog box, go ahead and click OK now to insert the new table into the page. The new table should resemble Figure 4.4 within the Document window.
)
Figure 4.4 The new table is inserted into the page.