Welcome
 Best viewed with IE4+ and a 800x600 screen

  Modem slow? Check Your Bandwidth Speed Here Check It With Net Monitor Get It Here!

Welcome

Site Menu

HTML Lessons

Sign Up Now. It's FREE

Name:

Email Address:




HTML Forum



Imp's Guestbook



Headline News

You'll find up to date news on subjects such as Late Breaking, World, International Sports, Entertainment, Music, Cricket, Formula 1 Racing, Golf, Soccer, Tennis, Track & Field, Hackers News, Lawsuits, War, Australia, France, Israel, Japan, South Africa and Great Britain.


Taking A Further Look At Tables Examples...

So you need more tables examples huh? Well here they are, I hope you like them, all the coding is provided for each example for you to use if so desired.



Example 1

1st
2ndAB
CD

<table border="1">
<tr>
<td colspan="3">1st</td>
</tr>
<tr>
<td rowspan="2">2nd</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>


Ok here's an explanation of what each of those above tags did in order to produce the above 6 cell table. Firstly, <table border="1">, this sets the table and the border around the 6 cell table, in order for you to see it, you may if you wish change this number from 1 to 0 or any other single digit number between 0 & 9, <tr>, this sets the table to have a Table Row, <td colspan="3">1st</td>, this opens a Table Data in the Table, stretching the cell across over 3 cells using colspan command, the </td>, this closes each Table Data in the Table, then we close that row with a </tr> and start a fresh row for the other cells using <tr>, now we have to use the rowspan command for Cell 2nd, because it stretches over 2 cells going down the Table like so, <td rowspan="2">2nd</td>, and then create Table datas for each of Cell A and Cell B as normal, for the last table row, we only require to create Cells C and Cells D, because we used rowspan="2" for Cell 2nd earlier, which took up the first Cell of Row 3, then close those off using </tr> and finally the </table> is used to close the whole Table, note once again we didn't have to use </table border>, that's because you only need the border command on the opening <table>.



Example 2 (8 Cell Table)

1234
ABC567
8DE9
1011

<table border="1">
<tr>
<td colspan="4">1234</td>
</tr>
<tr>
<td rowspan="3">ABC</td>
<td colspan="3">567</td>
</tr>
<tr>
<td>8</td>
<td rowspan="2">DE</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>



Example 3 (12 Cell Table)

A
B
C
D
E
123F
4567
G
H
I
89J
1011K
L
1213

<table border="1">
<tr>
<td rowspan="5">ABCDE</td>
<td colspan="3">123</td>
<td>F</td>
</tr>
<tr>
<td colspan="4">4567</td>
</tr>
<tr>
<td rowspan="3">GHI</td>
<td colspan="2">89</td>
<td>J</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td rowspan="2">KL</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
</tr>
</table>



Example 4 (A Table within a Table)

1stA2nd
BD
EF

<table border="3" cellpadding="5">
<tr>
<td>
<table border="1">
<tr>
<td rowspan="3">1st</td>
<td>A</td>
<td colspan="2">2nd</td>
</tr>
<tr>
<td colspan="2">B</td>
<td rowspan="2">D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
</td>
</tr>
</table>



Example 5 (Tables within a Table)

1st
2ndAB
CD
AAAAA
BBBBB
CCCCC
1st
2ndAB
CD

<table border="3" cellpadding="5">
<tr>
<td>
<table border="1">
<tr>
<td colspan="3">1st</td>
</tr>
<tr>
<td rowspan="2">2nd</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
<td>AA</td>
<td>AAA</td>
</tr>
<tr>
<td colspan="2">BB</td>
<td>BBB</td>
</tr>
<tr>
<td>CC</td>
<td>CCC</td>
<td>
<table border="1">
<tr>
<td colspan="3">1st</td>
</tr>
<tr>
<td rowspan="2">2nd</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>

Top

Home | My Interests | Imp's Chat Server | HTML Basics
HTML Advanced | HTML References | My Favourite Sites

Copyright © 2001 Imp's Basic HTML

Psend kept free because of these great sponsors.a..

Other Sponsors

electrical connectors, Mangosteen Juice, real estate short sale, Jupiter FL real estate,

Furniture Markdown

Great Deals on furniture - Free Shipping!
Discount Furniture
Daybeds
Metal Beds
Platform Beds
Futons

Y-Net Wireless Internet

Denver area high speed wireless privider.
Colorado High Speed Internet, Wireless Internet Denver, VOIP Denver CO, T1 provider Denver, Denver Wireless ISP , Denver Internet Access,

Dog House Technologies

Doghouse Techonologies is located in Tampa Bay FL and offer professional web design, ecommerce development and custom application design for the internet.
Tampa Bay Web Design, E-Commerce Web Design, Tampa Bay Search Engine Marketing, Tampa Web Hosting, Florida Web Design, Custom Application Development, Search Engine Optimization,

hosting.asp">Tampa Web Hosting and Florida Web Design This site hosted curtosy of Psend.com's Free Web Hosting. Psend is a division of Telos Online, Inc. Psend kept free because of these great sponsors.a..

Other Sponsors

electrical connectors, Mangosteen Juice, real estate short sale, Jupiter FL real estate,

Furniture Markdown

Great Deals on furniture - Free Shipping!
Discount Furniture
Daybeds
Metal Beds
Platform Beds
Futons

Y-Net Wireless Internet

Denver area high speed wireless privider.
Colorado High Speed Internet, Wireless Internet Denver, VOIP Denver CO, T1 provider Denver, Denver Wireless ISP , Denver Internet Access,

Dog House Technologies

Doghouse Techonologies is located in Tampa Bay FL and offer professional web design, ecommerce development and custom application design for the internet.
Tampa Bay Web Design, E-Commerce Web Design, Tampa Bay Search Engine Marketing, Tampa Web Hosting, Florida Web Design, Custom Application Development, Search Engine Optimization,