Presentation on theme: "Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can."— Presentation transcript:
Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can design a single pages layout, then duplicate it for other pages. Hint: Do the links first!
Table Width Percent of Browser Window (Fluid Width) The left tables width = 100% The right tables width = 50%
Table Width Pixels (Fixed Width) If you want your design to remain the same from one viewers browser to another, use pixels. It is recommended that you use a width of 600 pixels, as this will fit all screens without causing the user to scroll left and right. If the user were to resize the browser smaller than 600 pixels wide, a scroll bar would appear at the bottom of the window as you see on the left.
Cell Padding Cell padding increases the space between the text and the cells walls. The number is in pixels. A cell padding of 5 is a good place to start.
Cell Spacing Cell spacing increases the thickness of the cell walls. The number is in pixels.
Table Border The border property controls the thickness of the tables outer border. If you set the border = 0, the table will not be visible on the Web. This is a common practice to control layout of a Web page. See the next page for an example of why you might want to use tables to control layout of your pages.
Layout Using Tables Border = 3 Border = 0 (Invisible) Tables and content identical except for the border property.
Table Background Color
Cell Background Color To control the background of each cell right-click inside the cell.
Table Align You can align the whole table left, center or right in the browser window.