**Dare To Make A Diffrence**

Lesson Three - Colors and Backgrounds

Background colors and graphics

Tables can have background colors and graphics to add visual appeal. They can also have colored borders as well,but keep in mind that Netscape's support of tables isn't complete and you'll get mixed,but not necessarily unpleasant, results when the table is viewed and comparisons made in both browsers.

We will working with the table that you began in Lesson One.

To give a table a colored background,you just add this to the color to the table, watch, >table bgcolor="#000000"< to align it center you would do this, >table align "center"bgcolor="000000"< so I just changed my white bg to a black bg.

To color individual cells inside of the table,just add the above code to the table cell,instead. This will be covered more in the next lesson.

Your table code should now look like this...

Isent this neat.......I love Red.......=)

* Note that the colors used are in standard hex code and are the same as those used in the BODY tags.To find more hex codes go "here...=)" Adding a background image instead of just a color is pretty much the same,except the you would use BACKGROUND="yourpicture.gif". The resulting table code will now look like this... This is what the table will look "like..." TOP Border colors and widths TOP Colored borders are only partly supported by Netscape,and some border codes aren't supported at all, so we will skip past these and focus on the codes that are compatible with both major browsers only. The first thing to remember is that if you want a colored border for your table then the BORDER= code *must* be set to "1" or higher or the border won't show up.Individual cells may also have their borders colored using the same code,but inserted into the tag instead. Let's create a red border on an otherwise clear table that is 200 pixels wide and 100 pixels high here... >TABLE WIDTH=200 height=100 BORDERCOLOR=#E93E0C BORDER=1< >tr<>td< >/td> >/TR> >/TABLE> This is what the above table code creates... bla bla bla TOP Would you prefer a wider border? Just put a higher number where the 1 is,such as a 5,and this is what it will look like... Extras - Cell Padding and Cell Spacing. TOP Cell Padding is the code that adds space,controls the space used to pad the contents of the table and Cell Spacing controls the spacing between the table cells and rows themselves. Let's say that you feel that your text is too close to the border of the table and you'd like to add some space to improve its appearance. By adding a CELLPADDING=5,you'll basically be padding the table with 5 pixels of free space as the table below shows. This is what the code above creates... Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z CELLSPACING is only needed if you want to add space around multiple table cells and rows. Below is a table with two cells and a CELLSPACING=0 added... Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z TOP This table below is what you get when you add 5 to the CELLSPACING= code for the table above... Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z Add a color to the border of the table above,and this is how it will look... Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z Your text goes here....a b c d e f g h i j k l m n o p q r s t u v w x y z All codes mentioned in this lesson can be mixed and matched,colors and widths changed, except where stated otherwise,so you can create your own very attractive tables.:) Your homework for this lesson; Build a table using this lessons instructions and choosing two or more of the effects we've outlined above, such as a colored border or some added cell spacing,etc... and then place your own text or picture inside it on a test page and upload it to your directory. If you have completed this lesson successfully,you can then be sent on to the next lesson - tables with multiple cells. Back to the Introduction... Back to Lesson Two... Back to Lesson Three back to Lesson four To Lesson Six Hosted by www.Geocities.ws