The following tutorial was wrote by me, in my spare time, and has not been prrof read or corrected, it is for learning purposes only, please do not copy and part of this tutorial onto any other site without permission from me. Pm if you wanted to do that. This is copyright to www.DnLodge.com . A Beginners Guide to HTML with Table
In this tutorial, you will be taking your first step to mastering HTML. After completing this tutorial, you will have a better knowledge of tables, how to create them, and how to customize them for your needs. In this tutorial, we will be making a simple site using tables, and other basic elements of every html web page.
In the beginning of every website, there a couple important tags. The first tag is <html>.
The <html> tag marks the start of every website. Though most browsers can understand your pages even if you don’t have the html tag, some older browsers take longer for the page to load without it, or cause errors. At the end of your html pages, the <html> tag in its closing state, </html>, is required. All of your html from this point on will be in between these two tags.
So far, the HTML of the web page we are making is...
<HTML>
</HTML>
The second important tag is <head>. Most of the information the browser needs to view your web page the way you want it is between these tags. No one viewing your website can view this information. One of the most important tags which are held within the head tag is the title tag. In the title tag, you may input the text that you want the user to view as the title of the page, and if they minimize the browser, this will be the text that will be viewed from the taskbar. This tag is viewed as <title>, and </title> as the closing tag.
With these new tags added... our web page looks like this…
<HTML>
<head>
<title> </title>
</head>
</HTML>
Now, to add a title to your page, type the title you want in between the title tags. An example is below. For the simple site were making, we will name it: My Friends Favorite Colors.
<title> My Fiends Favorite Colors </title>
The next tag in our web page will be the Body tag. This will mark the start of the html your user will on there browser. After this, we will be starting the tables which will organize the information on your pages.
After adding the body tags, our HTML page looks like this…
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
</body>
</HTML>
Now that we have marked the start of the html our viewers will see, we can start composing the tables which will organize the information we want to display, the way we want it. Most every professional website uses tables.
There are three main parts of all tables. First, there is the <table> tag. This tells the browser you want to start a new table. The second is the <tr> tag. This creates a new row in your table. The third is the <th> or <td> tags. They do basicly the same the same thing. The most popular is the <td> tag. This creates a new column in your row. After the conclusion of the body of each tag, your required to use a closing tag, which is all the tags above with a “/” right after the “<”.
With the above said, we have…
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
<table>
<tr>
<td>
</td>
</tr>
</table>
</body>
</HTML>
The above example contains no information the browser will view to the visitor. To add information, you must type whatever you want to appear in the table in between the <td> and the </td> tags. Now I will add some example text to the table.
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
<table>
<tr>
<td>
In this table, I will be telling you what my friend’s favorite colors are. My favorite color is red, my friend Craig’s favorite color is green, my friend Jessica’s favorite color is purple, my friend Carla’s favorite color is blue, my friend Chris’s favorite color is teal, and my friend Zack’s favorite color is maroon.
</td>
</tr>
</table>
</body>
</HTML>
Now that we have added some information, before we organize it, we will be making the table look the way we want it. I will be showing you ways to make your tables stylish and different from any other.
Right now, the browser would just give the paragraph typed in the table with no border. To add a border around the paragraph, you must use border=”x”. You must replace the x with the size of border you want around your text, 1 being the smallest. This will look like the following… <td border=”1”> ….. text ….. </td> With that, the “text” will appear with a border around it.
To make your border look better, you may change the color of it. To do this, you must use bordercolor=”x”. Replace x with the color you want the border to be. An example is to follow… <td bordercolor=”blue”>…</td>
To add a background color behind the paragraph, you must use bgcolor=”#FFFFFF”. This will look like the following… <td bgcolor=”FFFFFF”. Using this, to change the bgcolor, you can replace the FFFFFF with any hex color code you want. But remember, it is best to use web safe colors, because some browsers will not accept all hex color codes, because there are so many. If you just want colors like yellow, blue, black, white, or any simple color like that, usually it will work to just type the color in place of the hex codes, without the “#”. An example of this in the table is following… <td bgcolor=”#FFFFF”>…</td>
To add a picture behind your text, you will be using background=”images/picture.gif”. This will use any image you specify as the background of the table. If the image is smaller than the space the table uses, the image will repeat itself to leave no empty spots. If it is too big, it will cut off whatever sides of the picture does not fit. If you don’t want this to happen, you will have to set the width and height to the width and height of the background image. This is explained below. An example of the image in the background in the HTML code for the table is to follow… <td background=”image/picture.gif”>…</td>
To set a width to your table, you must use width=”x”. The x is replaced with the number of pixels wide you want your table to be. You may also replace the x with a percentage. For example, if you use 50% as the width, the width of the table will always be 50% of the user’s browser. If he adjusts the width of his browser or changes his resolution, the table will get wider, or skinnier as needed. Here is an example of how to set the width using pixels… <td width=”532”>…</td>
To align your table horizontally to the left, center, or right of the viewers browser, you will use align=”x”. You have to then replace the x with either of the following three... “left”, “right”, or “center”. An example of how you would use this bit of code to align your table to the center is following… <td align=”center”>…</td>
To align your table vertically to the top, middle, or bottom, you will use valign=”x”. Replace x with top, middle, or bottom, according to the vertical aligning your looking for. For a webmaster who wants his table aligned vertically to the middle of the page, he would use the following code to his table… <td valign=”middle”>…</td>
If you would like to pad the inside of your table, to keep the text from touching the border, or to keep the text as far away from the border as you want it, you use cellpadding=”x”. Then you must replace the x with the amount of pixels you want the text inside the table to be away from the border. If you want the text to touch the border, you can use 0 as the replacement for x. An example of a padded table with a 3 pixel padding, is following… <td cellpadding=”3”>…</td>
If you would like to set a padding on the outside of your table, you will use cellspacing=”x”. Replace x with the amount of pixels you want padding the outside of your table to prevent anything from touching it within this space. An example of this with a 5 pixel padding on the outside of the table, is following… <td cellspacing=”5”>…</td>
An example of a table with the paragraph about my friend’s favorite colors with a red border, a green background, aligned vertically to the top, aligned horizontally to the center, with a 5 pixel cell padding, and a 5 pixel cell spacing is below.
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
<table valign=”top” align=”center” border=”1” bordercolor=”blue”>
<tr>
<td bgcolor=”green” cellpadding=”5” cellspacing=”5>
In this table, I will be telling you what my friend’s favorite colors are. Brandon’s favorite color is red, my friend Craig’s favorite color is green, my friend Jessica’s favorite color is purple, my friend Carla’s favorite color is blue, my friend Chris’s favorite color is teal, and my friend Zack’s favorite color is maroon.
</td>
</tr>
</table>
</body>
</HTML>
As you may have noticed, all the things I used to customize my table can be used in either the td, tr, th or the table tag. Now that we have a better understanding of how to create tables and customize them, we are going to organize the information into tables, so it’s easier to view. We will be using the paragraph about “My Friend’s Favorite Colors” as our source for information to organize.
We are going to be using rows (<tr>) and columns (<td>) to make the information more viewable. Our simple html page will consist of 3 things viewable to the user. First, we’ll have a title to tell users what the contents of the page are. Second, we will have a paragraph as our source of information. Third, we will create a table to display the information in the paragraph more efficiently.
We already finished 1/3 of our task, which was creating a table which held the information paragraph. Next, we will add a simple title to our page.
For the table which will hold our title, we will be having a size 1 blue border, with a white background and centered. This is a pretty simple task. The title will be in a size 3 HR. An example of the title added it below.
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
<table border="1" align="center" valign="middle" bordercolor="blue">
<tr>
<td> <br>
<h3>
My Friend's Favorite Colors
</h3>
</td>
</tr>
</table>
<br><Br>
<table valign=”top” align=”center” border=”1” bordercolor=”blue”>
<tr>
<td bgcolor=”green” cellpadding=”5” cellspacing=”5>
In this table, I will be telling you what my friend’s favorite colors are. My favorite color is red, my friend Craig’s favorite color is green, my friend Jessica’s favorite color is purple, my friend Carla’s favorite color is blue, my friend Chris’s favorite color is teal, and my friend Zack’s favorite color is maroon.
</td>
</tr>
</table>
</body>
</HTML>
For now on, the above code will not be viewed in the example, until the finalized page. The reason for this is to save space.
Now that we have a title for our page and a table for our paragraph, it is time to organize all the information. For some people, this might be the hardest task. First, we will create a base table. The code may be viewed below.
<table>
<tr>
<td>
</td>
</tr>
</table>
Our table will have 2 columns, one for the person’s name, and one for the person’s favorite color. But above those, we will have a title for our table. This table will have a size 1 blue border, aligned to the center with a gray background with a width of 400. So before we start adding our information, we will add the customizations to the table. The code for the updated table is below.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
</td>
</tr>
</table>
</center>
Now that we have customized the table to our needs, we must start adding the cells. The first row will consist of a title for the whole table. To add the title, we just typed what we wanted the title to be in between <td> and </td>. And since the table’s width is 400, and the text we will add will, on default, align to the left. To align the text to the middle, we used the <center> tag. This centering will end once the </center> is read by the browser.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
</table>
</center>
Now that we have a title, we will start adding the cells which will contain our information. We will be using a number of <td>’s and <tr>’s to complete this task. To start a new row, after the closing of the <tr> tag, you must start a new tr and td tag, and also there closing tags. An example of this added is below.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
Now that we have a new row, we will start adding information to the table. First we are going to add all the people’s names. Then, next to there names, there favorite color. We will now add the first person’s name. To do this, we will be writing the text in between the second <tr> <td> and the last </td> </tr>.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
<tr>
<td>
Brandon
</td>
</tr>
</table>
</center>
Now that we have mastered the skill of adding new rows, to save some time, I will add the rest of the rows myself. A table with a title and all the people’s names is below.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
<tr>
<td>
Brandon
</td>
</tr>
<tr>
<td>
Craig
</td>
</tr>
<tr>
<td>
Jessica
</td>
</tr>
<tr>
<td>
Carla
</td>
</tr>
<tr>
<td>
Chris
</td>
</tr>
<tr>
<td>
Zack
</td>
</tr>
</table>
</center>
Now that we have added everyone’s names, and made the code much longer, it is time to add columns to display the favorite colors of the people. To do this, you have to use more td’s within the <tr>. Here is how it works. Inside a table you have tr’s and td’s, as you know. Normally when you start a new row, you use a new tr after the closing tag of the tr before it. But to start a new column, you must <td> and a </td> at the ending of the td before it. In the below example, we have added for you these columns with the favorite colors in them. And to make everything look nicer, I have added labels to each column, in bold text.
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<b>Favorite Color</b>
</td>
</tr>
<tr>
<td>
Brandon
</td>
<td>
Red
</td>
</tr>
<tr>
<td>
Craig
</td>
<td>
Green
</td>
</tr>
<tr>
<td>
Jessica
</td>
<td>
Purple
</td>
</tr>
<tr>
<td>
Carla
</td>
<td>
Blue
</td>
<tr>
<td>
Chris
</td>
<td>
Teal
</td>
</tr>
<tr>
<td>
Maroon
</td>
</tr>
</table>
</center>
Congratulations!! You have now completed this tutorials. I hope you have learned from it! An example of the finalized coding is below.
<HTML>
<head>
<title> My Fiends Favorite Colors </title>
</head>
<body>
<table border="1" align="center" valign="middle" bordercolor="blue">
<tr>
<td> <br>
<h3>
My Friend's Favorite Colors
</h3>
</td>
</tr>
</table>
<br><Br>
<table valign=”top” align=”center” border=”1” bordercolor=”blue”>
<tr>
<td bgcolor=”green” cellpadding=”5” cellspacing=”5>
In this table, I will be telling you what my friend’s favorite colors are. My favorite color is red, my friend Craig’s favorite color is green, my friend Jessica’s favorite color is purple, my friend Carla’s favorite color is blue, my friend Chris’s favorite color is teal, and my friend Zack’s favorite color is maroon.
</td>
</tr>
</table>
<center>
<table border=”1” bordercolor=”blue” width="400">
<tr>
<td>
<center>My Friend’s Favorite Colors</center>
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<b>Favorite Color</b>
</td>
</tr>
<tr>
<td>
Brandon
</td>
<td>
Red
</td>
</tr>
<tr>
<td>
Craig
</td>
<td>
Green
</td>
</tr>
<tr>
<td>
Jessica
</td>
<td>
Purple
</td>
</tr>
<tr>
<td>
Carla
</td>
<td>
Blue
</td>
<tr>
<td>
Chris
</td>
<td>
Teal
</td>
</tr>
<tr>
<td>
Maroon
</td>
</tr>
</table>
</center>
</body>
</HTML>
Tutorial - A Beginners Guide to HTML with Table 
I can't seem to figure out how to correct this problem with out doing it by hand.
Linear Mode
