Freeola Internet Get Dotted Domains Blog Guides Chat

Viewing Thread:
'HTML tables'

Mon 04/09/06 at 11:55:
"nitrogoat.co.uk"
Posts: 76
Holding data together in a webpage can be a fustrating process. Many people end up with clumps of text spaced randomly around the page in a very messy and eye-painful manner. Tables give you the power to organize the text into columns and rows, and also the opportunity to cutomise the table to suit the layout and colour scheme of you website.
Lets start with a basic table layout:












col.1 row.1 col.2 row.1
col.1 row.2 col.2 row.2




When you view the webpage you will see a rather mediocre table with descriptions in each cell.
A cell is a portion of the table, separate from the other cells.

Lets take a look at the code:





This gives the table its border. The border is the white space between the two lines surrounding the table and the individual cells.It can appear confusing as it appears that there are two separate borders at this stage.

This defines a new row in the table.




Go over this until you understand it and experiment with rows and columns until it is firm in your mind before we continue.


Customising you table:

At the moment you have a small collection of data neatly set out. Tables can be used to control the layout of your whole site when arranged properly! Now, we are going to see to bringing some colour into our table and the various methods.

Giving your table border a colour



This plants a column in the row in which the code is placed. To place a column in a row you would use this:

this is a column in a row!



Background colour in a table





When using colours in webpages there isnt a great choice of colours when using text such as black, red, green. A better idea is to use "Hex Colours" where instead of words there are codes which relate to a much greater variety of colours.

Background image





Replace "/background.jpg" with the address of the image you wish to use.

Colour fills in individual rows and columns
In a row:



Use this code where you would normally place:



In a column:


This would set the row height to 400 pixels.



Adding a background to an individual cell:





Varying row and column width and height


This would set the height and width of a column in the row.


Thank you for reading, and i hope this has helped many of you!
Nitro_goat
There have been no replies to this thread yet.
Mon 04/09/06 at 11:55:
"nitrogoat.co.uk"
Posts: 76
Holding data together in a webpage can be a fustrating process. Many people end up with clumps of text spaced randomly around the page in a very messy and eye-painful manner. Tables give you the power to organize the text into columns and rows, and also the opportunity to cutomise the table to suit the layout and colour scheme of you website.
Lets start with a basic table layout:












col.1 row.1 col.2 row.1
col.1 row.2 col.2 row.2




When you view the webpage you will see a rather mediocre table with descriptions in each cell.
A cell is a portion of the table, separate from the other cells.

Lets take a look at the code:





This gives the table its border. The border is the white space between the two lines surrounding the table and the individual cells.It can appear confusing as it appears that there are two separate borders at this stage.

This defines a new row in the table.




Go over this until you understand it and experiment with rows and columns until it is firm in your mind before we continue.


Customising you table:

At the moment you have a small collection of data neatly set out. Tables can be used to control the layout of your whole site when arranged properly! Now, we are going to see to bringing some colour into our table and the various methods.

Giving your table border a colour



This plants a column in the row in which the code is placed. To place a column in a row you would use this:

this is a column in a row!



Background colour in a table





When using colours in webpages there isnt a great choice of colours when using text such as black, red, green. A better idea is to use "Hex Colours" where instead of words there are codes which relate to a much greater variety of colours.

Background image





Replace "/background.jpg" with the address of the image you wish to use.

Colour fills in individual rows and columns
In a row:



Use this code where you would normally place:



In a column:


This would set the row height to 400 pixels.



Adding a background to an individual cell:





Varying row and column width and height


This would set the height and width of a column in the row.


Thank you for reading, and i hope this has helped many of you!
Nitro_goat

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment