Rowspan/colspan problem

Question

I want to span the header of my table to 2 columns(2 td s) and to 2 rows(2 tr s). I tried using rowspan and colspan together, but it doesnot work for me. The header doesnot have anything written in it. It just colored background. Codes I wrote is as follows

<table width="100%" cellpadding = "2" cellspacing = "0"  border= "0">
<tr valign = "top"><th colspan = "2" rowspan = "2"  Style="background:#FCE14E"></th></tr>

Can I find an alternative for this. Thanks in advance.

Answer 1

The colspan should work. The rowspan is pointless here. The cell already covers the entire row. You cannot add another row to fill the remaining columns (because there are no remaining columns). You'd like to specify the height instead.

Here's the improved example:

<th colspan="2" style="height: 2em; background: #FCE14E;">&nbsp;</th>

Note that I added a   (non breaking space) because the cell would otherwise not render in MSIE browser. Also note that you should prefer using CSS classes above inline styles using style.

Answer 2

Can you please provide more of your markup? You'll need to have multiple rows and columns before this works well. This might be closer:

<table>
  <tr>
    <th>A</th>
    <th rowspan = 2 colspan = 2>B</th>
    <th>C</th>
  </tr>
  <tr>
    <th>D</th>
    <th>E</th>
  </tr>
</table>

Column Header B should end up filling 2 rows and 2 columns, pushing E below C when rendered.

Answer 3

You didn't put any text in the header tage, so no text will be displayed (unless you are using script to add the text).

<th colspan = "2" rowspan = "2" Style="background:#FCE14E">Table header text goes here</th>