Andreas Ramos | Professor of Digital Marketing | See andreas.com

My HTML Code Guide

Willy the Cat Text Links
Crosslinks
Tables
Characters
Go to top

Links...

  • Link to another site: Go to Google.com
    Here's <A HREF="https://www.google.com">Google.com</A>
  • Link to another site and open in a new browser: Go to Twitter.com
    Here's <A HREF="https://twitter.com" target="_blank">Twitter.com</A>
  • Send e-mail: Send me an e-mail
    Send us an <A HREF="mailto:andreas@andreas.com?subject=Hello%2Bto%2Byou">e-mail</A> (Use "%2B" in the code to create spaces in the email's subject line.
Go to top

Cross Links...

This creates links which leap into a document to the word "WEB" or "how".

Use this to create a table of contents or a "Let's go to top of page," etc.

<A NAME="web">Anchor for Info on Webs.</A>

Lorem ipsum dolor sit amet, con secteteur adipsicing elit, sed diam nonnumy nibh euisnod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wise enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo con sequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.

Vel illum dolor eu feugiat mulla facilsi at vero eos et accusm et ius to odio dignessim qui blandt prae sent luptatum zzril delenit aigue duos dolore et mosestias exceptur sint occaecat cupidtat not simil pro vident tempor sunt in culpa qui officia desrunt mollit aniom ib est abor un et dolor fuga. Et harumd dereud facilis est er expedit distint. Nam liber tempor cum soluta nobis eligent option congue nibil impediet doming id quod maxim plecat facer possum omnis voluptas assumenda est, mnis repellend.

<A NAME="how">Anchor for "How to Find a Site.</A>

Lorem ipsum dolor sit amet, con secteteur adipsicing elit, sed diam nonnumy nibh euisnod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wise enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo con sequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.

Vel illum dolor eu feugiat mulla facilsi at vero eos et accusm et ius to odio dignessim qui blandt prae sent luptatum zzril delenit aigue duos dolore et mosestias exceptur sint occaecat cupidtat not simil pro vident tempor sunt in culpa qui officia desrunt mollit aniom ib est abor un et dolor fuga. Et harumd dereud facilis est er expedit distint. Nam liber tempor cum soluta nobis eligent option congue nibil impediet doming id quod maxim plecat facer possum omnis voluptas assumenda est, mnis repellend.

Go to top

Special Characters: ISO 8859-1

You may often need special characters that are not on your keyboard. There are two systems: Code and Entity. Entity is easy. Place an ampersand, add the abbreviation for the character (such as "amp" for ampersand), and close with a semicolon.

For example, to produce an ampersand (&), type &amp; in your HTML and it will appear as "&" in your browser.

Short Table With the Most Useful Characters:

Name Char Code Entity
Quotation " &#34; &quot;
Ampersand & &#38; &amp;
Less-than &#60; &lt;
Greater-than &#62; &gt;
Angle bracket left « &#171; &laquo;
Angle bracket right » &#187; &raquo;
Inverted exclamation ¡ &#161; &iexcl;
Inverted question ¿ &#191; &iquest;
Cent ¢ &#162; &cent;
Pound £ &#163; &pound;
Currency ¤ &#164; &curren;
Yen ¥ &#165; &yen;
Pipe ¦ &#166; &brvbar;
Section § &#167; &sect;
Copyright © &#169; &copy;
Registered ® &#174; &reg;
Middle dot · &#183; &middot;
Fraction 1/4 ¼ &#188; &frac14;
Fraction 1/2 ½ &#189; &frac12;
Fraction 3/4 ¾ &#190; &frac34;
Superscript 1 ¹ &#185; &sup1;
Superscript 2 ² &#178; &sup2;
Superscript 3 ³ &#179; &sup3;
Degree ° &#176; &deg;
Multiplication × &#215; &times;
Division ÷ &#247; &divide;
Plus-or-minus ± &#177; &plusmn;

A Complete List of ISO 8859-1 Characters.


Go to top

A Guide to HTML Tables

The basic table
A B C
D E F 
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Two examples of row span
Item 1 Item 2 Item 3
Item 4 Item 5 
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item
7</TD>
</TR>
</TABLE>
ColSpan
Item 1 Item 2
Item 3 Item 4 Item 5 

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item
5</TD>
</TR>
</TABLE>
Table headers
Head1 Head2 Head3
A B C
D E F 
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH>
<TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Colspan and headers
Head1 Head2
A B C D
E F G H 
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>
Multiple headers and colspan
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H 
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>
Side headers...
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item
3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item
6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item
9</TD></TR>
</TABLE>
Side headers and rowspan...
Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11 
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item
3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item
7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item
3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
Table with everything...
Average
HeightWeight
Gender Males1.90.003
Females1.70.002 
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH></TD>
</TR>
<TR>
<TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR>
<TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>
Examples with rowspan and Colspan
A 1 2
3 4
C D 
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>

Adjusting margins and borders...

Tables without borders
Item 1 Item 2 Item 3
Item 4 Item 5 
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item
2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Table with border="10"
Item 1 Item 2
Item 3 Item 4 
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
Cellpadding and Cellspacing
A B C
D E F 
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F 
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F 
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C
D E F 
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Alignment, captions, and subtitles

Multiple lines in a table
January February March
This is cell 1 Cell 2 Another cell,
cell 3
Cell 4 and now this
is cell 5		 Cell 6 
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
ALIGN="LEFT|RIGHT|CENTER" can be applied to individual cells or whole rows
January February March
all aligned center Cell 2 Another cell,
cell 3
aligned right aligned to center default,
aligned left		 
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>
valign="top|middle|bottom" can be applied to individual cells or wholerows
January February March
all aligned to top and now this
is cell 2		 Cell 3
aligned to the top aligned to the bottom default alignment,
center		 
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR vALIGN="top">
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD vALIGN="top">aligned to the top</TD>
<TD Valign="bottom">aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>
Caption="top|bottom"
A top CAPTION
January February March
This is cell 1 Cell 2 Another cell,
cell 3		 
<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
A bottom CAPTION
January February March
This is cell 1 Cell 2 Another cell,
cell 3		 
<TABLE BORDER>
<CAPTION align="bottom">A bottom CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
Nested tables: Table ABCD is nested inside table 123456
1 2 3
A B
C D
4 5 6 
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>

Table widths

Basic 50% width
Width=50%Width=50%
34 
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Item width affects cell size2
34 
<TABLE BORDER WIDTH="50%">
<TR><TD>Item width affects cell
size</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
WIDTH=100%This is item 2
34 
<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Centering a table
A B C
D E F 
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
Table widths and nested tables
Item 1Item 2
Item AItem B
Item 4 
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
Go to top