A7. Tables

Well as you have seen the table tag can have a border, a border gives the table visable gridlines, it is also possible to have a table without gridlines, this is done by having the border attribute set to zero, eg <table border=0> You can make the border any thickness you like ranging from 0 to 25, most border's are set around the numbers 0,1,2 and 3.
There are also other commands which can be placed within the Table tag, these are height,width, align=left and align=right. To center a table, I have found it easier just to place the <center>...</center > tags around the whole table. Below are a list of <table...> tags :

<table border=1>
<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>

Col 1 Row 1	Col 2 Row 1
Col 1 Row 2	Col 2 Row 2

	Tables - Table Tags
	HTML	Range
	<table border=1> <table width=25> <table height=50> <table align=right> <table align=left> <table cellpadding=12> <table cellspace=12> <table bgcolor=green>	0...100 0..100 or 0%..100% 0..100 0..20 0..20 for full range of colours go to the top of the page and click on the Colour page link

Well now that you have seen all of the attributes that can be used with in the <table..> tag, I'd better explain them to you,

Border
This attribute changes the thickness of the border around a table, 0 being that there is no visable border and 100 being just a silly width, normal table border's don't go above 20, and here's an example of border thickness for you :

Border=1

Border=10

Width
Width changes the width of the table in comparision to the viewer's screen, it has two different forms of settings, it can be in pixels or in a percentage form, in pixel form the table would have a specific width, whereas with the percentage form the table will adjust it's self to fit it's percentage. Examples (Will have border=1 so you can actually see the tables):

Width=70

Width=70%

Height
Height changes the height of a table in comparision to the viewer's screen, it has only the one form of settings, it is in pixels. In pixel form the table will have a specific height. Here's an example (Will have border=1 so you can actually see the table):

Height=70

Align (right or left)
Alignment changes the position of a table in comparision to the viewer's screen, it has two forms of settings. These are align=left or align= right. Align left places a table on to the left side of the viewer's screen whereas align=right places the table on the right hand side of the screen. To get a table into the middle of the screen, just place the <center>...</center> tags around it. Here's some examples (Will have border=1 so you can actually see the table):

Left

Right

Center

Cellpadding
Cellpaddig is the amount of space between the border of a cell and the contents of the cell. Here's some examples (Will have border=1 so you can actually see the table):

Cellpadding=12

Cellpadding=2

Cellspacing
Cellspacing is the amount of space between the content borders of a cell and the external border. Here's some examples (Will have border=1 so you can actually see the table):

Cellspacing=12

Cellspacing=2

Okay, as you can see a table can be modified in many different ways within the table tag. All of these commands can be combined in different manners,
ie <table width=75% height=60 cellpadding=10 cellspacing=10 border=5 align=right>
Though normally they aren't all used at once. Some of these commands can also be repeated on the individual TableData tags (<TD>). Here's a list of them :

	Tables - TD Tags
	HTML	Range
	<td width=25> <td height=50> <td align=right> <td align=left> <td align=center> <td valign=top> <td valign=bottom> <td valign=middle> <td colspan=2> <td rowspan=2> <td bgcolor=green>	0..100 or 0%..100% 0..100 1..#of columns in table 1..#of rows in table for full range of colours go to the top of the page and click on the Colour page link

Well now that you have seen all of the attributes that can be used within the <td..> tag, I'd better explain them to you,
But to make life a little easier I'll show you a table modifcation, one table at a time. First off lets make a standard table with six cells, a table of two rows and three columns. :

Width and height
As you can see the table automatically makes and adjust all the variables of the simple table. Now lets change some parts of the table, first on the list is width. We'll modify the width of Row 1 Col 1 "Bubble" and next on the list is height, we'll modify the height of Row 2 Col 3 "Priss" . Let's give the first one a width of 160 and the second modification a height of 50. Note that the modification of height on one cell does effect the height of all cells in that row. :

<table border=1>
  <tr>
   <td>Bubble</td>
   <td>Gum</td>
   <td>Crisis</td>
  </tr>
  <tr>
   <td>Sylia</td>
   <td>Nene</td>
   <td>Priss</td>
  </tr>
  </table>

Bubble	Gum	Crisis
Sylia	Nene	Priss

Horizontal Alignment
As you can see the table shape has been heavily modified by adjusting the height or width of a td tag. Now it's time to show you the alignment of tags you can use within the td tag. First off we'll modify the width and height of Row 1 Col 1 "Bubble" and also modify the width and height of Row 2 Col 3 "Priss". We'll give them a height and width of 100, in this way we will have a couple of large boxes within the table to work with.
Once that has been achieved, it's time to start setting the alignment of a few cells. Notice how that all the text is automatically centered in the vertical section, this can be changed, but first lets work on the horizontal allignment.
Lets move to the right, Row 1 Col 3 "Crisis", we'll center, Row 2 Col 1 "Sylia" and even though it is standard alignment, we'll align Row 1 Col 1 "Bubble" to the left.

<table border=1>
  <tr>
   <td width=160>Bubble</td>
   <td>Gum</td>
   <td>Crisis</td>
  </tr>
  <tr>
   <td>Sylia</td>
   <td>Nene</td>
   <td height=50>Priss</td>
  </tr>
  </table>

Bubble	Gum	Crisis
Sylia	Nene	Priss

Vertical Alignment
The addition of alignment allows for a table to be made to look much more professional. Now it's time to show you some more of the alignment of tags you can use within the td tag. First off we'll modify the width and height of Row 1 Col 1 "Bubble" and also modify the width and height of Row 2 Col 3 "Priss". We'll give them a height and width of 100, in this way we will have a couple of large boxes within the table to work with.
Once that has been achieved, it's time to start setting the alignment of a few cells. Remember how all the text is automatically centered in the vertical section, this can be changed and now, I'll tell you how to do it.
Lets change the position of Row 1 Col 3 "Crisis" to the top of the cell, we'll put Row 2 Col 1 "Sylia" on the bottom of the cell and lastly we'll align Row 1 Col 1 "Bubble" to the center of the cell, though it may just look like a horizontal alignment.

<table border=1>
  <tr>
   <td width=100 height=100
   align=left>Bubble</td>
   <td>Gum</td>
   <td align=right>Crisis
   </td>
  </tr>
  <tr>
   <td align=center>Sylia
   </td>
   <td>Nene</td>
   <td width=100 height=100> 
   Priss</td>
  </tr>
  </table>

Bubble	Gum	Crisis
Sylia	Nene	Priss

Colspan and Rowspan
As you have seen, the width and height of a cell can be modified to whatever you want. Now there is an attricute that enables data to be in more than one cell, either horizontally or vertically. These tags are the Colspan and Rowspan tags. The use of these tags is going to modify our table in a drastic fashion. In our current table (6 cells) the first row "Bubble", "Gum", "Crisis" is the heading and it looks unprofessional having them separated like they are, to fix this we'll use the colspan tag. Just so I can show you the rowspan tag as well, I'll increase the size of the table by another row and add in some more data. What I'll do for Rowspan is I'll increas the rowspan of the middle cell Row 2 Col 2 "Nene". Also note, How I haven't modified the actual width or height of the table, making it a smaller and more managable table.

<table border=1>
  <tr>
   <td width=100 height=100
   valign=middle>Bubble
   </td>
   <td>Gum</td>
   <td valign=top>Crisis
   </td>
  </tr>
  <tr>
   <td valign=bottom>Sylia
   </td>
   <td>Nene</td>
   <td width=100 height=100> 
   Priss</td>
  </tr>
  </table>

Bubble	Gum	Crisis
Sylia	Nene	Priss

Colspan and Rowspan cont...
An important thing to notice in the rowspan and colspan part of tables is that, originally we had three cells saying "Bubble" "Gum" "Crisis, and when we made the <td colspan=3> call there was only one td in that table row (tr). The same thing occured when using the rowspan call. The third row did not have the normal middle td.
To simplify, if you use colspan to cover the whole length of a table's columns, then you remove all but the one td tag. If you use rowspan, note that you only have to place td tags in the position where you want cells to appear.

<table border=1>
  <tr>
   <td colspan=3>
 Bubble Gum Crisis</td>
  </tr>
  <tr>
   <td>Sylia</td>
   <td rowspan=2>Nene
</td>
   <tdPriss</td>
  </tr>
  <tr>
   <td>Linna</td>
   <td>Leon</td>
  </tr>	
  </table>

Bubble Gum Crisis
Sylia	Nene	Priss
Linna		Leon

Background Colour
Well you have read most of the important things about tables so far, the last thing to discuss in making tables is to have them consist of different colours. A good example of table colours is here :