PCPhoto
Build Your Own Web GalleryA step-by-step guide with screenshots for building your first website |
|
|
|
Page 10 of 25
STEP 5d: The Table In Code View
Here’s what Dreamweaver did in the code to create my new table. Dreamweaver is set to Split display, so we can see the Code View above and the Design View below. All of my cells are empty, so there’s nothing but blanks in the Design View. You can edit in either Code or Design View. I prefer just working with the code so I can be sure of what’s going on; weird things happen sometimes in Design View editing. Also note that in Split display mode, the Design View may not always update immediately, so you may have to click out of the code and onto the design to see a change reflected. Let’s look at the code. Line 9 has the opening tag for the table: <table ...>. The tag has attributes in it that apply to the table. Right now we have a width of 900 pixels with no bordering, spacing or padding. Line 31 has the closing tag </table>. On line 10, we see <tr>. This is the beginning of a new table row. Following that are the <td> tags, which denote the beginning and end of each cell in the table row, one for each column. In between each <td> and </td> are the characters “ ”. This is code for “nonbreaking space”, which Dreamweaver automatically inserts if your cell is empty. We’re going to replace that with our content soon. Line 16 contains the </tr> tag, closing our first table row. On the following lines—17 through 30—is the code for the two other table rows. So this is the basic structure of our page, but we need to make a few tweaks before we add content.   |
|||||
