| 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>
|
|
| Picture in the table |
<table border=6>
<tr>
<td>
<img src="items/image.jpg" mce_src="items/image.jpg"></td>
</tr>
</table>
|
|
| Background |
<table border=3 background="backs/image.jpg">
<tr>
<td>
Background
</td>
</tr>
</table>
|
|
| 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>
 
</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 widthheight 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 theheight 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>
 
</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>
 
</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>
|
|
| 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>
|
|
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>
|
|
| 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>
|
|
| 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>
|
|
| 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>
|
|
|
