Some Text in a table	To Create a Table you need 3 HTML tags <table> & </table> to start and finish the table <tr> & </tr> to start and finish each row in the table <td> & </td> to start and finish cell in the row
<table> <tr> <td> Some Text in a table </td> </tr> </table>
Some Text in a table With a border	The default border setting for a table is 0, which makes it invisible as you saw above. This table has its border set to 1.
<table border=1> <tr> <td> Some Text in a table<br>With a border </td> </tr> </table>
Some Text in a table With a thicker border	Setting the border to a higher number makes the outer edge of the table thicker with a sloping effect.
<table border=10> <tr> <td> Some Text in a table<br>With a thicker border </td> </tr> </table>
	This can look good with a picture in the table
<table border=10> <tr> <td> <img src="items/i02.jpg"></td> </tr> </table>
A Patterned Background	One of the main uses for tables, in item descriptions and on pages, is to add patterned background images.
<table border=1 background="backs/b27.jpg"> <tr> <td> A Patterned Background </td> </tr> </table>
A Yellow Background	Or a solid coloured background.
<table border=1 bgcolor=yellow> <tr> <td> A Yellow Background </td> </tr> </table>
Cell 1 Cell 2 Cell 3 Cell 4	Up until now I have just had single cell tables but you can build them with as many columns and rows as you want.
<table border=1 > <tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr> <tr> <td> Cell 3 </td> <td> Cell 4 </td> </tr> </table>
1 A longer line of text 3 4	The size of the cells in a table expands to accommodate the text (and/or images) placed in them. You will also notice that the 4th cell has nothing in it and does not have the sunken area.
<table border=1 > <tr> <td> 1 </td> <td> A longer line of text </td> </tr> <tr> <td> 3<br>4 </td> <td> </td> </tr> </table>
1 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 3 4	The cell will continue to expand until the table becomes too large for the available space then the content will be wrapped onto the next line(s). The 4th cell now looks normal due the use of a &nbsp, a non breaking space character.
<table border=1 > <tr> <td> 1 </td> <td> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z </td> </tr> <tr> <td> 3<br>4 </td> <td> &nbsp </td> </tr> </table>
1 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 3 4	A width of a column of cells can be set with the width parameter. In this example the first column has been set to 50% of the table width. The second column will therefore take up the remaining 50%. The Height of cells is set with the height parameter. Giving just a number sets the height, or width, in pixels. The second row is set to a height of 100 pixels.
<table border=1 > <tr> <td width=50%> 1 </td> <td> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z </td> </tr> <tr> <td height=100> 3<br>4 </td> <td> &nbsp </td> </tr> </table>
1 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 3 4	You can also use the width and height parameters with the table tag to define overall sizes for the whole table. In this case the table width is 60% of the available width. The overall height is set at 300, as the second row is set to a height of 100 the remaining 200 is used by the first row. You will notice that by default the text in these cells is being vertically center aligned.
<table border=1 width=60% height=300> <tr> <td width=50%> 1 </td> <td> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z </td> </tr> <tr> <td height=100> 3<br>4 </td> <td> &nbsp </td> </tr> </table>
1 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z	The valign parameter is used to position the cell contents at the top, middle or bottom of the cell
<table border=1 width=60% height=200> <tr> <td width=50% valign=top> 1 </td> <td valign=bottom> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z </td> </tr> </table>
1 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z	Up until now the cells have all been defined with the td tag. There is also a th tag which sets the cell content to bold type and centers it. All cell parameters can be used with the td & th tags.
<table border=1 height=100> <tr> <td> 1 </td> <th> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z </th> </tr> </table>
Cell 1 Cell 2 Cell 3 Cell 4	More complex cell layouts can be achieved using the rowspan & colspan parameters
<table border=1> <tr> <td colspan=2> Cell 1 </td> <td rowspan=2> Cell 2 </td> </tr> <tr> <td> Cell 3 </td> <td> Cell 4 </td> </tr> </table>
Cell 1 Cell 2	The cellpadding table parameter adds a margin within each cell in the table. While the cellspacing parameter makes the table borders thicker.
<table border=1 cellpadding=10 cellspacing=10> <tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr> </table>
	The cellspacing parameter is used here along with a background image to give a patterned frame to a picture
<table border=0 cellspacing=15 background="backs/b80.jpg"> <tr> <td> <img src="items/i02.jpg"> </td> </tr> </table>
Cyan Background Default Table Background A Different Background Image A Background colour & Image	Background images and colours in cells and in the whole table can be combined however you want. When a background image is being used a similar background colour is often set as well so that while the image is loading the page is still readable. This is especially important if a dark background image is being used as the font colour will be set to a light colour.
<table border=1 cellspacing=10 cellpadding=10 background="backs/b12.jpg"> <tr> <td bgcolor=cyan> Cyan Background </td> <td> <font color=white>Default Table Background</font> </td> </tr> <tr> <td background="backs/b22.jpg"> <font color=white>A Different Background Image</font> </td> <td bgcolor=black background="backs/b64.jpg"> <font color=white>A Background colour & Image</font> </td> </tr> </table>
Normal text Text in Arial & Blue Here is some text inside the inner table	Tables can be nested inside each other. In this example the parent cell is defined with the th tag which is centring the inner table (and is setting the bold font). This bold font is not applied to the cell in the inner table which is defined with the td tag. As you can see the inner table has inherited the Arial font but not the colour.
<table border=1 width=100% height=100> <tr> <th> Normal text<br> <font color=blue face="arial">Text in Arial & Blue <table border=1> <tr> <td> Here is some text inside the inner table </td> </tr> </table> </font> </th> </tr> </table>
Some text in a table	The border of a table can be coloured using the bordercolour parameter
<table width=50% bordercolor=red border=1 cellpadding=10> <tr> <td> Some text in a table </td> </tr> </table>
Some text in a table	With the addition of some style elements the tables border can be further altered
<table width=50% bordercolor=red border=1 style="border-collapse:collapse" cellpadding=10> <tr> <td> Some text in a table </td> </tr> </table>
Some text in a table	The border-style style parameter can be set to dotted, dashed, double, groove, ridge, inset & outset. I will leave you to find out what they look like.
<table width=50% bordercolor=green border=2 style="border-style:dotted; border-collapse:collapse" cellpadding=10> <tr> <td> Some text in a table </td> </tr> </table>
If you have found this helpful and make use of it in Item Descriptions, on pages etc please add this link to the page <center> <table bgcolor=white border=1><tr><td><font size=-2> HTML Code Segments by <a href="http://www.ukauctionhelp.co.uk" target="_blank">UK Auction Help</a> </font></td></tr></table> </center> HTML Code Segments by UK Auction Help ? How to copy & paste these code segments