and press Enter. Notice the quotation marks around the attributes values. Make sure you include beginning and ending quotation marks throughout. Heres the purpose of each of the attributes included in the opening tag:
border defines the width of the tables outline in pixels. For now, were showing a 1-pixel border to aid in seeing the table while you design. After the page design is complete, youll change border="1" to border="0" to hide the table borders on your Web page.
width defines the tables exact pixel width or specifies the percentage of the browsers window that the table should fill. Were using a table to format the entire page, so the table is sized to fill 100 percent of the browsers window space.
cellpadding creates a space (measured in pixels) between the cell contents and the table border. After sampling a few spacing parameters, we found that adding a cellpadding value of "5" did the trick. This type of setting exemplifies the value of testing settings, saving, and previewing your HTML page during the creation process.
cellspacing specifies the amount of space (in pixels) between cells. In the music site, we didnt need to specify any spacing between cells, so we set the attribute to "0".
Type to start the first table row.
Press Enter, press Tab to make reading your code easier, and type to begin the first cell in the first row. The valign="top" attribute indicates that you want to align the cell contents to the top of the cell (by default, cell contents align to the middle). You can align cell contents using the values top, middle, bottom, or baseline. Also, by default, cell contents align at the left. (Later we show you how to change the default alignment by centering contents within a cell.)
Press Enter twice, press Tab, and type | to mark the end of the first cell in the first row.
Press Enter twice, press Tab, and type to create the second cell in the first row.
Press Enter twice, press Tab, and type | to mark the end of the second cell in the first row.
Press Enter and type
to complete the first row of your table.
Press Enter and repeat steps 3 through 8 to create the second table row (or copy and paste all the code starting with and ending with
to create a second table row, as described in the tip).
Press Enter after creating the second table row, and then create a third row by retyping the commands in steps 3 through 8 or by copying and pasting the table row code.
After entering the third table row, press Enter and type
to complete the table tags.
tip If you prefer not to retype the table row commands when creating the second and third table rows, click before the first rows command and drag to select all the text up to and including the
closing command. Then press Ctrl+C to copy the selected code. Click after the command, press Enter, and press Ctrl+V to paste the copied HTML code into your text document. Press Ctrl+V again to create the third table row.
Copying and pasting saves time as well as helps to ensure accurate codingas long as the original copied code is error-free.
Finally, youll add a width attribute to the two cell tags () in the first row of the table. You can assign column width by percentage (for example, the left column could be assigned to take up 50 percent of the browser window), or you can insert an exact pixel measurement. By default, if you dont include the width attribute in table cells, the table sizes the columns based on the size of the cell content and the size of the browser window. You need to add the width attribute to only one cell in a column (and if you have conflicting measurements in cells in the same column, the browser will use the largest setting by default). To keep our setup orderly, well add the width attribute to the cells in the first row:
tip Using fixed measurements are useful for navigation bars. Using percentages is useful for large areas that can resize to accommodate a browser window
note If you dont define column widths in tables by adding the width attribute to | tags, browsers automatically size the columns based on each columns widest item and the browsers window size.
In the first cell in the first row, click after "top", press the spacebar, and type width="170" to set the first column to 170 pixels wide.
In the second cell in the first row, click after "top", press the spacebar, and type WIDTH="*". The asterisk in place of a pixel number indicates that the browser should allow the second column to be as wide as necessary to fill the remaining table width. Because this table is formatted as 100 percent of the browser window, the asterisk instructs browsers to expand the second column to fill the remainder of the browser window area.
note An asterisk in the width attribute equates to the rest of the browser window and enables developers to configure a cell to resize as the browser window is resized without specifying a percentage number.
Save your HTML document. Your HTML code should look like the code shown in the figure.
Creating the structure for your Web document's contents (added table code shown in red)
Now that your table is in place, youre ready to enter content into the table. The first order of business is to insert the logo into the top-left corner.
Easy Web Design creationguide.com/oldschool
( Copyright 2006 Mary Millhollon. All Rights Reserved. The contents of this document may not be copied in part or full without express written permission.
Show slide 06 B
sic H
ML 49, Next Step.
Show slide 06 B
sic H
ML 49, Next
tep.
Show slide 06 B
sic H
ML 49, Next Step.
a b 0 8 `
a
? @ S w } 8
B
F
P
}
q | ' * ] ^ e h o s W X
r w g k r s |
E I 5NH c ) /
w }
q j K c t
/-D M
~ ~
& |