CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 5585

Dividing table rows

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

enter image description here

Upvotes: 2

Views: 49

Answers (2)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

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>

Upvotes: 0

Hayden Schiff
Hayden Schiff

Reputation: 3330

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>

Upvotes: 2

Related Questions