GetDotted Domains

Viewing Thread:
"Tasteful, tactful and tremendous tables"

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.

Mon 11/08/08 at 21:05
"nitrogoat.co.uk"
Posts: 76
Tasteful, tactful and tremendous tables

As mundane as they may sometimes appear, tables are the backbone to many modern websites and their use in assisting web design
is indisputable. They are capable of holding data together and can be easily coded and customised to sink into your
webpage and quietly work their magic. Or, they can faithfully serve their purpose and provide a quick, simple solution to
making information presentable and easily accessible.

Where to start?

Coding tables in HTML is so clean, quick and easy that once you've done it a first time, it will become second nature and you'll know your
TDs from TRs and your Cells from your Rows without pause for thought.

The basic tag-

<TABLE>

This is the fundamental tag which creates the table and houses a majority of the table's properties.

Table Row

<TR>

This defines a row in the table that you have just created. Each row you create runs horizontally in the table and is broken up into data cells.

Table Data

<TD>

This is responsible for each cell in the HTML table. Each cell sits on a row.


Sticking it all together

Know that you've been introduced to Mr Table and his family of TRs and TDs you will need to know how to plaster them all together. Unlike a lot
of HTML coding, fortunately it all fits together logically.


<TABLE>
<TR>
<TD>Row 1: Cell 1</TD>
<TD>Row 1: Cell 2</TD>
</TR>
</TABLE>


As you can see the tag encloses the coding and makes it easy to see wherabouts the coding starts and where it is terminated (
).
Using the tag we have created a row which is broken up into our subsequent cells defined by the s.

Paste the above code into your HTML editor to see exactly what it does.
It will present the text Row 1: Cell 1 alongside the text Row 1: Cell 2.

There we have it, our first two cells sitting snuggly side-by-side, what a moment!

Now, as with any HTML the position of the tags don't affect the rows and cells behaviour within the table.
For example, the above coding is the same as this-


<TABLE>
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
</TABLE>


In fact, i recommend that you set out the code as above because it gives you a visual assist whilst you code, because you can see by the format
that the s fit snuggly within the s... The cells fit within the rows.

Tables come into their own when you have vast amounts of data that you want to present neatly and accessibly on a webpage.

Currently, we have very little data in our table and only one row.

Now, lets add another couple of rows to the table.


<TABLE BORDER="1">
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR>
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD>Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


The coding does appear more complicated but you should easily begin to see the pattern as new rows are made and previous rows terminated.
Also, using the property you can add an attractive border to the information which gives it a real authentic table appearance.
="1" Defines the border as having a border 1 pixel wide.
Increasing this number therefore increases the border width, whilst not defining a width or using ="0" would prevent a border displaying.


Customisation

Border width is just a small step towards pimping your table.

Background Manipulation


<TABLE BORDER="0" >
<TR BGCOLOR="grey">
<TD >Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR BGCOLOR="lightgrey">
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR="white">Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


The property BGCOLOR="" is just the same as when giving a webpage a background color and you can enter either a word or a colour hex code here.

Note- Remember to spell colour the american way color.

As well as this we can add a background image.
In the previous example, each row was assigned a background colour. We can also apply backgrounds to individual cells or the whole table itself.

This will add a background image of your choice to the whole table-


<TABLE BACKGROUND="">
<TR>
<TD >Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR>
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD>Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


This opens the door for us to begin building simple layouts and due to the large amount of customisation available this process is made somewhat easier.

Further Customisation
Insert numbers between the quote marks


cellpadding="" *
cellspacing="" *


* These can be applied to either the
// tag we have created a row which is broken up into our subsequent cells defined by the s... The cells fit within the rows.

Tables come into their own when you have vast amounts of data that you want to present neatly and accessibly on a webpage.

Currently, we have very little data in our table and only one row.

Now, lets add another couple of rows to the table.


<TABLE BORDER="1">
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR>
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD>Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


The coding does appear more complicated but you should easily begin to see the pattern as new rows are made and previous rows terminated.
Also, using the
tags.

One last trick

To make your TABLES even more useful and professional you can create virtual headers which are cells that just take up a defined number of cells.


<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Table Heading</TH> </TR>
<TR> <TD>Number of fish</TD> <TD>143</TD> </TR>
<TR> <TD>Number of dogs</TD> <TD>6</TD> </TR>
</TABLE>



COLSPAN="2" instructs the cell to take up 2 cells across

We can also replace this with ROWSPAN="" to set how many rows a cell spans.
Wed 13/08/08 at 09:37
Regular
Posts: 1,014
I see this is already in the tips section - cheers ma man

Digi
Tue 12/08/08 at 18:14
Moderator
"Are you sure?"
Posts: 5,000
Hi nitro_goat,
I'm also still a 'Tables' fan, but I notice these days most designers are favouring non-Table, pure CSS designs.

Some designers seem to have a real 'problem' with sites still built around tables! - which is a shame as they work for me!

With all the browser hacks required for pure CSS sites I'm sticking with Tables for now...


NB. The Tips/Tricks/Tutorials sticky links to your last post about tables Past Tables info do you need Digi to change the link to this thread?



Search Freeola Chat
Tue 12/08/08 at 17:46
"nitrogoat.co.uk"
Posts: 76
Yeh there's definitely room for expansion, especially along the CSS route. I just aimed to run through the basics first though!
Mon 11/08/08 at 23:03
Staff Moderator
"Aargh! Broken..."
Posts: 1,408
Nice post. Forgot to mention the
<th>heading</th> Table heading tag.
<thead></thead> Table header tag.
and <tbody></tbody> Table body tags.
A little underused but perfectly valid and useful when using Javascript to manipulate tables.
Maybe you'd like to add details on how to control table styling using CSS, get rid of the old bgcolor, valign, align etc?
Mon 11/08/08 at 21:05
"nitrogoat.co.uk"
Posts: 76
Tasteful, tactful and tremendous tables

As mundane as they may sometimes appear, tables are the backbone to many modern websites and their use in assisting web design
is indisputable. They are capable of holding data together and can be easily coded and customised to sink into your
webpage and quietly work their magic. Or, they can faithfully serve their purpose and provide a quick, simple solution to
making information presentable and easily accessible.

Where to start?

Coding tables in HTML is so clean, quick and easy that once you've done it a first time, it will become second nature and you'll know your
TDs from TRs and your Cells from your Rows without pause for thought.

The basic tag-

<TABLE>

This is the fundamental tag which creates the table and houses a majority of the table's properties.

Table Row

<TR>

This defines a row in the table that you have just created. Each row you create runs horizontally in the table and is broken up into data cells.

Table Data

<TD>

This is responsible for each cell in the HTML table. Each cell sits on a row.


Sticking it all together

Know that you've been introduced to Mr Table and his family of TRs and TDs you will need to know how to plaster them all together. Unlike a lot
of HTML coding, fortunately it all fits together logically.


<TABLE>
<TR>
<TD>Row 1: Cell 1</TD>
<TD>Row 1: Cell 2</TD>
</TR>
</TABLE>


As you can see the tag encloses the coding and makes it easy to see wherabouts the coding starts and where it is terminated (
).
Using the
s.

Paste the above code into your HTML editor to see exactly what it does.
It will present the text Row 1: Cell 1 alongside the text Row 1: Cell 2.

There we have it, our first two cells sitting snuggly side-by-side, what a moment!

Now, as with any HTML the position of the tags don't affect the rows and cells behaviour within the table.
For example, the above coding is the same as this-


<TABLE>
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
</TABLE>


In fact, i recommend that you set out the code as above because it gives you a visual assist whilst you code, because you can see by the format
that the
s fit snuggly within the
property you can add an attractive border to the information which gives it a real authentic table appearance.
="1" Defines the border as having a border 1 pixel wide.
Increasing this number therefore increases the border width, whilst not defining a width or using ="0" would prevent a border displaying.


Customisation

Border width is just a small step towards pimping your table.

Background Manipulation


<TABLE BORDER="0" >
<TR BGCOLOR="grey">
<TD >Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR BGCOLOR="lightgrey">
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR="white">Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


The property BGCOLOR="" is just the same as when giving a webpage a background color and you can enter either a word or a colour hex code here.

Note- Remember to spell colour the american way color.

As well as this we can add a background image.
In the previous example, each row was assigned a background colour. We can also apply backgrounds to individual cells or the whole table itself.

This will add a background image of your choice to the whole table-


<TABLE BACKGROUND="">
<TR>
<TD >Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR>
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD>Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>


This opens the door for us to begin building simple layouts and due to the large amount of customisation available this process is made somewhat easier.

Further Customisation
Insert numbers between the quote marks


cellpadding="" *
cellspacing="" *


* These can be applied to either the
//
tags.

One last trick

To make your TABLES even more useful and professional you can create virtual headers which are cells that just take up a defined number of cells.


<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Table Heading</TH> </TR>
<TR> <TD>Number of fish</TD> <TD>143</TD> </TR>
<TR> <TD>Number of dogs</TD> <TD>6</TD> </TR>
</TABLE>



COLSPAN="2" instructs the cell to take up 2 cells across

We can also replace this with ROWSPAN="" to set how many rows a cell spans.

Freeola & GetDotted are rated

Check out some of our customer reviews below:

Best Provider
The best provider I know of, never a problem, recommend highly
Paul
Everybody thinks I am an IT genius...
Nothing but admiration. I have been complimented on the church site that I manage through you and everybody thinks I am an IT genius. Your support is unquestionably outstanding.
Brian

View More Reviews

Need some help? Give us a call on 01376 55 60 60

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.