Why can't the browser render this table HTML properly?

user_10282866 0
Viewed 391

I'm struggling with TABLE HTML. I have no idea why this table tag doesn't work properly in browser

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">1-1</td>
      <td rowspan="3">2-1</td>
    </tr>
    <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="3">2-2</td>
    </tr>
    <tr>
      <td rowspan="2">1-3</td>
    </tr>
  </tbody>
</table>

The html above would be rendered like this

enter image description here

However the view I expected to see is like this

enter image description here

As I figured out, If I want to see what I want in browser, I should fix rowspans like this

<table border="1">
  <tbody>
    <tr>
      <td rowspan="1">1-1</td>
      <td rowspan="2">2-1</td>
    </tr>
    <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="2">2-2</td>
    </tr>
    <tr>
      <td rowspan="1">1-3</td>
    </tr>
  </tbody>
</table>

But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.

markup html-table html
2 Answers

According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">1-1</td>
    </tr>
     <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="2">2-1</td>
    </tr>
    <tr>
      <td rowspan="3">2-2</td>
    </tr>
     <tr>
      <td rowspan="2">3-1</td>
    </tr>
  </tbody>
</table>

user_7993420

Have you tried flexbox yet? It is little bit different approach to solve this.

#main {
    width: 100px;
    height: 150px;
    border: 1px solid #c3c3c3;
   
   align-items: stretch;
    display: flex;
    flex-flow: column wrap;
   
}

#main div {
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    
  
}

#right {
 width: 50px;
    height: 150px;
}

#right div {
 width: 50px;
    height: 75px;
   
    line-height: 70px;
    text-align: center;
    
    
}
<div id="main">
  <div style="background-color:lightgrey;" >1-1</div>
  <div style="background-color:grey;">1-2</div>
  <div style="background-color:lightgrey;">1-3</div>
<div id="right">
  <div id="right" style="background-color:lightblue;">2-1</div>
  <div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>

user_83584070
Related