Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question create specific html table...

    hi everybody...

    I wanna create a table I attached its pic , then I'm going to insert pictures in that and actually I use this table because of differences in my pics size...
    The problem is that I couldn't find the way I can customize my columns width or merge it in some rows!

    by the way if u have another easy solution for managing these contents let me know

    and I should said that this html page that was created used to send as an advertisement email , I heard sth about that yahoo and gmail won't accept some css code, and I try "float" before in my css codes when I test it in yahoo mail I see one of pics out of border !
    or maybe I didn't use it in a correct way...

    so plz help me in this , TnQ

    create specific html table...-tble.png

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    366
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Hello Rahas,
    Have some code for me to see,
    or perhaps a link to that table code?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,348
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Because you say the pictures are different sizes try this. You need to style the TDs no matter what you do. I hope it works

    <table border="1">
    <tr><td style="text-align:center;" style="text-align:center;"></td><td style="text-align:center;" colspan="2"></td></tr>
    <tr><td style="text-align:center;"></td><td style="text-align:center;" colspan="2"></td></tr>
    <tr><td style="text-align:center;"></td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr>
    </table>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Hello Rahas,
    Have some code for me to see,
    or perhaps a link to that table code?
    sure!
    this the code I use to put my pics but the result (which ofcource u can see it if u save this as a .html file) isn't what I shown in it in my first post pic!


    <div id="center">

    <table style='width:640px vertical-align:center'>

    <tr>
    <td>
    <div class="block1">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="274" height="215" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block1</h5></a></li>
    </ul>
    </div>
    </div>
    </td>

    <td>
    <div class="block2" >
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="329" height="215" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block2</h5></a></li>
    </ul>
    </div>
    </div>
    </td>

    </tr>

    <tr>
    <td>
    <div class="block3">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="213" height="221" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block3</h5></a></li>
    </ul>
    </div>
    </div>
    </td>

    <td>
    <div class="block4">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="384" height="221" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block4</h5></a></li>
    </ul>
    </div>
    </div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="block5">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="211" height="217" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block5</h5></a></li>
    </ul>
    </div>
    </div>
    </td>

    <td>
    <div class="block6">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="175" height="217" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block6</h5></a></li>
    </ul>
    </div>
    </div>
    </td>

    <td>
    <div class="block7">
    <div class="block-content">
    <a href="#"><img class="content-pic" src="src" width="178" height="217" alt="" /></a>
    <ul>
    <li><a href="#"><h5>block7</h5></a></li>
    </ul>
    </div>
    </div>
    </td>
    </tr>

    </table>
    </div>


    and I check this code again in my browser, I notice that vertical align doesn't work too ! why ?! :|

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Because you say the pictures are different sizes try this. You need to style the TDs no matter what you do. I hope it works

    <table border="1">
    <tr><td style="text-align:center;"></td><td style="text-align:center;" colspan="2"></td></tr>
    <tr><td style="text-align:center;"></td><td style="text-align:center;" colspan="2"></td></tr>
    <tr><td style="text-align:center;"></td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr>
    </table>
    yeah! Tnx it was good no I realize the use of "colspan" !
    it's so similar to what I want
    would u plz tell me how can I centeralize each cell content ?!

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,083
    Thanks
    15
    Thanked 245 Times in 245 Posts
    You can give the table an ID, and use .css to style it, and get rid off all that inline code. You can use javascript or some server-side language to generate the table according to need and completely automate the process.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You can give the table an ID, and use .css to style it, and get rid off all that inline code. You can use javascript or some server-side language to generate the table according to need and completely automate the process.
    yeah ! but email clients don't accept css files and I need it to be inline... as I said I want this for an advertisement email.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,196
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    They don't accept CSS files, true. But you can still put all the CSS in the <head> of the <html>.
    Code:
    <html>
    <head>
    <style type="text/css">
    ... all your styling goes here ...
    </style>
    </head>
    <body>
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,196
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    So you seem to be asking: "What do I do if, for example, the image in section 3 is 80% as wide as the screen and 50% as tall as the screen?"

    In other words, how do you make all the rest of the cells adapt to this one over-large image?

    Or would you rather do it the other way around? No matter what size the images are, you grow or shrink them to fit your pre-defined layout?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,196
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Personally, I would go with the idea of limiting the size of the images.

    Then, when a user hovers over an image (or clicks on it, your choice), you use an overlay to display the image in full size.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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