Create a design and code it.

HOME >> How to Make a Web page >> Create a design and code it.

Take your design from paper to pixels: how to layout a design using tables.

Creating a Design

Convert Your Design to HTML

Managing Color for the Web

CREATING A DESIGN

Collect Web Sites You Like

Every time you come across a Web site you like, add it to your favorites. Then when you need inspiration, browse through what you have collected.

Sketch the design

Whether on paper or on the computer, the next step in creating a design is to sketch it. This will help you figure out where you would like all the different elements of your page to go.

Think about what graphical elements you can carry throughout the site?

top of page

The easiest way to convert your design into HTML is to use tables. Tables allow you to control where items will appear on a Web page. To do major formatting, tables are needed. Beware that tables can be very tricky and confusing.

When working on complex tables, it is helpful to draw them out first on a sheet of paper, to minimize the confusion.

A helpful tool for designing tables is called the Screen Ruler. It is a ruler that measures the pixels on the monitor. A demo version can be downloaded at http://www.microfox.com/.

A Simple Table

There are three basic tags in any table: <table>, table row <tr>, and table column <td>.

Here is a simple table:

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

There are many attributes for the <table> tag.

<table border="1">
The border attribute for table adds a border to the table in the color gray.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

<table width="100">
The width attribute for table can be expressed in pixels or percentages. A table with width="100" will span 100 pixels. A table with width="100%" will span the entire space available.

<table cellpadding="0">
Cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides. The default value for cellpadding is 2.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

<table cellspacing="0">
Cellspacing makes the border of the table thicker, increasing the distance between the cells. The default value for cellspacing is 2.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

There are also many attributes for the <td> tag.

<td width="100">
The width attribute can be expressed in pixels or percentages. A <td> with width="100" will span 100 pixels. A <td> with width="100%" will span the entire space available.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

<td height="100">
The height attribute can only be expressed in pixels. A <td> with height="100" will span 100 pixels.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

<td align="center">
Add the align attribute to a <td> tag to horizontally align an entire cell. Values include: center, left, or right.

HTML code:

In a browser:

Cell A centered	Cell B left
Cell C right	Cell D default

<td valign="middle">
Add the valign attribute to a <td> tag to vertically align an entire cell. Values include: middle, top, and bottom.

HTML code:

In a browser:

Cell A middle	Cell B top
Cell C bottom	Cell D default

<td colspan="2">
Use the <td> attribute colspan, allows cells to span more than one column.

HTML code:

In a browser:

Cell A	Cell B
Cell C

<td rowspan="2">
Use the <td> attribute rowspan, allows cells to span more than one row.

HTML code:

In a browser:

Cell A	Cell B
	Cell C

<td bgcolor="#990000">
Use the <td> attribute bgcolor, to color the background of a cell.

HTML code:

In a browser:

Cell A	Cell B
Cell C	Cell D

Creating Lines and Colored Backgrounds

To make lines or colored backgrounds, use the bgcolor attribute for <td> in coordination with the width/height attribute for <td>. Note how the left and right lines are made by the rowspan attribute. The code for black is 000000 and the code for white is FFFFFF. (See Managing Color for the Web section.)

HTML code:

<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr><td width="1" rowspan="5" bgcolor="#990000"></td>
<td height="5" bgcolor="#990000"></td>
<td width="1" rowspan="5" bgcolor="#990000"></td> </tr>
<tr><td>Here is my text paragraph. </td></tr>
<tr><td height="1" bgcolor="#990000"></td></tr>
<tr><td height="5" bgcolor="#FFFFFF"></td></tr>
<tr><td height="5" bgcolor="#990000"></td></tr>
</table>

In a browser:


	Here is my text paragraph.

Embedding Tables

There are times when you will find that you need to embed a table within a table. A common need to embed tables is when using one table for layout and another embedded one for text with cellspacing/cellpadding.

Step 1: Layout the outer table first.

HTML code:

<table width="100" border="1">
<tr><td width="50">Inner table will go here.</td>
<td width="50" bgcolor="#990000">I'm a red block. </td></tr>
</table>

In a browser:

Inner table will go here.

I'm a red block.

Step 2: Create the inner table, separately.

HTML code:

<table width="100" border="1" cellpadding="10">
<tr><td>Look at me! I have cellpadding. </td></tr>
</table>

In a browser:

Look at me! I have cellpadding.

Step 3: Embed the inner table.

HTML code:

<table width="100" border="1">
<tr><td width="50">
      <table width="100" border="0" cellpadding="10">
      <tr><td>Look at me! I have cellpadding. </td></tr>
      </table>
</td>
      <td width="50" bgcolor="#990000">I'm a red block. </td></tr>
</table>

In a browser:

Look at me! I have cellpadding.

I'm a red block.

Step 4: Use comments to clarify.

HTML code:

<table width="100" border="1">
<tr><td width="50">
      
      <table width="100" border="0" cellpadding="10">
      <tr><td>Look at me! I have cellpadding. </td></tr>
      </table>
      
</td>
      <td width="50" bgcolor="#990000">I'm a red block. </td></tr>
</table>

In a browser:

Look at me! I have cellpadding.

I'm a red block.

Text in Tables

If style sheets are not used, <font> tags must be used in each separate <td> tag. This is a main reason to switch to style sheets. (See Managing Fonts section.)

top of page

MANAGING COLOR FOR THE WEB

Despite the advances in computers since the beginning of Web page design, there are still only 216 colors that should be used that will display the same color on everyone's computer monitor. And even those 216 are disputed.

Bit-depth	% of Users
True Color (24- and 32-bit)	38%
High Color (16-bit)	56%
256-color	6%

Source: Death of the Websafe Color Palette? (http://webmonkey.wired.com/webmonkey/00/37/index2a.html?tw=design) by David Lehn and Hadley Stern, September 6, 2000

The bit-depth of different computer monitors display colors differently. Using Web safe colors ensures that the Kelly green you see will not look like puke green on someone else's monitor.

To display a color on a Web page, a 6-digit hex-code is used. For example, black is 000000 and white is FFFFFF. Hex-codes can only be made up of these digits and letters: 0,3,6,9,F, and C.

Some Basic Color Guidelines

Color associations are what make us think that red items stop and green items go. Be aware of this when using color. For example don't use red for a button that reads, "Click here for the Next Step." Avoid the color blue for anything other than a hyperlink.

For item differentiation use between three and seven colors to match users short term memory capacity.

top of page

All information compiled and researched by Katie Kleinman (Miller), last updated October 24, 2006. Sources are given when available.

HOME

Resume
About Me
Portfolio
Photos
This Month's Poll
My Stuff
Make a Web Page
I'm a beginner
Basic Tags
Web standards
Create a design
Generate Web traffic
Useful Links
Sites by K. Kleinman
Nike Ads
Links
Site Map

This Month's Poll:

What modern day invention would you give the cavemen?
View results so far.