Table Sampler


I use tables all the time on my site. I made this sampler to help me remember how to formate tables. You should be able to highlight the code and copy it, then alter it to fit your needs.

I have a macro of a basic table that I start from, then alter to fit my needs. I use a table on just about every page I make, often just to make sure that there are margins between the contents of the webpage, and the right and left side of webpage.

 By using my basic table I start with I was able place the contents of this page in the middle 90% of the page. This leaves margins on the side. This is the html I used:

<TABLE WIDTH="90%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0">
 <TR>
  <TD>
   CONTENTS OF THE WEB PAGE HERE 
  </TD>
 </TR>
</TABLE>


I can take the same basic TABLE to show a row of graphics like this:

By Using this HTML:

 

<TABLE ALIGN="CENTER" CELLPADDING="0" CELLSPACING="40" BORDER="0">
<TR>
<TD><IMG SRC="sarah.gif WIDTH=117 HEIGHT=169 BORDER=0> </TD>
<TD><IMG SRC="kyrabear.gif" WIDTH=221 HEIGHT=102 BORDER=0></TD>
<TD><IMG SRC="kelcey.gif" WIDTH=103 HEIGHT=104 BORDER=0></TD>
</TR>
</TABLE>

I deleted the WIDTH="X%" & gave a numerical value of 40 for the cellspacing in order to space the three graphics. If I wanted to have more space between the graphics, I would use a higher cellspacing numerical value.


By adding an extra graphic and <TR></TR> I can put these graphics into a table with two rows. Remember <TD></TD> is used for CELLS across & <TR></TR> is used for ROWS.

Here's the html code for the 

<TABLE ALIGN="CENTER" CELLPADDING="0" CELLSPACING="40" BORDER="0">
<TR>
<TD><IMG SRC="sarah.gif" WIDTH=117 HEIGHT=169 BORDER=0> </TD>
<TD><IMG SRC="exphappybearyb.gi" WIDTH=99 HEIGHT=137 BORDER=0></TD>
<tr>
</tr>
<TD><IMG SRC="kelcey.gif" WIDTH=103 HEIGHT=104 BORDER=0></TD>
<TD><IMG SRC="dancing_nancy.gif" WIDTH=81 HEIGHT=116 BORDER=0></TD>
</TR>
</TABLE>

By changing the values of any part of my basic table and adding <tr></tr> or <td></td>, you can make just about any table possible Here are some other examples of tables you might find useful.


USING BORDER TAGS
Peace Optomism Love
Dreams Hope Joy 

<TABLE BORDER="2">
 <TR>
  <TD> Peace </TD> 
  <TD> Optomism </TD> 
  <TD> Love </TD>
 </TR>
 <TR>
  <TD> Dreams </TD>
  <TD> Hope </TD> 
  <TD> Joy </TD>
 </TR>
</TABLE>
</TD>

TIP - If you are using a certain FONT for your page, you must use the HTML for that FONT inbetween each new <TD></TD> Example: 
    <TD> <FONT SIZE=3 FACE="Comic Sans MS"> Peace </FONT></TD> 
        <TD> <FONT SIZE=3 FACE="Comic Sans MS"> Optomism </FONT></TD>  


<TABLE BORDER="6">
 <TR>
   <TD> Top Row 1 </TD> 
   <TD> Top Row 2 </TD>
 </TR>
 <TR>
   <TD> Middle Row 3 </TD>
   <TD> Middle Row 4 </TD>
 </TR>
 <TR>
   <TD> Bottom Row 5 </TD> 
   <TD> Bottom Row 6 </TD>
 </TR>
</TABLE>
Top Row 1 Top Row 2
Middle Row 3 Middle Row 4
Bottom Row 5 Bottom Row 6

USING CELLPADDING & CELLSPACING:

Blues Rock'n Roll
Jazz Folk
Blue Grass Classical 
<TABLE BORDER="2" CELLPADDING="30">
 <TR>
  <TD> Blues </TD> 
  <TD> Rock'in Roll </TD> 
  </TR>
 <TR>
  <TD> Jazz </TD>
  <TD> Folk </TD>
  </TR>
 <TR>
  <TD> Blue Grass </TD> 
  <TD> Classical </TD>
 </TR>
</TABLE>



<TABLE BORDER="2"
CELLPADDING="10" CELLSPACING="10"> 
<TR>
<TD> Revolution </TD>
<TD> 1776 </TD>
</TR><TR>
<TD> Liberty </TD>
<TD> Justice </TD>
</TR>
</TABLE>
Revolution 1776
Liberty Justice

ADDING BACKGROUND COLOR 


<TABLE ALIGN="CENTER" BGCOLOR="#FAE4CE" BORDER="2" CELLPADDING="8" CELLSPACING="8">
<TR>
<TD><IMG SRC="misa.gif" WIDTH=420 HEIGHT=90 BORDER=0></TD>
</TR>
</TABLE>


USING COLOR WITH THE <TD></TD> TAGS
Red Purple
Yellow Blue 

<TABLE WIDTH="70%" ALIGN="center" 
CELLPADDING="15"CELLSPACING="0" BORDER="2">
<TR>
<TD BGCOLOR ="#FF6666"> Red </TD>
<TD BGCOLOR="#CC33FF"> Purple </TD>
</TR><TR>
<TD BGCOLOR="FFFF99"> Yellow </TD>
<TD BGCOLOR="#6666FF"> Blue </TD>
</TR>
</TABLE>

TIP To get just the right color, use my chart to get the correct color codes.

USING COLOR WITH THE <TR></TR> TAGS
<TABLE WIDTH="70%" ALIGN="center" 
CELLPADDING="15" CELLSPACING="0" BORDER="2">
<TR BGCOLOR="#33CC66">
<TD> Green </TD>
<TD> Green </TD>
<TD> Green </TD>
</TR>
<TR BGCOLOR="#FF9966">
<TD> Orange </TD>
<TD> Orange </TD>
<TD> Orange </TD>
</TR>
<TR BGCOLOR="#FFCCFF">
<TD> Pink </TD>
<TD> Pink </TD>
<TD> Pink </TD>
</TR>
</TABLE>
Green Green Green
Orange Orange Orange
Pink Pink Pink
BACKGROUNDS

Change BGCOLOR="X" to BACKGROUND="X" & now you can have a specific background in the table cell/cells,



<TABLE ALIGN="CENTER" BACKGROUND="tablesbck.jpg" BORDER="2" CELLPADDING="8" CELLSPACING="8">
<TR>
<TD><IMG SRC="IMG SRC="jade_dance.gif" WIDTH=154 HEIGHT=141 BORDER=0></TD>
</TR>
</TABLE>


<TABLE WIDTH="300" HEIGHT="300" ALIGN="center" 
CELLPADDING="15"CELLSPACING="2" BORDER="5">
<TR>
<TD BACKGROUND ="tablesbk.jpg"></TD>
<TD BACKGROUND="tablesbk1.jpg"></TD>
</TR><TR>
<TD BACKGROUND="tablesbk2.jpg"></TD>
<TD BACKGROUND="#tablesbk3.jpg"></TD>
</TR>
</TABLE>

USING BACKGROUNDS WITH THE <TR></TR> TAGS
<TABLE WIDTH="280" HEIGHT="280" ALIGN="center" 
CELLPADDING="15" CELLSPACING="4" BORDER="2">
<TR BACKGROUND="tablesbk5.jpg">
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR BACKGROUND="tablesbk6.jpg">
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR BACKGROUND="tablesbk7.jpg">
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>


USING <COLSPAN> & <ROWSPAN> TAGS WITH <TH> TAGS


My Favorite Movies
Comedy Drama
Dr. Strangelove Lion in Winter
Being John Malkovich Casablanca
Blazing Saddles Goodfellas 

<TABLE BORDER CELLPADDING="10">
<TR>
<TH ALIGN="center" COLSPAN="3" 
scope="colgroup"> 
My Favorite Movies </TH> 
</TR>
<TR>
<TH> Comedy </TH>
<TH> Drama </TH>
</TR>
<TR>
<TD> Dr. Strangelove </TD>
<TD> Lion in Winter </TD>
</TR>
<TR>
<TD> Being John Malkovich </TD> 
<TD> Casablanca </TD>
</TR>
<TR>
<TD> Blazing Saddles < /TD>
<TD> Goodfellas </TD>
</tr> 
</table>


<TABLE ALIGN="left" CELLPADDING="10" 
CELLSPACING="3" BORDER="1">
<tr>
<td rowspan="4"> BEST BANDS </td>
<td rowspan="2"> 1960s </td>
<td> Beatles </td>
<td> Greatful Dead </td>
</tr> 
<tr> 
<td> The Bryds </TD> 
<td> The Doors </TD> 
</tr>
<tr>  
<td rowspan="2"> 1970s </td> 
<td> The Greatful Dead </td> 
<td> Little Feat </td> 
</tr> 
<tr> 
<td> Moody Blues </TD> 
<TD> Crosby Stills & Nash</TD> 
</tr> 
</table>
BEST
BANDS		 1960s Beatles Greatful
Dead
Bryds Doors
1970s Greatful
Dead		 Little
Feat
Moody
Blues		 Crosby
Stills
& Nash
WIDTH, ALIGN AND VALIGN TAGS

center right left
top bottom center 

<TABLE WIDTH="300" HEIGHT="300" BORDER="3">
<TR WIDTH="150">    
<TD WIDTH="100" ALIGN="center"> center </TD>
<TD WIDTH="100" ALIGN="right"> right </TD>
<TD WIDTH="100" ALIGN="left"> left </TD>
</TR>
<TR WIDTH="150">
<TD WIDTH="100" VALIGN="top"> top </TD>
<TD WIDTH="100" VALIGN="bottom"> bottom </TD>
<TD WIDTH="100" VALIGN="center">  center </TD>
</TR>
</TABLE>

Knowing how to use TABLE tags has helped me make nice looking web pages. On many of my pages I find that I use Table within Tables within tables to get the look I want.

Check out my Tables Within Tables (nesting) page for an example & the directions I used to make that page. I more useful pages to help with building your site that can be found near the bottom of my SITEMAP.



       
HOME           SITEMAP