Designing Christian Web Sites



1,2,3 ABC HTML Made Easy

A Table Tutorial


<TABLE> States you are beginning a Table
</TABLE>States you are ending a Table

<TABLE BORDER="5" CELLSPACING="2" CELLPADDING="3">
BORDER="How large you wish the border to be, from "0" would be no border and up"
CELLSPACING="space between the text and the borders"
CELLPADDING="padding between each cell"
Note: you can change the # of the cellspace and the cellpad too.

<CAPTION> places a caption/heading/title centered above the table. </CAPTION>
or use
<TD ALIGN="CENTER" COLSPAN="5">heading/title<TR>
COLSPAN="The number=how many columns you wish to go across with the heading/tilte"

To go down instead of across
<TD ROWSPAN="3">
ROWSPAN="The number=how many rows you wish to go down"

<TR> Starts a new Table Row </TR>
Note: Just remember column across, row down.

<TD> Table Data where you place information </TD>
Note: Not only the information that you wish to show up, but also what you want the information to look like in the table.

<TD ALIGN = "center"> Centeres the information </TD>
also "left" and "right"

<TD BGCOLOR="#FDF5E6">Will put color in your table (0nly the cell the information is in)</TD
<TD><FONT COLOR="#2F4F4F">Will change the color of your font/letters</FONT>
<TD BGCOLOR="#FDF5E6"><FONT COLOR="#2F4F4F">Colored Background and font together</FONT>

Linking
<TD><A HREF="http://Address/Link goes here">name here</A></TD>

Linking with pictures/graphics
<TD><A HREF="http://Address/Link goes here"><IMG SRC="//Address/picture.gif"></A></TD>

<TD WIDTH="100">words here</TD>
WIDTH="The width of the cell in pixels"
<TD WIDTH="20%">Words here</TD>
WIDTH="the width of the cell in relationship to the screen"


A Basic table with no border:

<CENTER>
<TABLE>
<CAPTION>Heading here</CAPTION>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> INFO HERE </TD>
<TD> INFO HERE </TD>
<TD> INFO HERE </TD>
</TR>
</TABLE>
</CENTER>

Heading here
DATA HERE DATA HERE DATA HERE
INFO HERE INFO HERE INFO HERE

What took place above:

<CENTER> To center the entire table
<TABLE> to begin the table
<CAPTION>Heading here</CAPTION> What you want on top

<TR> beginning a row
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR> Stops the row
Beginning a new column
<TR> beginning a new row
<TD> INFO HERE </TD>
<TD> INFO HERE </TD>
<TD> INFO HERE </TD>
</TR> Stops the row
</TABLE> Stops the Table
</CENTER> Stops the center


Here is an example of what happens when you type in different lengths of words in the Table Data.

Heading here
We type a longer sentance here. shorter here DATA HERE
INFO HERE INFO HERE INFO HERE

It rather throws everything around. To fix that a little you can do the following to line it up a little bit. <TD ALIGN="CENTER">

<CENTER>
<TABLE>
<CAPTION>Heading here</CAPTION>

<TR>
<TD> We type a longer sentance here.</TD>
<TD> A shorter one here </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD ALIGN="CENTER">INFO HERE </TD>
<TD ALIGN="CENTER">INFO HERE </TD>
<TD ALIGN="CENTER">INFO HERE </TD>
</TR>
</TABLE>
</CENTER>

Then you will have this:

Heading here
We type a longer sentance here. A shorter one here DATA HERE
INFO HERE INFO HERE INFO HERE

What happens is that it is centering the text in each column. Mainly though I just wanted you to see what happens. So that when you go to make your table you will have an understanding of why your table looks so messed up, when you use different lengths of data. Okie :)


Changing the Table Data:

<CENTER>
<TABLE>
<CAPTION><B><H2>Heading here</CAPTION>

<TR>
<TD><B> DATA HERE </TD>
<TD><B> DATA HERE </TD>
<TD><B> DATA HERE </TD>
</TR>

<TR>
<TD><I> INFO HERE </TD>
<TD><I> INFO HERE </TD>
<TD><I> INFO HERE </TD>
</TR>
</TABLE>
</CENTER>

Heading here

DATA HERE DATA HERE DATA HERE
INFO HERE INFO HERE INFO HERE

What took place above:

<CENTER> Centered the entire table
<TABLE> Started the table
<CAPTION><B><H2>Heading here</CAPTION> Added B bold and H2 heading size 2

<TR> began a row
<TD><B> DATA HERE </TD> added B bold
<TD><B> DATA HERE </TD>
<TD><B> DATA HERE </TD>
</TR> Stoped the row
Beginning a new column
<TR> began a new row
<TD><I> INFO HERE </TD> added I italic
<TD><I> INFO HERE </TD>
<TD><I> INFO HERE </TD>
</TR> Stoped the row
</TABLE> Stoped the table
</CENTER> Stoped the center

You place tag/arrow < > information after <TD> to make the text inside of the tags do what you want it to do. Then you type what you want to show up in the table. When you are finished make sure you stop the </TD> (TABLE DATA).


A Table Adding border and cell information:

<CENTER>
<TABLE BORDER="5" CELLSPACING="2" CELLPADDING="3">
<CAPTION>Heading here</CAPTION>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

</TABLE>
</CENTER>

Heading here
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE


A Table Using Colspan instead of caption:

<CENTER>
<TABLE BORDER="2" CELLSPACING="1" CELLPADDING="1">
<TD ALIGN="CENTER" COLSPAN="3">I used 3 because there are 3 columns
<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

</TABLE>
</CENTER>

I used 3 because there are 3 columns
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE

You can change the border, cellspacing and cell padding:

<CENTER>
<TABLE BORDER="15" CELLSPACING="5" CELLPADDING="10">
<TD ALIGN="CENTER" COLSPAN="3">I used 3 because there are 3 columns
<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

</TABLE>
</CENTER>

I used 3 because there are 3 columns
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE

Another example making them all the same:

<TABLE BORDER="25" CELLSPACING="25" CELLPADDING="25">

Note: I am just showing the first part this time. But I am using all of the information to make the actual table. (It drives me crazy when people show examples and don't let you know what they actually did, like when they center something in the file manager but don't tell you they centered it.)

I used 3 because there are 3 columns
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE

You can change the Entire Background color:

<TABLE BGCOLOR=#5BD2F9 BORDER="10" CELLSPACING="1" CELLPADDING="10">

I used 3 because there are 3 columns
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE


A table using rowspan:

<CENTER>
<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="3">
<TD ROWSPAN="3">DATA HERE
<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>
<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>
</TABLE>
</CENTER>

DATA HERE
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE


A table using colspan and rowspan:

<CENTER>
<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="3">
<TD ALIGN="CENTER" COLSPAN="3">3 columns<TR>
<TD ROWSPAN="4">4 rows
<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR>
<TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

<TR> <TD> DATA HERE </TD>
<TD> DATA HERE </TD>
</TR>

</TABLE>
</CENTER>

3 columns
4 rows
DATA HERE DATA HERE
DATA HERE DATA HERE
DATA HERE DATA HERE


A Color Table:

<CENTER>
<TABLE BORDER="2" CELLSPACING="1" CELLPADDING="1">
<TD BGCOLOR="#FDF5E6" ALIGN="CENTER" COLSPAN="3"><FONT COLOR="#2F4F4F">Colored Background and font together</FONT>

<TR>
<TD BGCOLOR="#EC00E4"> DATA HERE </TD>
<TD BGCOLOR="#EE5400"> DATA HERE </TD>
<TD BGCOLOR="#0021EC"> DATA HERE </TD>
</TR>

<TR>
<TD><FONT COLOR="#EE5400"> DATA HERE </FONT></TD>
<TD><FONT COLOR="#0021EC"> DATA HERE </FONT></TD>
<TD BGCOLOR="#0021EC"><FONT COLOR="#EE5400"> DATA HERE </FONT></TD>
</TR>

</TABLE>
</CENTER>

Colored Background and font together
DATA HERE DATA HERE DATA HERE
DATA HERE DATA HERE DATA HERE


A Table that Links:

<CENTER>
<TABLE BORDER="10" CELLSPACING="10" CELLPADDING="10">
<TD ALIGN="CENTER" COLSPAN="3"> Linking with words

<TR>

<TD ALIGN="CENTER" WIDTH="100">
<A HREF="123ABC_HTML_ATableTutorial.html"> Table Tutorial</A></TD>

<TD ALIGN="CENTER" WIDTH="100">
<A HREF="123ABC_HTML_ATableTutorial.html"> Table Tutorial</A></TD>

<TD ALIGN="CENTER" WIDTH="100">
<A HREF="123ABC_HTML_ATableTutorial.html">Table Tutorial</A></TD>

</TR>

<TD ALIGN="CENTER" COLSPAN="3"> Linking with Pictures <TR>

<TD ALIGN="CENTER" WIDTH="100">
<A HREF="123ABC_HTML_ATableTutorial.html"> <IMG SRC="a/HeartRed.gif" border=0></A></TD>

<TD ALIGN="CENTER" WIDTH="100">
<123ABC_HTML_ATableTutorial.html">WORD</a><BR> <IMG SRC="a/HeartYellow.gif" border=0></TD>

<TD ALIGN="CENTER" WIDTH="100">
<A HREF="123ABC_HTML_ATableTutorial.html">BOTH<BR> <IMG SRC="a/HeartWhite.gif" border=0></A></TD>
</TR>

</TABLE>
</CENTER>

Linking with words
Table Tutorial Table Tutorial Table Tutorial
Linking with Pictures
WORD
BOTH


Actually it's pretty basic stuff once you know what everything does. Quite the same as your basic HTML. So what would you do with a table? hmmmm... I really don't know but it sure came in handy when I wanted to make a board game on the internet LOL :) Oh and it came in real handy when I wanted to make some graphics go where I wanted them too. I have read that you should put your pages in them and then they will look professional, so if you are that kind of person who likes that kind of thing, Go for it.


Designing Christian Web SitesHTML
Designing Christian Web SitesTables
Designing Christian Web SitesFrames
Designing Christian Web SitesForms
Designing Christian Web SitesGraphics
Designing Christian Web SitesMusicDesigning Christian Web Sites
Designing Christian Web SitesMain Page
Designing Christian Web SitesSite IndexDesigning Christian Web Sites