The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
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:
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 plants a column in the row in which the code is placed. To place a column in a row you would use this:
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
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:
Adding a background to an individual cell:
Varying row and column width and height
This would set the row height to 400 pixels.
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
Lets start with a basic table layout:
<table border="2">
<tr>
<td>col.1 row.1</td>
<td>col.2 row.1</td>
</tr>
<tr>
<td>col.1 row.2</td>
<td>col.2 row.2</td>
</tr>
</table>
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:
<table border="2">
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.
<tr> This defines a new row in the table.<td>This plants a column in the row in which the code is placed. To place a column in a row you would use this:
<tr><td>this is a column in a row!</td></tr>
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
<table border="6" bordercolor="red">
Background colour in a table
<table bgcolor="brown">
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
<table background="/background.jpg">
Replace "/background.jpg" with the address of the image you wish to use.
Colour fills in individual rows and columns
In a row:
<tr bgcolor="blue">Use this code where you would normally place:
<tr>In a column:
<td bgcolor="red">Adding a background to an individual cell:
<td background="/background2.jpg">
Varying row and column width and height
<tr height="400">This would set the row height to 400 pixels.
<td height="100" width="80">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.
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:
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 plants a column in the row in which the code is placed. To place a column in a row you would use this:
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
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:
Adding a background to an individual cell:
Varying row and column width and height
This would set the row height to 400 pixels.
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
Lets start with a basic table layout:
<table border="2">
<tr>
<td>col.1 row.1</td>
<td>col.2 row.1</td>
</tr>
<tr>
<td>col.1 row.2</td>
<td>col.2 row.2</td>
</tr>
</table>
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:
<table border="2">
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.
<tr> This defines a new row in the table.<td>This plants a column in the row in which the code is placed. To place a column in a row you would use this:
<tr><td>this is a column in a row!</td></tr>
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
<table border="6" bordercolor="red">
Background colour in a table
<table bgcolor="brown">
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
<table background="/background.jpg">
Replace "/background.jpg" with the address of the image you wish to use.
Colour fills in individual rows and columns
In a row:
<tr bgcolor="blue">Use this code where you would normally place:
<tr>In a column:
<td bgcolor="red">Adding a background to an individual cell:
<td background="/background2.jpg">
Varying row and column width and height
<tr height="400">This would set the row height to 400 pixels.
<td height="100" width="80">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