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 <TABLE> tag encloses the coding and makes it easy to see wherabouts the coding starts and where it is terminated (</TABLE>).
Using the <TR> tag we have created a row which is broken up into our subsequent cells defined by the <TD>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 <TD>s fit snuggly within the <TR>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 <TABLE BORDER="1"> 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}

<table width="" height="">
cellpadding=""   *
cellspacing=""   *


* These can be applied to either the <TABLE>/<TR>/<TD> 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.