Html4newbies
Put your hands into html and php
Home
Privacy
About
Contact

Hosting Links
Hosting
Free Php Snippets
Php Snippets 1
Php Snippets 2
Tables


A html table uses the <table> </table> tags.
A table is divided into rows using the <tr> tag and the table data cells <td> tag
ALl of which require closing tags </tr> </td>

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>row 2, cell 2</td>
</tr>
</table>

Example 1

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

To add heading you add a <th> </th>

<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>row 2, cell 2</td>
</tr>
</table>

Example 2

Heading 1 Heading 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables with no content in a cell just replace a Empty Space symbles &nbsp;
Notice the difference ?

<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 3

Heading 1 Heading 2
row 1, cell 1 row 1, cell 2
row 2, cell 1

Example 4

Heading 1 Heading 2
row 1, cell 1 row 1, cell 2
row 2, cell 1  

Tables with no border

<table border="0">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 5

Heading 1 Heading 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables with a caption

<table border="1">
<caption>A Caption</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 6

A Caption
Heading 1 Heading 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Cell that spans two columns

<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 7

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Add more white space between the cell content and its borders using Cell Padding

<table border="1" cellpadding="5">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 8

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

To increase the distance between the cells using Cell Spacing

<table border="1" cellspacing="5">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 9

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Add color to background of table

<table border="1" bgcolor="green">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 10

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Add color to background of Cell

<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td bgcolor="red">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 11

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Add image to background of Cell

<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td bgcolor="button1.gif">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>&nbsp;</td>
</tr>
</table>

Example 12

A Caption
Heading 1
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


Copyright © 2002-2017 Html4newbies - HarlandScripts.com NetWork