Dividing table rows

Question

I've got a very basic question. But I can not get this working correctly.

This is my table structure.

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

How can I get he output to be as

score 2 · Accepted Answer · answered Aug 10 '15 at 16:33

2

Use the colspan attribute. Colspan allows one td to span many columns.

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

answered Aug 10 '15 at 16:33

Hayden Schiff

3,280
19
41

When you've finished creating the tds, go back and count them, and then set the colspan. Sadly, there isn't really a non-hacky way to achieve "colspan=all" (setting colspan to a ridiculously large number, or doing `colspan="100%"` will probably work, but they aren't standardized so expect some browsers to get confused). [More info in this question](http://stackoverflow.com/questions/398734/colspan-all-columns) – Hayden Schiff Aug 10 '15 at 17:31
The previous comment was in response to a now-deleted comment from the question asker about dynamically setting the colspan if the number of tds in the next row is uncertain. I'll leave it up even in the absence of the OP's comment since it's still useful info. – Hayden Schiff Aug 10 '15 at 19:04

score 0 · Answer 2 · answered Aug 10 '15 at 16:35

Use <td style="color:#fff;" colspan="4">

see fiddle https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/1/

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

Dividing table rows

2 Answers2