CSS table styles

Question

CSS is my weak side and now I'm trying to improve it, can you please help me to spot what's the problem is, moreover which css style I'm missing. I need to make table like in top picture

<table>
  <tr>
    <td style=width:"177px; height:92px"><img src="logo.png"></td>
    <td rowspan="2"><img src="img2.png"></td>  
  </tr>
  <tr>
    <td style=width:"177px; height:100px"><img src="img1.png"></td>
  </tr>
  </tr>
</table>

UPDATE: I forgot to mention that I was doing HTML email so solved my issue. Thanks for your help

It also doesn't look much like tabular data to me. You may solve this with another markup as well. Or is this for a newsletter? — insertusernamehere, Oct 08 '13 at 11:07

Dave · Accepted Answer · 2013-10-08T11:13:04.557

I think you just need to make the table default CellSpacing and CellPadding 0 (assuming the top picture in your post is the desired result)

 <table cellpadding=0 cellspacing=0 >

Although DIV's may be easier

<div>
  <div style = width:"177px; height:92px; float:left;">
       <img src="logo.png"><br />
       <img src="img2.png">
  </div>
  <div style=width:"177px; height:100px; float:left;">
      <img src="img1.png">
  </div>
</div>

Then, let's take it 1 step further

<style>
.wrapper
{
    background-color:#ccc;
    padding:5px;
}
.content
{
    width:177px; 
    height:100px; /*Made them both 100px although one was 92px, this may not be correct*/
    float:left;
}
</style>


<div class="wrapper">
  <div class="content">
       <img src="logo.png"><br />
       <img src="img2.png">
  </div><!--/content-->
  <div class="content">
      <img src="img1.png">
  </div><!--/content-->
</div><!--/wrapper-->

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

The property you are looking for may be border-spacing, E.G. border-spacing: 0; (other table specific CSS properties) however you may wish to consult this topic first: Why not use tables for layout in HTML?

edited May 23 '17 at 12:07

Community

1
1

answered Oct 08 '13 at 11:11

i_like_robots

2,760
2
19
23

Thank you for your recommendation about table HTML layout, but today I need exactly to do in this layout for HTML email. – ummahusla Oct 08 '13 at 11:15
@Edvin Antonov Ahh, you may want to add that to your question. With emails, yeah, go crazy with the table layout! – i_like_robots Oct 08 '13 at 11:16
Yeah, I absolutely forgot about that, but anyway thank for your help – ummahusla Oct 08 '13 at 11:24

score 0 · Answer 3 · answered Oct 08 '13 at 12:23

Try This one:

css

  table {border:1px solid #ccc; 
 .logo{ width:100px; }.img2{ width:300px }

HTML

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="logo">
     <img src="logo.png" /><br />
     <img src="img1.png">
    </td>
    <td class="img2"><img src="img2.png"></td>
  </tr>
 </table>

score -1 · Answer 4 · answered Oct 08 '13 at 11:10

-1

height is the problem. Decrease the height of logo.png image.

answered Oct 08 '13 at 11:10

Vivek Kumar

1,204
4
15
35

1

This should be a comment rather than answer. – vishalkin Oct 08 '13 at 11:11

CSS table styles

4 Answers4