Table HTML:


This page contains a table HTML tutorial.

For Basic HTML go here

Basic Tables:

Tables are made up of a table tag <table> a table row tag <tr> and a table data tag <td> They need to be in the correct order and all table tags need their closing tags. </table> or </tr> or </td>

A single celled table tag:

<table border=1><tr><td> Words </td></tr></table>

Words

Multiple columns (datas):

<table border=1><tr><td>Words1 </td><td>Words2 </td><td>Words3</td><td>Words4 </td></tr></table>

Words1 Words2 Words3Words4

Notice there is only one opening and one closing <tr> </tr> tag and all the <td> and </td> tags are enclosed by them.

Multiple rows:

<table border=1><tr><td> First row </td></tr><tr><td> Second row</td></tr></table>

First row
Second row

Notice that each data still needs to be enclosed by a <td> and </td> tag.

Multiple columns (data) and rows:

<table border=1><tr><td> Words1 </td><td> Words2</td><td>Words3</td></tr><tr><td> Words4</td><td>Words5</td><td>Words6</td></tr></table>

Words1 Words2Words3
Words4Words5Words6

Somewhat advanced Tables:

To change the color of the table's background:

<table border=1 bgcolor=yellow><tr><td> Words </td></tr></table>
Words

To remove the tables border:

<table border=0 bgcolor=yellow><tr><td> Words </td></tr></table>
Words

To increase the tables border:

<table border=5 bgcolor=yellow><tr><td> Words </td></tr></table>
Words

To change the cellpadding:
<table border=1 cellpadding=20><tr><td> Words </td></tr></table>
Words
To change the cellspacing:
<table border=1 cellspacing=20><tr><td> Words </td></tr></table>
Words
We can increase the width and height of a cell within the table:

<table border=1><tr><td height=50 width=100> Words1 </td><td> Words2</td><td>Words3</td></tr><tr><td> Words4</td><td>Words5</td><td>Words6</td></tr></table>
Words1 Words2Words3
Words4Words5Words6

We can make the table take the entire screen:

<table border=1 width=100%><tr><td> Words1 </td><td> Words2</td><td>Words3</td></tr><tr><td> Words4</td><td>Words5</td><td>Words6</td></tr></table>
Words1 Words2Words3
Words4Words5Words6

We can align a cell's words in the table.

<table border=1 width=100%><tr><td align=right valign=top height=50> Words1 </td><td> Words2</td><td>Words3</td></tr><tr><td> Words4</td><td>Words5</td><td>Words6</td></tr></table>
Words1 Words2Words3
Words4Words5Words6

Note: vertical alignment for the words in a cell uses "valign" and the words "top" "middle" and "bottom". Horizontal alignment uses the "align" tag and the words "left" "right" and "middle".

We can give the second column in a table 60% of the screen width and the others will get the leftover 40% (20% each) automatically as in:

<table border=1 width=100%><tr><td> Words1 </td><td width=60%> Words2</td><td>Words3</td></tr><tr><td> Words4</td><td>Words5</td><td>Words6</td></tr></table>
Words1 Words2Words3
Words4Words5Words6

We can make a cell extend over other cells horizontally:
<table border=1><tr><td colspan=2> Words1 </td><td>Words3</td ></tr><tr><td>Words4</td><td>Words5</td><td>Words6</td></tr></table>
Words1 Words3
Words4Words5Words6

Or vertically:
<table border=1><tr><td rowspan=2> Words1 </td><td> Words2</td><td>Words3</td></tr><tr><td>Words5</td><td>Words6</td></tr></table>
Words1 Words2Words3
Words5Words6

A complex table within a table::
Discount Price Size
without

surcharge

 $ 223 32"
$ 146"
with

surcharge

 $ 14018"
$ 63"

<table border=1 cellspacing=4 cellpadding=5><tr><td><table border=0 cellpadding=5 bgcolor=white><tr><td bgcolor=red><u><b>Discount</b></u></td><td bgcolor=lightblue> Price </td><td align=right bgcolor=lightblue>Size</td></tr><tr> <td align=right rowspan=2>without <p> surcharge</td><td align=right> $ 223</td> <td align=right> 32"</td></tr><tr> <td align=right>$ 14</td><td align=right>6"</td></tr><tr> <td align=right rowspan=2> with <p> surcharge</td><td align=right> $ 140</td><td align=right bgcolor=blue><font color=white>18"</font></td></tr><tr> <td align=right>$ 6</td><td align=right>3"</td></tr></table></td></tr></table>


FastCounter by bCentral