This website is hosted for free by free website - Webs.com. Get your own Free Website now!

Imp's Personal Corner Sign
 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:




Search The Web

Financial Quotes

Financial Quotes
Charts and News


Enter symbol
Quote
Charts
News
  

HTML Forum



Imp's Guestbook



World News At You Finger Tips
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.

World News At You Finger Tips

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

ALTERNATIVE SITE MENU
 
Home
About Me
Joke Of The Day
Games Zone
My Interests
Sharks
Crocs & Alligators
Florida Panther
Entertainment
Imp's Chat Server
Registration
Rooms List
Server Policy
Feedbacks
Contact
Other Chat Servers
HTML Basics
Creating A Web Page
Using Notepad
Using Colors
Creating Links
Using Images
Text Appearance
Using Lists
Horizontal Rules
Tables
Tables Examples
FTP Uploading
HTML Advanced
Cascading Style Sheets
Spacer GIF
Counters
Favourites Icons
Forms
Frames
Frames Examples
Getting Noticed
Image Maps
Page Transitions
Redirects
Site Search
Securing Your Images
Image Rollovers
Menus
Mouseovers
Javascripts
HTML References
My Colorchart
Character Codes
Web Hosts
HTML Tags List
Tags A-B
Tags C-E
Tags F (part 1)
Tags F (part 2)
Tags H-L
Tags M-P
Tags S-U
My Favourite Sites


Copyright © 2001 Imp's Personal Corner

In Association with Amazon.com
Join Going Platinum
In Association with Amazon.com