CODEWITHSUNDEEP
htmlhtml-table
Lenka Franeková
Lenka Franeková

Reputation: 95

TD rowspan not working

I have the table: 

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"  
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70" 
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410" 
height="21" alt="">
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410" 
height="29" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195" 
height="50" alt=""></td>
</td>
</tr>
</table>

It is supposed to be 3 columns table where second and third td are in one column. However, now it is in 2 columns.

Upvotes: 5

Views: 38990

Answers (7)

Ondrej Tokar
Ondrej Tokar

Reputation: 5070

You might create new table in the TD with 2 rows.

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0" style="display: block;">
  <tr>
    <td rowspan="2">
      <img src="https://picsum.photos/70/49" width="70" height="49" alt="" />
    </td>
    <td>
      <table width="410">
        <tr>
          <td valign="top">
            <img src="https://picsum.photos/410/21" width="410" height="21" alt="" />
           </td>
        </tr>
        <tr>
          <td valign="bottom">
            <img src="https://picsum.photos/410/29" width="410" height="29" alt="" />
          </td>
        </tr>
      </table>
    </td>
    <td rowspan="2">
      <img src="https://picsum.photos/195/50" width="195" height="50" alt="">
    </td>
  </tr>
</table>

Upvotes: 3

profimedica
profimedica

Reputation: 2830

Check your CSS

This prevents you to span:

td { display: inline-block; }

Another case according to Simon_Weaver as per later comment:

{ display: flex}

Upvotes: 11

WeSt
WeSt

Reputation: 2684

You used rowspan="2" on the first and last . Rowspan means that this cell spans two rows. If you want the cell to span over two columns in the same row, you have to use the colspan property. Check out the two snippets to see the difference:

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
<tr>
    <td colspan="2">a</td>
    <td>b</td>
    <td>c</td>
</tr>


<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
        <td>e</td>
    </tr>
</table>

Upvotes: 6

Conffusion
Conffusion

Reputation: 4475

The second image must be on the next line. By the rowspan=2 of the first column it will be added to the second column:

<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"  
       style="display:block">
  <tr>
    <td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70" 
         height="49" alt=""></td>
    <td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410" 
        height="21" alt=""></td>
    <td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195" 
     height="50" alt=""></td>
  </tr>
  <tr>
    <td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410" 
        height="29" alt=""></td>
  </tr>
</table>

Upvotes: 0

freefaller
freefaller

Reputation: 19953

As mpcabd says in their answer, you're missing the </td> tag at the end of the second <td>

However, another issue is that you don't have a 2nd row for the rowspan="2" to go into.

My guess is you're after this...

<table>
  <tr>
    <td rowspan="2"><img ... /></td>
    <td><img .. /></td>
    <td rowspan="2"><img .. /></td>
  </tr>
  <tr>
    <!-- Note, you don't need anything here, as the rowspan will take it's place -->
    <td><img .. /></td>
    <!-- Note, you don't need anything here, as the rowspan will take it's place -->
  </tr>
</table>

Upvotes: 1

o--oOoOoO--o
o--oOoOoO--o

Reputation: 770

Try this:

<table>
  <tr>
    <td rowspan="2">a</td>
    <td>b</td>
    <td rowspan="2">d</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
</table>

Fiddle: http://jsfiddle.net/oc9vabvx/

Upvotes: 0

mpcabd
mpcabd

Reputation: 1807

You forgot to close the second <td /> tag.

Upvotes: 5

Related Questions