LESSON 3: COLORS AND TABLES

STEP 1: Web Colors
What is Web-safe color?
Web color (also called browser-safe colors, Web palette and 216 palette) refers to the 216 colors that can be shown on the Web without a color shift or strange dithering in your images or design. The number of available colors comes from the combination of 6 different values of Red, Green and Blue - the three additive "colors" that make-up the colors on a computer screen.

Hexidecimal colors:
When you spec color for the Web, you have to use hexadecimal values. These are values that are a base-16 value. The values are converted into base-16 in the following manner:

RGB Conversion of color value to Hex

The first two values are the percentage of Red in the color, the second two values are the percentage of green, and the third set is the percentage of blue.

EXERCISE 1: Mark up your resume with four different Web-safe colors that you get from the Photoshop color wheel.

STEP 2: Introduction to Tables
Tables allow you to precisely align images, text and other elements in HTML. You can also align tabular data and line up information in a chart format. You can put almost any other HTML tag inside of a Table tag, which gives you some design power. Once you start using tables, things start to get complicated so you'll want to make sure that you start formatting your HTML so that it's easy to read on second glance. Someone else may have to edit your page. You'll find that it's important to make it easy to edit the HTML.

The simplest data organizes data into rows (horizontal) and columns (vertical).

HTML Table MarkUp:
HTML TAG Purpose
<TABLE>Text goes here</TABLE>:
Sets up and closes table Tag surrounds the table content
<TR> Text goes here </TR>:
Table row command Tag defines each row in the table
<TD> Text goes here </TD>:
Table data command Defines each cell in each row of data
<caption>Text goes here </caption>:
Caption tag Places text above or below a table as a label. Must use after <table> tag and before <tr> or <td> tags.
<TH> Text goes here </TH>:
Table header tag Used to create heads in a table by making the content bold and centered

TABLE ATTRIBUTES
Align=left, center, right:
Works with various table tags to help you align the elements.
Align used with <TABLE>
· EXAMPLE: <TABLE ALIGN=CENTER> Sets the alignment for the table to the rest of the page (default alignment is left)
· Align with <CAPTION> specifies how the caption should be aligned to the table itself (default alignment is center)
· Use align with <TR>, <TD> or <TH> tags Defines how the content within table cells is aligned.
· When you set an alignment for a <TR> tag, it sets the alignment for all the cells in that row.
· When you set the alignment for a <TD> tag, then it only affects that table cell.
· The setting set with the <TD> command will override any setting that you give with <TR>.

Border=number:
This will set the border around a table in pixels. If you don't want a border, the code would be: <table border=0>
Cellpadding=number:
This basically helps builds white space between the content in your cells by specifying the amount between the outside of the cell and its content. The default value is 1 pixel.
Cellspacing=number:
This adds space between cells. The default is 1 pixel.
Width=(number or percent)
· This attribute sets the width of a table in either pixels or as a percentage of a browser's display area.
· The width command also works within the <TH></TH> and <TD></TD> tags to assign a certain pixel-width or percentage to a table cell.
· Most tables are better off being set with percentages so that they scale according to a user's browser.
Valign
· This attribute is used with the <TR>, <TH> or <TD> tags to vertically align the contents of the table to the top, middle or bottom of the cell. The default value for this is middle.
Nowrap
Use the nowrap command when you want the content in a cell to stay in one cell and not wrap to the next line.
Colspan=number
Colspan lets you create a single table cell that spans more than one column. Use with the <TD> or <TH> tag.
Rowspace=number
Rowspan lets you create a single table cell that spans more than one row. Use with the <TD> or <TH> tag.
Bgcolor-color (or number)
Use this with <TD> to fill in the background color of table cells.

EXERCISE 2: CREATE THIS TABLE BY TYPING IN THIS TEXT
1. Simple table with two columns and three rows. The first columns have the headers. The second column contains the data.
Start with:
<html>
<body>
<table>
<tr> (defines the beginning of the first row.
There will be two elements in the first row - a table head and table data
<th>Creates a bold face tag for the head
<td> is just a regular cell
Press return and tab the rows to distinguish them from one another. Don't forget to close the tag. You don't have to, but the code feels more manageable if you do.

<th>San Francisco</th>
<td>800,000</td>
</tr>
<tr>
<th align="left">New York</th>
<td>9,000,000</td>
</tr>

<tr>
<th align="left">Beijing</th>
<td>1,000,000,000</td>
</tr>

</table>
</body>
</html>

The <th> tag automatically centers the text. To change the alignment add the <align="left"> attribute after the tag.

EXERCISE 3: Put header cells across the top of the table:

You would define all the headers in the first row:

<html>
<body>
<table>
<tr align="left">
<th>San Francisco</th>
<th>New York</th>
<th>Beijing</th>
</tr>
<tr>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>

</table>
</body>
</html>

To align all the headers to the left, use the tr align="left" attribute.

EXERCISE 4: PUT HEADERS AT THE TOP AND ON THE LEFT
<html>
<body>
<table>
<tr>
<td><br>CREATE AN EMPTY CELL TO SPACE OVER TO HEAD
<th>San Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

EXERCISE 5: ADDING A CAPTION TO YOUR TABLE.
Type <caption> outside of any row or cell tags.
align=direction (can be right, bottom, top or left. Top is the default)

<caption><font size="5" face="arial"><b>POPULATION GROWth</b></font></caption>

EXERCISE 6: ADDING A BORDER
A border help the table be more readable. You can also change the border color. These are attributes of the table tag. (With no bordercolor tags, the browser will usually shade the border based on the background color)

<html>
<body>
<table border="2" bordercolor="0000CC">
<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>
<tr align="left">
<td><br>
<th>San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

EXERCISE 7: SPANNING A CELL ACROSS TWO OR MORE COLUMNS
Many people use tables to implement a more difficult design in their Web site because it allows precise placement of graphics. You need to use the colspan option to do this, though.

TO SPAN A CELL ACROSS TWO COLUMNS
Once you get to the cell that you need to span across two columns, you add the colspan attribute and then designate the number of cols. You will have one less cell to define in this tr when you span a column.

<html>
<body>
<table border="2" bordercolor="0000CC">
<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>
<tr><td></td>
<th colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<td><br>
<th>San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

EXERCISE 8: SPANNING A CELL ACROSS TWO OR MORE ROWS

<html>
<body>
<table border="1" bordercolor="0000CC">
<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>
<tr> <td rowspan="2">COUNTRIES OF ORIGIN</td>
<th colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<td></td> (MUST DELETE THIS EMPTY CELL BECAUSE THE rowspan TAKES IT UP)
<th>San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1989</th>
<td>500,000</td>
<td>900,000</td>
<td>8,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

EXERCISE 8: CHANGING A TABLE'S WIDTH AND HEIGHT
Use the width and height attributes to resize the whole table or to define the dimensions of particular cells. These are attributes of the table and td tags. Width and height are either absolute values or percentages that indicate how big the table should be with respect to the full window size.

USE 200 and 300

USE 80% and 50%

I use percentage more often because it allows the table to scale to the user's window size.

<html>
<body>
<table border="1" bordercolor="0000CC" width="200" height="400">
<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>
<tr> <td rowspan="2">COUNTRIES<br>OF ORIGIN</td>
<th colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<th>San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

NOTE: You can't make the table too small for the contents. The browser will just ignore the values you've set.

Center the table by adding align="center" in the table tag.

EXERCISE 9: CHANGING A CELL'S SIZE
You can change the width and height of a cell, too. Remember that changing a cell's size will effect the size of all the cells in that row or column.

<html>
<body>
<table border="1" bordercolor="0000CC" width="80%" height="60%">
<caption><font size="5" face="arial"><B>POPULATION GROWth</B></font></caption>
<tr> <td rowspan="2" width="20">COUNTRIES<br>OF ORIGIN</td>
<th colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<th>San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr>
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

EXERCISE 10: ALIGNING THE CONTENTS OF CELLS

Using the align and valign attributes

1. Aligning contents of cells horizontally by using the tr, th or td tag.

align=direction(left, center, right or justify)

<html>
<body>
<table border="1" bordercolor="0000CC" width="80%" height="60%" align="center">
<caption><font size="5" face="arial"><B>POPULATION GROWTH</B></font></caption>
<tr> <td rowspan="2" width="200">COUNTRIES<br>OF ORIGIN</td>
<th colspan="2">UNITED STATES</th>
</tr>
<tr align="left">
<th width="200">San<br>Francisco</th>
<th> New York</th>
<th>Beijing</th>
</tr>
<tr align="center">
<th>1988-1990</th>
<td>500,000-700,000</td>
<td>900,000-1,000,000</td>
<td>8,000,000-9,000,000</td>
</tr>
<tr>
<th>1995-1996</th>
<td>700,000</td>
<td>1,200,000</td>
<td>900,000,000</td>
</tr>
<tr>
<th>2001-2002</th>
<td>800,000</td>
<td>1,000,000</td>
<td>1,000,000,000</td>
</tr>
</table>
</body>
</html>

To Align Vertically to the cell's edges.

VALIGN=direction (top, middle, bottom or baseline)

<tr valign=bottom>

EXERCISE 11: BACKGROUND COLOR AND IMAGE
Changing a cell's color

You can change the color of one or more cell's to set off important information.

1. Within the td or th tag, use the bgcolor="######"

You can change the color as many times as you want.
Explorer supports the bgcolor in the table tag for changing the background of the whole table.

Using a background image

<table background="imagename.gif">

EXERCISE 12: SPACING AND PADDING THE CELLS

Cellspacing adds space between the cells, making the table bigger without changing the size of individual cells.

<table callspacing="N" where "n" is the number of pixels desired between each cell

Default for cell spacing is 2 pixels

Cellpadding adds space around the contents of the cell, pushing the walls of the cell outward.

CELLPADDING="N" number of pixel desired between the contents and the walls of the cell.

Default for cell padding is 1 pixel.

EXERCISE 13: CONTROLLING LINE BREAKS
The browser will automatically break the text in your columns and rows as it decides on the width of your cells. If you want words to stay on particular lines, though, you can specify nowrap.

Inside the <td> or <th> cell type nowrap.

Homework: PULLING IT ALTOGETHER.

Create the following table. Here are suggestions on how to approach creating a complicated table:

MAPPING OUT A TABLE
Setting up complicated tables or designing your site in tables can be confusing. I would recommend mapping out your table on paper before you begin.

1. Sketch the table
2. Divide the table into rows and columns
3. Mark the cells that will span more than one column or row
4. Count the number of cells in each row. There should be as many cell definitions (TD) in each row as there are columns.
5. Once you have the table straight, write the code.

Start by printing out the table and them marking it up.

<back to top>