1

I need the following type of table in html

enter image description here

i.e., with fused rows in the second column (one entity). Basically, there would be text in the four non-fused cells and an image in the fused ones. How can I do this? If there is a way wherein I can avoid the use of tables, that would be better.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ranveer
  • 6,683
  • 8
  • 45
  • 92

1 Answers1

3

You need to use rowspan="4" attribute in the second TD of the first row. e.g.

   <table>
       <tr>
         <td></td>
         <td rowspan="4"></td>
       </tr>
       <tr>
         <td></td>
       </tr>
       <tr>
         <td></td>
       </tr>
       <tr>
         <td></td>
       </tr>
   </table>

This specifies that the second cell in the first row spans over 4 rows. Notice that in the 2nd to 4th rows there is no need to specify a second column as that is already specified in the first row.

However: if you are using this just for layout then I would avoid the table altogether and use some divs and CSS to achieve the same result.

    <div class="outer">
        <div class="left">
             <div></div>
             <div></div>
             <div></div>
             <div></div>
        </div>
        <div class="right">
           <!-- image here -->
        </div>
        <br style="clear:both;"/>
    </div>

And CSS:

    .left{
       float:left;

     }
    .right{
       float:left
     }

You can find some good advice on this layout in this answer.

Or with Bootstrap:

<div class="row">
  <div class="col-md-6">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
  </div>
  <div class="col-md-6">Your Image Here</div>
</div>
Community
  • 1
  • 1
Vincent Ramdhanie
  • 102,349
  • 23
  • 137
  • 192
  • I think it should be `rowspan`. I mean `rowspan` works, `colspan` doesn't in my case. Secondly, can I do anything better than using tables? – Ranveer Dec 15 '13 at 18:39
  • Thanks @Ranveer...that's absolutely right. I had things crooked in my head. – Vincent Ramdhanie Dec 15 '13 at 18:44
  • Ah! Great idea! `float` totally ought to work. The problem is my webpage is responsive (I'm using bootstrap 3.0). Won't it screw up? – Ranveer Dec 15 '13 at 18:49
  • Ah Bootstrap..that makes a big difference. Bootstrap has all the things you need to make this layout and to make it fluid. – Vincent Ramdhanie Dec 15 '13 at 18:50
  • I can't use `col-xx-#` since this layout is already inside one. – Ranveer Dec 15 '13 at 18:51
  • 1
    You are allowed to nest these grids. Just wrap it in a another row and it should work. If you are already familiar with doing it in bootstrap then give it a try. – Vincent Ramdhanie Dec 15 '13 at 18:54
  • That worked well! So basically this question had nothing to do with my problem! Thanks for your help! – Ranveer Dec 15 '13 at 19:05