SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Tagxpert's Avatar
    Join Date
    Jul 2004
    Location
    INDIA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i wanted to create table besides table

    Hi,

    This is my website http://friendofgod.com

    On this page http://www.friendofgod.com/jesus.php bottom of the logo and image icons you can see 2 tables.........

    one at the left which is closed from the right (i am talking about html with images) and the another which is the body where the text is given.

    Now i wanted to make the tables into 3

    1 is left corner
    2 is the body for text
    3 for the right corner {same like the left corner but with the right corner images)

    I will use the same left corner images on the right side,also wanted to close.

    I am sure i wrote in detail.........
    website for Angels Friendofgod.com - My New yaalimadad.info -
    Community Site HuMMomin.COM - Live Radio ShiaRadio.COM

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u can add new table with as many rows and columns at that location. you can have nested / cascaded tables to any level till you follows proper closing and opening of td and tr
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    SitePoint Enthusiast Tagxpert's Avatar
    Join Date
    Jul 2004
    Location
    INDIA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you show me how to do it or can you paste the code,thanks.
    website for Angels Friendofgod.com - My New yaalimadad.info -
    Community Site HuMMomin.COM - Live Radio ShiaRadio.COM

  4. #4
    SitePoint Enthusiast roloenusa's Avatar
    Join Date
    Mar 2004
    Location
    Moorpark
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <table>
    'main table
    
    <tr>
    <td>
    'cell #1
    
    <table>
    <tr><td>
    Nested table #1
    </td></tr>
    </table>
    
    
    
    </td></tr>
    <tr>
    <td>
    'cell #2
    
    <table>
    <tr><td>
    Nested Table #2
    </td></tr>
    </table>
    
    
    
    </td></tr>
    </table>
    Don't forget to close all tags properly!!!

    You can add as many cells with tables inside as you want.. just be aware of design and userfriendly design.

    More tutorial at www.webmonkey.com www.sitepoint.com www.webthang.co.uk or do a search in google. There are tons of books that you can buy too, that explain who to create multiple tables, and programs such as dreamweaver with friendly interfaces to create this kind of design

  5. #5
    SitePoint Enthusiast Tagxpert's Avatar
    Join Date
    Jul 2004
    Location
    INDIA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the above code displays only one table, what i wanted to do is display tables in line like

    first table width=20% - besides 2nd table = 60% - besides 3rd table = 20%
    website for Angels Friendofgod.com - My New yaalimadad.info -
    Community Site HuMMomin.COM - Live Radio ShiaRadio.COM

  6. #6
    SitePoint Enthusiast roloenusa's Avatar
    Join Date
    Mar 2004
    Location
    Moorpark
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then you modify the code:

    a MainTABLE with three cells side by side (or as many cells as you need) and inside each cell you can nest a table.. set borders for MainTABLE to 0 so user can't see you did, and voila! got three tables side by side. You can do the same horizontaly and vertically, or nest tables within tables within tables. You just have to be resourceful.

    for the code above just take out the </tr><tr> tags between "nested table #1" and "nested table #2"... then you got 2 tables side by side!

    Nesting tables is the safest way to go for what you want to do.. Floating tables could go out of order if the screen is to small or to big. If you nest tables then you are making 100% sure that your content is going to be display the way you want to and won't change from browser to browser or from monitor to monitor.

    Besides it will make your life much easier when it comes down to rearraging content. and updating content later on.

  7. #7
    SitePoint Enthusiast Tagxpert's Avatar
    Join Date
    Jul 2004
    Location
    INDIA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok look at my html code
    =========================
    <table width='100%' border='0' cellspacing='0' cellpadding='2'>
    <tr>


    <td valign='top' class='row4'>

    <TABLE WIDTH="160" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>
    <td colspan='3'>
    &nbsp;
    </td>
    </tr>
    <TR>
    <TD WIDTH="10"><img src='images/blue/corner1.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/top.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner2.gif' border='0'></td>
    </tr><TR><TD WIDTH="10" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/left.gif); background-repeat: repeat-y;"></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" align='center'><P>
    <div class="username">Table 1 Colum

    <br/>
    <b></b>
    <br/>
    </span><br />
    <br/>

    <TD WIDTH="10" height="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/right.gif); background-repeat: repeat-y;">
    </tr>
    <TR>
    <TD WIDTH="10"><img src='images/blue/corner4.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/bottom.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner3.gif' border='0'></td>
    </tr>
    </table>

    <td class='row4'>
    <table width='100%' border='0' cellspacing='0' cellpadding='0' >
    <tr>


    <td valign='top' class='row4'>

    <TABLE WIDTH="420" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>
    <TD WIDTH="10" ><img src='images/blue/corner1.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/top.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner2.gif' border='0'></td>
    </tr><TR><TD WIDTH="10" height="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/left.gif); background-repeat: repeat-y;"></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" align='center'><P>
    <div class="username">Table 2 Colum : Body
    <br />

    <br/>
    <b></b>
    <br/>
    </span><br />
    <br/>
    <br/>

    <TD WIDTH="10" height="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/right.gif); background-repeat: repeat-y;">
    </tr>
    <TR>
    <TD WIDTH="10" ><img src='images/blue/corner4.gif' border='0'></td>
    <TD WIDTH="100%" height="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/bottom.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner3.gif' border='0'></td>
    </tr>
    </table>

    <td class='row4'>
    <table width='100%' border='0' cellspacing='0' cellpadding='0' >
    <tr>


    <td valign='top' class='row4'>

    <TABLE WIDTH="160" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>
    <TD WIDTH="10" ><img src='images/blue/corner1.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/top.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner2.gif' border='0'></td>
    </tr><TR><TD WIDTH="10" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/left.gif); background-repeat: repeat-y;"></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" align='center'><P>
    <div class="username">Table Colum 3
    <br />

    <br/>
    <b></b>
    <br/>
    </span><br />
    <br/>
    </td></p></td>
    <br/>

    <TD WIDTH="10" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/right.gif); background-repeat: repeat-y;">
    </tr>
    <TR>
    <TD WIDTH="10"><img src='images/blue/corner4.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/bottom.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner3.gif' border='0'></td>
    </tr>
    </table>
    </tr>

    <table width='100%' border='0' cellspacing='0' cellpadding='0' >
    <tr>


    <td valign='top' class='row4'>

    <TABLE WIDTH="160" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>
    <TD WIDTH="10" ><img src='images/blue/corner1.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/top.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner2.gif' border='0'></td>
    </tr><TR><TD WIDTH="10" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/left.gif); background-repeat: repeat-y;"></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" align='center'><P>
    <div class="username">SOME TEXT HERE
    <br />

    <br/>
    <b></b>
    <br/>
    </span><br />
    <br/>
    </td></p></td>
    <br/>

    <TD WIDTH="10" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/right.gif); background-repeat: repeat-y;">
    </tr>
    <TR>
    <TD WIDTH="10"><img src='images/blue/corner4.gif' border='0'></td>
    <TD WIDTH="100%" BGCOLOR="#E4EAF2" style="background-image: url(images/blue/bottom.gif); background-repeat: repeat-x;"></td>
    <TD WIDTH="10"><img src='images/blue/corner3.gif' border='0'></td>
    </tr>
    </table>
    ==========================
    Here there are 3 columns
    1 + 1 + 2

    and i wanted to make it
    3 + 1 + 3

    so what i need to modify or could you modify.

    Thanks.
    website for Angels Friendofgod.com - My New yaalimadad.info -
    Community Site HuMMomin.COM - Live Radio ShiaRadio.COM


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •