Welcome to our step by step tutorial on creating tables for your Web page in an open text pad editor. This is a highly recommended tutorial to better comprehend the tables HTML language even if using a homepage editor that does it all.
We are pleased to present to you this walk through demonstration from start to finish, in a simple and understandable terminology of table HTML attribute codes. We won't boggle your mind with programmers terminology of codes, we pronounce codes with a terminology you can relate to and fully understand.
We offer you one of the most comprehensive, explanatory, and understandable forms of tutorials offered on the World Wide Web today, and we are very proud of that.
We guarantee that by completion of this tutorial, that you have the essential knowledge to create a table layout that will help in creating a spectacular web page, only limited by your own imagination and creativity.
Throughout our tutorials, we will provide you with the option of using our HTML test bed generator to visually see your table creation as you progress through lessons.
We also provide you with a complete resource listing panel to keep your Web Site tuned and developed with all the proper resources, tools, and technologies available today. Most of these being absolutely free, or others with free trial demonstration period.
Okay: Are You Ready? Let's Get Started!
Tables are an essential tool used by most designers to easily place objects in an aligned order and exact positioning for browser viewing uniformity.
Guide To Remembering Tables
Let's think of an HTML documents table as being the same as your dinner table at home. You have a big table and you are going to set it up to serve as many guests as you may have to sit.
All maroon text in this tutorial section is either a code, or example, point of illustration, etc. and should be read.
Each person sitting will have a spot at the table. We will call this their table region or <TR> for proper code and reference during this tutorial.
Each person sitting will have an allotted space for as many plates that they may need and we will divide their table region by using a table division code or <TD> for proper code and reference during this tutorial.
To follow our tutorial lesson, you will need to open your Note Pad, Word Pad, Text Pad Editor, etc., to show a blank page now.
We will start by beginning to inform the browser what type of HTML command order it is reading. We will begin with installing this code into your empty Pad Editor.
Note: If you do not know how to cut & paste objects, click here for a quick tutorial on how to do this.
Install this Table tag: --> <TABLE>
( For aligning this table, simply use the align= <"left - center - right"> order. If you are unsure as to what we are talking about please click here for a thorough demonstration of alignments. )
Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor.
Install the beginning of the Table Region for your dinner guest and set them a seat at the table.
Install beginning of Table Region tag: --> <TR>
Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor.
Now we must install the table division for your guest to have a reserved spot for their plate on the table.
Install beginning of Table Division tag: --> <TD>
We are going to insert our appetizers and meals on these <TD> plates which will be your content or images or whatever it may be you need to place on the <TD> guest plate.
Note: On all attributes of HTML and table commands you need a start and stop decipher attribute code tag. This is accomplished by all commands starting with <example> and ending it's code with this type of attribute </example>. We hope you have understood coding:
start=<> and end=</> <- Very Important You Understand This!
We will now add our Table Division close tag.
Install Table Division closing tag: --> </TD>
Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor.
We must now decide if your guest needs another reserved spot right beside the first spot reserved for this particular guest. ( What this will do is create a second view guest plate aligned perfectly beside the first spot already reserved for your guest. )
If you would like to have another setting for your guest, simply repeat the order above and your code should look like this below:
(Our Lesson Example Will Be
2 Cells)
We have now got a seat for 1 guest with 2 table plate settings. We must now determine if the 2 plate settings need the exact same size spaces or one needs to be larger or smaller than the other.
This is just like determining how much space to reserve for your dinner guests at your own dinner table. If you know your good buddy Joe eats a lot and could use room for 2 full size plate settings you would give him equal room to accommodate 2 full size plates like 50% - 50%. If you know his wife Mary eats little, and now she will only have a plate of food and a small desert, her room would only require 70% of space for her plate, and 30% room for her small desert. We determine how much space we will allocate for each table division that our guests require for their space to accommodate their plates (your content, images, etc.)
We will use a 50% size ratio for our examples. We encourage you to take code and try different size variables with our HTML Test Bed Generator to visually see size differences.
We would add the following width code to our table division area for our guest plates to fit properly.
We would then have a code that looked like this below:
We will now add our Table Region closing tag.
Install Table Region closing tag: --> </TR>
Now we will hit enter on your keyboard and will start a new line of command on your Pad Editor.
If you have additional needs to provide space for other guests, you will simply repeat above order until you have enough spots reserved for your guests. ( What this does, it creates additional settings below one another for as many guest spots as needed. ) Each <TR> region creates a new line with as many divisions as needed as you determine by using the table division = <TD> command tag within every table region = <TR>.
Now we have the closing of our Table.
Install the Table end tag: --> </TABLE>
Now your code should something look like this below:
This example is for 1 table region & 2 table divisions
Your notepad example can be many more than this
We advise you to follow tutorial to better understand lesson
We hope this has helped you to have remembrance of the functions of table areas purpose and general layout. If you are confused, please go back and slowly read this tutorial section again.
We will move onto width, height, cellpadding, cellspacing, margin width and background colors in our next tutorial.
| 
