Building Your Page Using Tables:

• put your items into the cells on your table and saving and viewing the page often
• to put both a graphic and text in the same cell here is how horizontal aligning works:
  • left-aligning the graphic will bring the text up on the right side of the graphic, flush with the top of it;
  • right-aligning will put the graphic on the right and the text to the left
  • centering usually puts the text above or below the graphic, with both items centered in the cell (unless you have extraneous spaces - then you just get a confusing mess)
• you can also insert a 2 col x 1 row table in the cell - one holds the picture, the other holds the text (or two pics or two blurbs of text)
• sometimes with centering, the text will start on the the same line as the graphic at its lower right (or if graphic is below the text, text may end on the same line as the upper left of the graphic - this is because you have a wider cell in the same column)
  • put your cursor right in front of the items you want to push up or at the end of the items you want to push down, and use the enter or shift+enter key to force the text to wrap below or above the pic
• if you use shift+enter, the alignment of everything in the cell must be the same
• if you use just the enter key to create a paragraph break between components in a cell, each component can have it's own alignment without affecting the rest
• when editing an existing table (to change borders, background, etc.), put your cursor on one edge of the table and when you see the little cross-hairs icon appear, double click to bring up the table editor; click on EDIT TABLE tab to change things in the table

This table has  cell padding & spacing of 2, 0 borders

This table has zero cell padding & spacing & borders

 

default 1:1:1	Pad3:Spc1:Brdr1	Pad1:Spc3:Brdr1

• You can use cell padding and cell spacing to make the areas between cells and around the edges of the cells wider or narrower - setting them both to zero will ensure there is no space between items in your cells
• edges of graphics would be touching each other if you did this, and lists of text for links would have no spaces between them
• this is excellent for links because using this method, you have no "bleeding" of one link into the next like you do in single spaced text links without a table
• you can get an interesting effect by NOT setting any border color, and setting the table spacing and cell padding to 2 or more - you get a space where the background shows through between the cell padding and cell spacing - this "tints" the colorless border to blend in with your color scheme
• cell spacing is the space outside of the border; cell padding is the space inside of a border - you can increase the size of either or both of these to get exact spacing between cells without having to insert line breaks in the cells
• when you have a higher item in a row, the shorter items will be centered VERTICALLY in the other cells in that row - to get a shorter item to begin at the top of the cell, put your cursor behind it (or at the end of the text in it) and use enter or shift+enter to move it up; to push the item to the bottom, put the cursor in front of it, and use the same technique to push it down
• if you know how to use HTML code, you can tell the table contents to align at the top or bottom:
  • switch to the html editor and add this into the table properties:  "valign=top" or "valign=bottom" - put it inside the existing table parameters and the quotation marks there!

Repairing a "broken" table (adding or deleting cells):

Need to delete a cell, column or row from a table?  Have you mysteriously managed to delete a cell or otherwise mess up an existing table?  Go to the html code view.  Look for the TR and TD - those signify the rows and the cells within the rows in the table.  Here's an example - 2x2 table - I left the spaces in the cells so the code would make more sense.