|
Printer Friendly Page
created by Janet Barrett CHAPTER TWO (Creating Tables)
A Reminder from Chapter One............... You will need to be able to see your work on the net. To do this you must use the codes inside your notepad like this: When you have completed your work you must file it as an .html file ie my_first_page.html - if you don't do this, the browser will not be able to read your work. If it is to be your homepage on your website then you must file it as index.html with no additions to it. To be able to see your creation - go to your browser bar at the top of your screen and click on: File > Open > Browse (at this point you should see "File name:" which is blank and "Files of type: HTML files") then locate your 'my_first_page' file (it will not show the .html) - Click on it and open. Your browser will open your file and reveal your work. You now have your page on the Internet for viewing and also your notepad with the coding. From hereon when you make changes in your notepad you must file it every time and then hit 'refresh' on your browser to update your page.
OK, let's start building tables. We'll start off with the first table above. Are you ready? I wont go into the technical details of all the attributes and cause you a headache! Just follow my examples and you should be alright. This is the code for the first table above. This is the code for the second table above. And there you have it, the beginnings of a table starting to take shape. You can use the font attributes for color etc inside the table to design your masterpiece.
Let's see what the code looks like for the above table.
At this point I will try to explain what all that is about.
That looks pretty neat doesn't it? I used a table to set it out using a lot of the tags you see. Practice changing the border thickness and cell widths to see what results you end up with.
The cellspacing will contract from the actual table frame and create a 'boxed' look to each cell. Table B
The cellpadding will contract the information, in each cell, away from the main table frame. Table C
The cellspacing will create a 'boxed' effect and contract from the main table, while at the same time the cellpadding will contract from the 'boxed' effect making sure the information doesnt touch the sides. This is a nice handy option when you are creating colorful borders and backgrounds to the table format. (This time you will see I am using pixels for sizing) Table A: cellspacing Table B: cellpadding Table C: cellpadding and cellspacing At this stage I want to point out something very important. Look at all the TD WIDTH=300 and the TABLE BORDER=600. When you split the table into cells, the WIDTH sizes must all total up to the TABLE BORDER width - in this case 600. Practice changing the width sizes of the cells (make sure they add up to the table size). Try using font attributes inside the cells for varying text styles etc.
With the TABLE BORDER set at "0" it becomes invisible and you achieve the effects as you see above. Notice the link I placed in the second table?? I'll show you how to do that. Make it a habit to put the BORDER setting at "1" so you can see where your work is placed. When your happy with the results you can go back and change the TABLE BORDER setting to "0". Now let's look at how to place an image inside a table. I will use the example with the images link. Notice how I set the TABLE BORDER at "0" and check the link 'images'. You will also notice a new feature, namely the DIV option. This is a feature to force text or images to be placed either LEFT, RIGHT, CENTER. Make sure you close the DIV function with /DIV otherwise everything you do after that, the browser will think you want everything positioned the same. For everyone out there on the internet to be able to actually view your images, you will need to upload the image into your folders on your chosen web-host. The image address will then look something like this (replace mydomainname with your own actual website name):
Let's create a table of Latin Quotes. You will notice the TABLE BORDER is thicker and has a color this time, namely dark red. I'll show you how to do that in a moment. But first, take a look at the table below. You will notice the cells are different sizes, but they add up to the TABLE total width size.
And here is what the coding looks like. Have a playaround with the TABLE BORDER thickness and color. Also try changing the cell sizes, cellpadding/cellspacing and see what effects you come up with. That's it on tables for now. By this time you should have a pretty good idea how they work. Try creating a table of your own, through trial and error you will learn what is possible and what isn't.
If you think you are ready to start a homepage then take a look at this very simple design I created.
You can play around with the background colors, font attributes and headings to suit your project.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
