HP003/004.05 HP003/004.06 HP25201
Web Site Help Guide
Step One: Creating Your Webspace
Step Two: Getting Our First Web Page
Step Three: Making Our First Web Page
Step Four: Uploading Our Page Via FTP
Step Five: Making A Second Web Page
Step Six: Backgrounds, Links, and Color Schemes
Step Seven: Inserting Images Correctly
Step Eight: Tables
Fin: Conclusion and Tips
Bonus Page: Connecting to FTP via Dreamweaver

Step Eight: Tables

Ok, I now have a bunch of images, sized them to my satisfaction, and even arranged them visually on the page. But doesn't this feel a little sloppy to you, that it could be organized more coherently? Also, if I want to write things alongside or beneath the image (such as crediting the author, commenting on the image, etc) it is very hard and annoying to align them properly with the image, and different browsers may not show the alignment fully to my satisfaction. How do we fix these issues? Tables!

Let's start by making a new table. Place your cursor where you'd like it on your page, go to the "Insert" menu, select the Table option, and a new dialog box will pop up riddled with options.

Alright, the number of rows option determines how many horizontal strings of table cells you're going to have, and the column option determines how many vertical strings of cells you're going to have; like a 3 row 4 column table would look like a 3x4 rectangle with 12 "cells." The table alignment is pretty self-explanatory, just where you'd like the table to be aligned. Check or uncheck the border box if you want a visible border surrounding your cells. Table width determines how wide the table is going to stretch across your browser, we can adjust this later but when making a new table I suggest starting with a 100% table width. Ignore the table height option, it'll only cause issues, and you can leave the column widths equal unless you know you want certain columns to be narrower than others.  The table background options work just like the web page background options we fooled around with earlier, select a color if you desire or an image if you have one. Here's my sample:

Voilà, your table is inserted. Now to put your pictures in there either insert them directly into a cell space, or if they're already on your page, just drag them into the cell where you want them. You can edit your font and images exactly as you did before within a table, only now they'll be conveniently organized for you. Feel free to try out the other table options that I only glossed over too; adapt your table width % so that the information looks better on your page, increase the table border if you want a larger distinction between cells, and insert rows and columns as needed. I've done some of that myself, I even fooled around with Duket's masthead table too, here is my final page:
 




Tables are excellent tools once you know how to use them. They can be used to organize and arrange information clearly and perfectly, since doing it with font alignments or using the Tab key or Spacebar may result in strange layouts depending on people's individual computers. Tables act as a good standard that gets around all these problems and I recommend you use them whenever they may seem remotely necessary.
 


[Previous Page]                             [Next Page]