LESSON 3: COLORS AND TABLES

< Back to table of contents
<Previous lesson              Next lesson >

HTML RESOURCES MATERIAL FOR GETTING STARTED:
Online HTML Reference Guide

On the Web:
· Webmonkey (www.webmonkey.com)
· HTML writer's guild (www.hwg.org)
· CNET's Builder.com (builder.cnet.com)
· World Wide Web Consortium (www.w3c.org)
· Lynda.com (www.lynda.com)

Printed material:
Elizabeth Castro, HTML 4.0 for the World Wide Web: Visual QuickStart Guide, PeachPit Press.

Today's concepts:
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.

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.

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.

<back to top>