CODEWITHSUNDEEP
htmlcsshtml-table
Ankur
Ankur

Reputation: 149

html table using rowspan colspan

I am trying to create a table that looks as follows ..

enter image description here

table, td {
  border-collapse: collapse;
  border: 2px solid blue;
}
<table>
  <tr>
    <td rowspan='6' colspan='6'>&nbsp;</td>
    <td rowspan='4'>&nbsp;</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

In the my code, are the empty rows causing it to mis-print the table ? Can you tell why browsers are rendering it incorrectly ? Or flaw in logic ?

Upvotes: 2

Views: 725

Answers (2)

Sreekanth
Sreekanth

Reputation: 3130

You need to update your css on cell dimensions.

Here is what you could do.

table,
td {
  border-collapse: collapse;
  border: 2px solid blue;
  text-align: center;
}
table {
  width: 100%;
  height: 350px;
}
td {
  width: 50px;
  height: 50px;
}
<table>
  <tr>
    <td rowspan='6' colspan='6'>6X6</td>
    <td rowspan='4'>4X1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>1
    </td>
  </tr>
  <tr>
    <td>2
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Liang
Liang

Reputation: 515

in this case, I suggest you use div float layout instead of a table layout. Add 11 div blocks with float:left style will be much easier to solve

Upvotes: 0

Related Questions