CODEWITHSUNDEEP
htmlhtml-table
Andi Domi
Andi Domi

Reputation: 751

How to put a div inside a table

I would like to put a <div> inside a table but the <div> has to cover 2 cells and 2 rows:

enter image description here

For example I would like to put :

(WonderWidget ,2ND Quarter)
(WonderWidget ,3ND Quarter)
(MegaWidget ,2ND Quarter)
(MegaWidget ,3ND Quarter)

into a <div> is that possible?

Upvotes: 0

Views: 139

Answers (4)

Aditzu
Aditzu

Reputation: 706

Remember! A div can stay in a table only in td. Therefore you need to make a td as "big" as two rows and two columns.

Here I made an explicit example: http://jsfiddle.net/ZLpay/ and is something like that :

 <tr>
    <td>WonderWidget</td>
    <td>$x</td>
    <td colspan="2" rowspan="2">$x</td>
    <td>$x</td>
 </tr>

Upvotes: 1

user3087089
user3087089

Reputation:

Hi it's very easy and it's possible. Just use colspan and rowspan

Code:

<style>
table, table * {
    border: 1px solid #000;
}
</style>
<table>
    <thead>
        <tr>
            <th>PRODUCT</th>
            <th>1ST QUARTER</th>
            <th>2ND QUARTER</th>
            <th>3RD QUARTER</th>
            <th>4TH QUARTER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>SupaWidget</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>WonderWidget</td>
            <td>$x</td>
            <td colspan="2">$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>MegaWidget</td>
            <td>$x</td>
            <td colspan="2">$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>HyperWidget</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
        </tr>
    </tbody>
</table>

Visit this jsFiddle.

Upvotes: 1

saipanman
saipanman

Reputation: 37

Try this:

<table>
 <thead>
  <tr>
    <th>header1</th><th>header2</th><th>header3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan = "2">
     <div class="myStyle">
      Entry for headers 1 and 2
     </div>
   </td>
   <td>
     Entry for header 3
   </td>
  </tr>
 </tbody>
</table>

the same principal can be followed for added rowspans

Additionally check http://www.w3schools.com/tags/att_td_rowspan.asp

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

<td colspan="2" rowspan="2">
    <div>WonderWidget </div>
</td>

Upvotes: 1

Related Questions