Web Page Help >>> HTML Tables

The <TABLE> tags, supported by most browsers, include BORDER, CELLPADDING, CELLSPACING, and WIDTH. You can assign a number to BORDER to specify the width, in pixels, of the outside table border. You can also assign a number to CELLPADDING defining the space (in pixels) between the cell contents and the cell borders, while CELLSPACING defines the space between the cells (the width of the borders).

Finally, the WIDTH attribute sets the width of the entire table. This can be expressed as a number (meaning pixels) or as a percentage width of the entire displayed screen.

This page shows a few examples of tables, together with the HTML source code to produce it. Note: The HTML coding that is 'showing' on this page is 'written differently' so that it CAN show here. You cannot copy and paste these examples into your document - you must retype as shown, print this page out if you need an example as you are doing your page.

thanks for supporting + visiting our sponsors


Tables + the HTML source code

Example: plain (no borders)
3 cells accross, 4 rows of cells down

Item Aitem aaItem AAA
Item BItem BB(this is BBB)
Item C-CC-*CCC*
Item DItem DDItem DDD

The entire table, consisting of one or more rows,
is surrounded by the tags
<table> and </table>.

Each row of cells (listed in left-to-right order)
is surrounded by the tags
<tr> and </tr>.

The contents of each cell are surrounded by
the pair of tags <td> and </td>.

 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*		 
<table>    <tr>
      <td>Item A</td>
      <td>Item AA</td>
      <td>Item AAA</td>
   </tr>
   <tr>
      <td>Item B</td>
      <td>Item BB</td>
      <td>(this is BBB)</td>
   </tr>
   <tr>
      <td>Item C</td>
      <td>-CC-</td>
      <td>*CCC*</td>
   </tr>
   <tr>
      <td>Item D</td>
      <td>Item DD</td>
      <td>Item DDD</td>
   </tr>
</table>

thanks for supporting
+ visiting our sponsors

Example: with border and cellpadding

Item A Item AA Item AAA
Item B Item BB (this is BBB)
Item C -CC- *CCC*
Item D Item DD Item DDD
 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
 
<table border=3 cellpadding=5>
   <tr>
      <td>Item A</td>
      <td>Item AA</td>
      <td>Item AAA</td>
   </tr>
   <tr>
      <td>Item B</td>
      <td>Item BB</td>
      <td>(this is BBB)</td>
   </tr>
   <tr>
      <td>Item C</td>
      <td>-CC-</td>
      <td>*CCC*</td>
   </tr>
   <tr>
      <td>Item D</td>
      <td>Item DD</td>
      <td>Item DDD</td>
   </tr>
</table>

Item A Item AA Item AAA
Item B Item BB (this is BBB)
Item C -CC- *CCC*
Item D Item DD Item DDD

Above is the original 3 column, 4 row table,
below, same table, with example: empty cells

Item AA Item AAA
Item B Item BB
Item C -CC-
Item D  
Empty cells don't even get a border
-- unless you use the special character
&nbsp; (nonbreaking space)
as a placeholder in the cell.

Look at the last 'empty' cell,
and look at the blue colored coding.
 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*		 
<table border=3 cellpadding=5>
   <tr>
      <td> </td>
      <td>Item AA</td>
      <td>Item AAA</td>
   </tr>
   <tr>
      <td>Item B</td>
      <td>Item BB</td>
      <td> </td>
   </tr>
   <tr>
      <td>Item C</td>
      <td>-CC-</td>
      <td> &nbsp; </td>
   </tr>
   <tr>
      <td>Item D </td>
      <td>  </td>
      <td> &nbsp; </td>
   </tr>
</table>
Item A Item AA Item AAA
Item B Item BB (this is BBB)
Item C -CC- *CCC*
Item D Item DD Item DDD

Above is the original 3 column, 4 row table,
below, same table, with example: colspan

Items A, AA Item AAA
Item B Item BB (this is BBB)
Item C Items CC and CCC
The items labelled D, DD, and DDD
Using the option colspan=2
inside a <td> or <th> tag
makes the cell as wide as 2
'normal' cells. The value of
colspan can be any number
up to the full number of
columns in the table.
 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*		 
<table border=3 cellpadding=5>
   <tr>
      <td colspan=2>Items A, AA</td>
      <td>Item AAA</td>
   </tr>
   <tr>
      <td>Item B</td>
      <td>Item BB</td>
      <td>(this is BBB)</td>
   </tr>
   <tr>
      <td>Item C</td>
      <th colspan=2>Items CC and CCC</th>
   </tr>
   <tr>
      <td colspan=3>The items labelled
                D, DD, and DDD</td>
   </tr>
</table>
Item A Item AA Item AAA
Item B Item BB (this is BBB)
Item C -CC- *CCC*
Item D Item DD Item DDD

Above is the original 3 column, 4 row table,
below, same table, with example: colspan and rowspan

Items A,
B		 Items AA, AAA
Items BB, BBB
Item C CC,DD *CCC*
Item D Item DDD
You can mix colspan and rowspan
in the same table, but, be careful to
eliminate unwanted cells.
 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
 
<table border=3 cellpadding=5>
   <tr>
      <td rowspan=2>Items A,<br>B</td>
      <td colspan=2>Items AA, AAA</td>
   </tr>
   <tr>
      <th colspan=2>Items BB, BBB</th>
   </tr>
   <tr>
      <th>Item C</th>
      <td rowspan=2> CC,DD </td>
      <td>*CCC*</td>
   </tr>
   <tr>
      <td>Item D</td>
      <td>Item DDD</td>
   </tr>
</table>

Example: tables within a table -- The contents of a cell may be another table.

A1 A2
A3 A4
 AA AAA
B BB BBB
C
C1 C2
C3 C4
 CCC

 

 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
 
<table border=3 cellpadding=5>
   <tr>
      <td><table border>
        <tr> <td>A1</td>
        <td>A2</td> </tr>
        <tr> <td>A3</td>
        <td>A4</td> </tr>
        </table></td>
      <td>AA</td>
      <td>AAA</td>
   </tr>
   <tr>
      <td>B</td>
      <td>BB</td>
      <td>BBB</td>
   </tr>
   <tr>
      <td>C</td>
      <td><table cellpadding=4>
        <tr> <td>C1</td>
        <td>C2</td> </tr>
        <tr> <td>C3</td>
        <td>C4</td> </tr>
        </table></td>
      <td>CCC</td>
   </tr>
</table>

Example: the WIDTH attribute

50% 35% 15%
A B C
>D E F

 

<Table Width=50%> specifies a table will be 50% of the full width of the browser's window (and the actual width will vary depending on your visitor's resolution and size of the monitor on their computer.)

<TH Width=50%> (or TD) specifies that the cell be 50% (35%/15%) of the full table width.

 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*		 
<table width=50%
  border=3
  cellpadding=2>
<tr>
 <TH WIDTH=50%>
        50%</TH>
 <TH WIDTH=35%>
        35%</TH>
 <TH WIDTH=15%>
        15%</TH>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
<tr>
  <td>D</td>
  <th><i>E</i></th>
  <td>F</td>
</tr>
</table>

This 'idea' is simple to use for people who use the left side border background !

Also, there are three other examples on my page about "Page Control">

You put all of your text and graphics into a table that has a width of 70% - 90% (you have to experiment with the width of YOUR side border to get the right percentage) of the window. And, you have to align it "right", to the right side of the screen. The table itself would be 100% of the window long ... but for this example I haven't made it that long.

While your're working on your page, if it makes it easier for you,
make the TABLE BORDER=1
Viewed in your browser, it will look like this 'box' here.
Before you upload your page, change that to TABLE BORDER=0
and it will disappear and your visitors will never see it
(unless they look at your document source coding.)

<DIV ALIGN=right>< TABLE BORDER=0 WIDTH="80%" HEIGHT="100%">
<TR>
<TD> You put <B>all</B> of your text and graphics into a table ...
</TD>< /TR>< /TABLE> </DIV>

Netscape Communicator's editor, and Dreamweaver is about the same. What I do in the editor, is choose "Insert | Table" from the buttons on top, and when a box comes up for a table - put my information in for that (# of rows, # of columns I want). I don't use the "Insert | Tag" command. I'm going to give instructions for putting a table for text, if you're going to use it to keep the words off the side border background.

If you "Insert | Table", the window that comes up to insert the table will show:
Rows (for using to put text in to keep off side border: choose 1 (one)
Columns: choose 1 (one)
Border line Width: for now, choose 1 (one)
Cell spacing: choose 1)
Cell padding: choose 1)
Table Width: choice of % of window, or No. of pixels wide. For use with side border, choose 80% of window
Table Height: gives same choices above, choose 100%
Include caption: don't choose any
Table Alignment: Left - center - Right (choose right)

Then click "apply" and then it will refresh and click "close".

That will put a box on your screen, so that you can start your text. Or, copy text you have done already and paste into that box. Make sure the curser is in the box and blinking, and you're all set to go!

NOW -- WHEN YOU'RE DONE with your text, and you want that table border to "disappear" make sure the curser is blinking somewhere (anywhere) inside of that table, and RIGHT CLICK on the mouse. A menu will come up for the table, and choose "Table Properties". That will show the screen you origionally put your information in. Put your curser in the box for "Border Line Width" and NOW put in 0 (zero). Click apply, and then close. That border edge will disappear.

NOW you're ready to upload your page!

If you're going to work on your page again later, add more stuff, etc. and if you'd be more comfortable "seeing" where your boundaries are, put the curser anywhere in that table and right click. Then, for Border Line Width, choose 1 (one) and then click apply and close. That will show you the "edges". Then, remember to remove them (make them 0-zero again) before you upload the page - so the edges will be invisible to everyone looking at your page.

Example: <pre>preformatting</pre> 

<pre>
$ 10.98  $305.20  $ 29.95  $ 3.16
  11.05   291.80    39.95    0.87
  12.77   290.10    19.95    0.23
  23.51   301.40     9.95    0.79
   7.39   306.90    99.95    1.50
  20.16   295.30    79.95    0.90

</pre>
    You don't need the <table> tag at all
if the the plain text is already properly aligned,
using a fixed-width font;
enclose the preformatted text in
<pre> and </pre> tags.

If it will help you, print this page. The cost of 6 or 7 pieces of paper is a small
cost to have something handy to use and reference whenever you need to. 


Web Page Help / HTML Help + Information © 1999-2008 Roxy Flanagan
HTML Info Hints + Tips HTML tags Basics HTML tags Advanced HTML colors
Tables Page Control Resolution Browser Info Validating HTML
AOL graphics + browser problems Links to More Helpful Information

HTML + Web Page Help Webrings

Looking for graphics? ... this background © 1998 by Roxy M. Flanagan,
available for personal and non profit use in this color, and other colors, in the
Miscellaneous Collection of webpage, email stationery and wallpaper graphics by Roxy's Renditions.

www.AutumnWeb.com SITEMAP

Holiday wallpaper/backgrounds:

Seasons+Nature  wallpaper/backgrounds:

Other Theme  wallpaper/backgrounds:

Valentine/Love . St.Patrick . Easter . Mother's Day . Father's Day . Patriotic . Halloween . Thanksgiving . Christmas

Butterflies . Floral . Nature
Spring . Summer . Fall . Winter

Angels . Christian-Religious . Craft . Miscellaneous . Gem+Jewels . Babies-Kids-Teens . Special Occasions

... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997-2008 by Roxy M. Flanagan + licensors; All Rights Reserved.
Using Roxy's Graphics? See the button choices here. Plus, Add YOUR link!
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Wallpaper : Seasons+Nature : Holidays : Christian : Graphic+Other Rings
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/

Roxy Recommends:
Autumn Web
Web Development
Personal+Business
Custom Web Graphics