Website Design (2)

http://www.ironspider.ca/lists/olists.htm

Using Tables as Tables

Example 1

Cell content goes here...

Example 2 - SOURCE CODE

Cell content...

Example 3 - SOURCE CODE

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2

**********************************************************************
Background and Border Color

Example 1 - SOURCE CODE

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

Example 2 - SOURCE CODE

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

**********************************************************************
Table Frames and Rules

These are detailed below:

• frame="frame value" ~ Although not widely used, the frame attribute is officially part of the HTML 4.01 Specification and serves to define exactly how to display the border or 'frame' surrounding your table. To do this, place the frame="frame value" attribute-value pair in your tag where frame value equals one of the following and will display the table sides defined in the respective definition:

  void	No frame is drawn (default value).
  above	Only the top side is drawn.
  below	Only the bottom side is drawn.
  hsides	Only the top and bottom sides are drawn.
  vsides	Only the left and right sides are drawn.
  lhs	Only the left-hand side is drawn.
  rhs	Only the right-hand side is drawn.
  box	All four sides are drawn.
  border	All four sides are drawn.

• rules="rules value" ~ Also not widely used (largely because web authors seldom use tables as tables), the rules attribute will define which lines or rules to draw between rows and columns in your table. To do this, place the rules="rules value" attribute-value pair in your tag where rules value equals one of the following and will display the rules defined in the respective definition:

  none	No rules are drawn (default value).
  groups	Rules drawn between row groups and column groups.
  rows	Rules are drawn between rows only.
  cols	Rules are drawn between columns only.
  all	Rules are drawn between all rows and columns.

Note that the table frame and rules can be drawn in the absence of the border attribute. However if the border attribute is expressed and has a value of "0", it will override any values entered for frame or rules (frame will default to void while rules will default to none).

Example 1 - SOURCE CODE

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

**********************************************************************
Table Width and Alignment

Example 1 - SOURCE CODE

Cell content...

Example 2 - SOURCE CODE

Cell content...

**********************************************************************
Table Cells 1 - Space and Alignment

• Example 1 - (cellpadding="10" cellspacing="10")
  

Example 2A - SOURCE CODE (Default vertical alignment)

Breakfast	Orange juice Toast Black coffee
Lunch	Tuna sandwich Apple
Dinner	Hamburger steak Mashed potatoes Green beans Jello

Example 2B - SOURCE CODE (valign="top" set for left-hand cells)

Breakfast	Orange juice Toast Black coffee
Lunch	Tuna sandwich Apple
Dinner	Hamburger steak Mashed potatoes Green beans Jello

**********************************************************************
Table Cells 2 - Row and Column Span

Example 1A - SOURCE CODE (first table row contains only one cell)

MY DAILY MENU
Breakfast	Orange juice Toast Black coffee
Lunch	Tuna sandwich Apple
Dinner	Hamburger steak Mashed potatoes Green beans Jello

Example 1B - SOURCE CODE (cell spans two columns)

MY DAILY MENU
Breakfast	Orange juice Toast Black coffee
Lunch	Tuna sandwich Apple
Dinner	Hamburger steak Mashed potatoes Green beans Jello

Example 2 - SOURCE CODE (cell spans three rows)

MY DAILY MENU
M o n d a y	Breakfast	Orange juice Toast Black coffee
	Lunch	Tuna sandwich Apple
	Dinner	Hamburger steak Mashed potatoes Green beans Jello

**********************************************************************
Table Cells 3 - Width and Height

Example 1 - SOURCE CODE

Column 1	Column 2
Column 1	Column 2
Column 1	Column 2

Example 2 - SOURCE CODE

Row 1	Row 1	Row 1
Row 2	Row 2	Row 2

**********************************************************************
Bulleted Lists

Example 1 - SOURCE CODE

The following is a bulleted or 'unordered' list of the kinds of lists you can create using HTML:

• Unordered lists (bulleted)
  
• Ordered lists (numbered or alphabetized)
  
• Definition lists (term/definition format)

Example 2 - SOURCE CODE

• Disc
  

• Circle
  

• Square

Example 3 - SOURCE CODE

HTML LISTS AND STYLE TYPES

• Unordered Lists
  
  • Disc bullet
    
  • Circle bullet
    
  • Square bullet
    
• Ordered Lists
  
  • Numbered
    
    • Decimal
      
    • Lowercase Roman numeral
      
    • Uppercase Roman numeral
      
  • Alphabetized
    
    • Lowercase
      
    • Uppercase
      
• Definition Lists
  
  • Term/Definition style
    

**********************************************************************
Numbered and Alphabetized Lists

Example 1 - SOURCE CODE

The three basic steps to creating a web page are:

1. Decide on a subject.
   
2. Acquire the necessary tools and materials.
   
3. Write the HTML source code.

Value	Ordering Style
1	1, 2, 3, ...
i	i, ii, iii, ...
I	I, II, III, ...
a	a, b, c, ...
A	A, B, C, ...

Example 2 - SOURCE CODE

The three basic steps to creating a web page are:

1. Decide on a subject.
   
2. Acquire the necessary tools and materials.
   
3. Write the HTML source code

Example 3 - SOURCE CODE

The three basic steps to creating a web page are:

1. Decide on a subject.
   
   • Business
     
   • Family
     
   • Hobby
     
2. Acquire the necessary tools and materials.
   
   • Web browser
     
   • Text editor or HTML editor
     
   • Graphics and clip-art
     
   • Graphics editor
     
3. Write the HTML source code.

Example 4 - SOURCE CODE

Putting a Web Page on the Internet

To create a web page, you must first:

1. Decide on a subject.
   
2. Acquire the necessary tools and materials.
   
3. Write the HTML source code.

Then once you have tested your page in a number of web browsers, you are ready to 'go live'. At this point you would:

4. Find a web host.
   
5. Upload your web page to the web host server.
   
6. Brag to all your friends.

**********************************************************************
Definition Lists

Example 1 - SOURCE CODE

Text Editor

Program that comes with the default installation of most computer operating systems that permits the user to save text to a file stripped of any formatting. Often used by web page authors, beginner and hardcore alike.

HTML Editor

Basically a text editor on steroids facilitating the writing of HTML source code by providing a graphical user interface containing buttons and drop-down menus that allow one to insert commonly used snippets of code.

WYSIWYG Editor

A program which permits the user to create a web page by working 'on top' with the finished product as opposed to working underneath with the HTML source code (WYSIWYG = What You See Is What You Get). Although the easiest to use, WYSIWYG editors quite often produce bloated and junky source code.

Example 2 - SOURCE CODE

File

Opens a drop-down button menu containing a list of commands used to manipulate files, including saving work in progress, opening previously saved files or creating new ones.

Edit

Opens a drop-down button menu containing a list of commands used to edit works in progress including copying, cutting and pasting selections from the work area.

View

Opens a drop-down button menu containing a list of commands used to control the appearance of the graphical user interface.