Website Design / HTML

[rfornal]

TABLE Tag

This is the <TABLE ... > Tag that we discussed previously.

Think of this as setting up or configuring the outer box and background of the entire table.

Here are three of the settings that you will use most frequently:

width="#" - where # is in either pixels or percent.
border=# - where # is the thickness of the border in pixels.
bgcolor=COLOR - where COLOR is the color of the background (same as we used on the BODY Tag).

So, you might enter something like (this is an example ... do not enter it into your pages):

<TABLE width="100%" border=1 bgcolor=lightgreen>

[rfornal]

TR Tag

Here is the most BORING of the three Tags ... Table Row.

There are a few options available, but generally we will not be using them.

So, you will most often enter something like this:

<TR>

[rfornal]

TD Tag

OK, now that you've seen the BORING one, let's see the one that will keep you busy ...

This is the Table Data Tag ... all of your information (Data) will go inside these Open/Close Tags. By information, we are talking about anything that you can display ... at this point, you know how to enter text and images (you can link from within here, too).

There are four options that you will frequently see (the first two you've had already:

1. WIDTH - same as TABLE Tag
2. BGCOLOR - same as TABLE Tag
3. align=NNN - NNN is the horizontal alignment, options are (Left, Center, Right).
4. valign=NNN - NNN is the vertical alignment, options are (Top, Center, Bottom)

I'll give you some time to absorb this before giving you some code to work with ...

[rfornal]

Everything that I have posted here is now on the Wikibooks site ... I should be able to keep it up to date with the posts as I add them from this point. You can use it as a reference or simply print the pages ...

There will be a link on my personal page in the Genealogy section, too ...

http://en.wikibooks.org/wiki/Developing ... _Web-Pages

Sorry, it's only in English ... I can work in hundreds of computer languages, but when it comes to natural languages (beyond English), I wash out ...

[rfornal]

Designing a Table

Let's start with a simple example, here's information from a 1930 US Federal Census Record:

Name: John Fornal
Home in 1930: Glastonbury, Hartford, Connecticut
Age: 42
Estimated Birth Year: abt 1888
BirthPlace: Poland
Relation to Head of House: Head
Spouses's Name: Victoria
Race: White
Parents' Birthplace: View Image
Neighbors: View others on page

Household Members:
Name Age
John Fornal 42
Victoria Fornal 40
Joseph Fornal 15
Stella Fornal 13
Annie Fornal 10
William Fornal 5

As you can see, each line breaks down into two items ... easy to convert to a table.

[rfornal]

... correction

[rfornal]

Designing a Table, Part II

Paste the following code into one of your pages ...

<TABLE><TR>
   <TD>Name:</TD><TD>John Fornal</TD>
</TR><TR>
   <TD>Home in 1930:</TD><TD>Glastonbury, Hartford, Connecticut</TD>
</TR><TR>
   <TD>Age:</TD><TD>42</TD>
</TR><TR>
   <TD>Estimated Birth Year:</TD><TD>abt 1888</TD>
</TR><TR>
   <TD>BirthPlace:</TD><TD>Poland</TD>
</TR><TR>
   <TD>Relation to Head of House:</TD><TD>Head</TD>
</TR><TR>
   <TD>Spouses's Name:</TD><TD>Victoria</TD>
</TR></TABLE>

I cut off the last three lines of the first set of information to save time.

[rfornal]

Designing a Table, Part III

Can you see how this information fits together, how it is nested?

Copy the code you just entered and make a new copy just below it using Notepad. Take the Household Members information provided and see if you can create a table with the information on your own ...

GOOD LUCK

[wldspirit]

I have not attempted these as yet...my new grand - daughter came to visit
and has had me wrapped around her tiny finger......

Will experiment first thing in the morning.......

again, this is a fantastic contribution Bob.....and your hard work is appreciated!!!

DeLisa

[rfornal]

Take your time. I will not be expanding this until late tomorrow earliest, or monday ... give everyone some time to experiement.

Enjoy the little-one - it is the best feeling, when they grab your heart and hold on tight!

[rfornal]

Modifying a Table[/]

Let's change a few things on one of your tables to see what happens ...

Change ... &ltTABLE> to ... <TABLE width="100%" bgcolor=lightblue>

... then ...

Change the first ... <TD> to ... <TD width="50%" bgcolor=yellow align=center>

... did you notice any significant changes.

Combine this with what you learned last Friday and try changing these tables ... create something new ...

[hr]
Let me know how it goes ...

[rfornal]

Here are some color codes (more color sets to the right side) ...

http://bob.fornal.org/Computer/cWhite.htm

... these can be used for ANY of the color/bgcolor values ...

[wldspirit]

The boys are back in school!! One in college, two in high school and I kicked off the fall cleaning today!!

Got up extra early so I could practice the tables..... Went ok....but will take some time to get it down pat..not sure I understand it ....I really like the color codes, and that will work on any computer?? Sorry....but I always thought what you see is what you get.......like how paint has the little color boxes.........limited choices for sure.........

ready when you are!!!!!! and it's great having this all on your site!!!
Lisa

[rfornal]

Unlimited Colors

The colors are unlimited ...

In addition to the named colors, you can use an RGB (Red, Green, Blue) colorset scheme. Instead of using the basic colors BGCOLOR=red, you use a set ... #RRGGBB, where the letters RR=Red, GG=Green, and BB = Blue.

Each color ranges from 00 to FF (hexadecimal); this allows for 256 colors each.

Examples

BGCOLOR="#000000" - this is BLACK
BGCOLOR = "#FFFFFF" - this is WHITE

Try these ...
http://bob.fornal.org/Computer/cWhite.htm

... there are more sets listed on the right side. This is by no means an inclusive list (there are 256x256x256 =16,777,216 possible colors) ...

[hr]
Yes, these color codes will work on any computer that has a browser installed. On some computers, IF they are configured for less colors, it might adjust to the nearest color, but these days that is pretty rare.

[rfornal]

At this point in the process, I would like to list some ideas that I've got for Genealogical pages and get some feedback on the type of pages or site that everyone would like to look at ...

This will determine what we do next.

[hr]
Here's a list that I've come up with and some descriptions (if I think it's needed):

Citizenship Records
Where ancestors emigrated from, where they landed, and where they settled
Weddings and Religious Activities
In Memoriam - Special Memories
Where Our Ancestors Have Lived
Schools and Graduations
Military Service Records
There is tons of information that can be recorded here ...
Collections and Heirlooms
List all heirlooms, including the original owner and how they were passed from generation to generation.
Family Reunions
Family Traditions
Events to Remember
Oral Family History
Photographs

Always strive to document these areas in a story form. As researchers, we often get tied into who, what, when, and often where. We must remember to document the why in a way that will make future generations interested in following in our "footsteps!"

[hr]
Remember here that just placing an image onto a page is probably not the best method for documenting your family history. While the original document is extremely important, you definitely want to include the image with a text version and translation - this ensures that someone searching for the information has a chance to find it.

The seach engines cannot interpret an image.