Incorrect table rendering

Question

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1">
 <tbody>
  <tr>
   <td width="150" colspan="2" ></td>
   <td width="75"  colspan="1" ></td>
  </tr>
  <tr>
   <td width="75" colspan="1"></td>
   <td width="150" colspan="2"></td>
  </tr>
  <tr>
   <td width="75" colspan="1"  ></td>
   <td width="150" colspan="2" ></td>
  </tr>
  <tr> 
   <td width="75" colspan="1" ></td>
   <td width="150" colspan="2" ></td>
  </tr>
 </tbody>
</table>

This table should looks like

gridwizard.rayz.ru/images/correct.gif

but in real

gridwizard.rayz.ru/images/incorrect.gif

Is there any solutions?

Answer 1

This is happening because you only ever define two columns and colspan only works once enough columns to span are defined.

You can create a dummy row of 3 cells to define your structure, then the spanning will work. However, your cellpadding and spacing will cause a slight gap at the top of your table, so I'd suggest applying padding to <td>'s vis css rather than directly in the table. You can then hide your dummy column by not styling it.

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1">
 <tbody>
  <tr>
   <td width="100"></td>
   <td width="100"></td>
   <td width="100"></td>
  </tr>
  <tr>
   <td colspan="2">e</td>
   <td colspan="1">e</td>
  </tr>
  <tr>
   <td colspan="1">e</td>
   <td colspan="2">e</td>
  </tr>
 </tbody>
</table>

Another alternative is to create a proper table head (<thead> ... </thead>) where you label the columns and put the cells in there.

Answer 2

Four things:

1. colspan="1" is not required. It is the default value;
2. You should favour CSS. What you're doing is deprecated;
3. You don't need a width on every cell. Just the first one (in each column) is sufficient; and
4. Use the <col> element to explicitly layout your columns.

For example:

#mytable { width: 300px; height: 100px; border: border-collapse: collapse; }
#mytable td { border: 1px solid none; }

with:

<table id="mytable">
<col style="width: 75px;">
<col style="width: 75px;">
<col style="width: 75px;">
<tbody>
  <tr>
   <td colspan="2">...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td colspan="2">...</td>
  </tr>
  <tr>
   <td colspan="2">...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td colspan="2">...</td>
  </tr>
</tbody>
</table>