GREAT HTML TABLES - FOR BLOGGER, WORDPRESS, JOOMLA, PROJECTS.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 1: Simple Table

Demo:

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100	200	300
400	500	600

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 2: Tables Without Borders

Demo:

This table has no borders:

100	200	300
400	500	600

And this table has no borders:

100	200	300
400	500	600

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 3: Table Header

Demo:

Table headers:

Name	Telephone	Telephone
Bill Gates	555 77 854	555 77 855

Vertical headers:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

CODE: Get its code


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 4: Table with a Caption

Demo:

Monthly savings

Month	Savings
January	$100
February	$50

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 5: Table cells than span more than one row/column 

Demo:

Cell that spans two columns:

Telephone

Name

Bill Gates
555 77 854
555 77 855

Cell that spans two rows:

Telephone:

First Name:	Bill Gates

555 77 854
555 77 855

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 6: Tags inside a table

Demo:

This is a paragraph This is another paragraph	This cell contains a table: A B C D
This cell contains a list apples bananas pineapples	HELLO

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 7: Cell padding (controls white space between text and borders)

Demo:

Without cell padding:

First	Row
Second	Row

With cell padding:

First	Row
Second	Row

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 8: Cell spacing (controls space between cells)

Demo:

Without cellspacing:

First	Row
Second	Row

With cellspacing="0":

First	Row
Second	Row

With cellspacing="10":

First	Row
Second	Row

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Cell spacing (control the distance between cells) - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellspacing="0":</h4>

<table border="1" cellspacing="0">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellspacing="10":</h4>

<table border="1" cellspacing="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

GO BACK: HTML TABLES

Cell padding (control the white space between cell content and the borders) - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>Without cell padding:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cell padding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

GO BACK: HTML TABLES

Tag inside a Table - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<table border="1">

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

GO BACK: HTML TABLES

Table Cells than span more than row/column - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>Cell that spans two columns:</h4>

<table border="1">

<tr>

<th>Name</th>

<thcolspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<throwspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

GO BACK: HTML TABLES

Table With a Caption - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

GO BACK: HTML TABLES

Table Header - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>Table headers:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

GO BACK: HTML TABLES

Tables Without Border - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>And this table has no borders:</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>


GO BACK: HTML TABLES

Simple table - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<table border="1">

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

GO BACK: HTML TABLES