CODEWITHSUNDEEP
html
Renz M
Renz M

Reputation: 87

Multiple rows in a td

I've spent some time figuring out how to do this, and I figured out I'm really not good at html tables..

Need help how to actually do this.

Here is my base code I'm stuck with, No need for the table header

<table border="1" width="100%" height="300px">
  <tbody>
    <tr>
      <td rowspan="3">
        Physical Accomplishment
      </td>
      <td>Projected</td>
      <td>Weekly Cumulative</td>
    </tr>
    <tr>
      <td>Actual</td>
      <td>Weekly Cumulative</td>

    </tr>
    <tr>
      <td>Slippage</td>
      <td>Weekly Cumulative</td>
    </tr>
  </tbody>
</table>

Here's what I'm aiming for:

enter image description here

Upvotes: 4

Views: 2915

Answers (3)

DarkRob
DarkRob

Reputation: 3833

You need to learn these 2 important attributes in HTML table, rowspan= and colspan=.
Please find this link for tutorial Tutorial link.

For now this what you need...

<table border="1" width="100%" height="300px">
  <tbody>
    <tr>
      <td rowspan="6">
        Physical Accomplishment
      </td>
      <td rowspan="2">Projected</td>
      <td rowspan="2">Weekly Cumulative</td>
      <td>10%</td>
      <td>20%</td>
      <td>30%</td>
      <td>40%</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">Actual</td>
      <td rowspan="2">Weekly Cumulative</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">Slippage</td>
      <td rowspan="2">Weekly Cumulative</td>
      <td>10%</td>
      <td>20%</td>
      <td>30%</td>
      <td>40%</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

neophytte
neophytte

Reputation: 690

I use LibreOffice to draw out the table, then export the HTML to produce this:

<table border="1" width="100%" height="300px">
  <tr>
    <td rowspan=6>Physical Accomplishment</td>
    <td rowspan=2>Projected</td>
    <td rowspan=2>Weekly cumulative</td>
    <td>0.15%</td>
    <td>0.15%</td>
    <td>0.15%</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td rowspan=2>Actual</td>
    <td rowspan=2>Weekly cumulative</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>I</td>
  </tr>
  <tr>
    <td rowspan=2>Slippage</td>
    <td rowspan=2>Weekly cumulative</td>
    <td>0.15%</td>
    <td>0.15%</td>
    <td>0.15%</td>
  </tr>
  <tr>
    <td>j</td>
    <td>k</td>
    <td>l</td>
  </tr>
</table>

Upvotes: 3

klugjo
klugjo

Reputation: 20885

Use rowspan 6 for the first column and rowspan 2 for the second and third column

<table border="1" width="100%" height="300px">
   <tbody>
      <tr>
         <td rowspan="6">
            Physical Accomplishment
         </td>
         <td rowspan="2">Projected</td>
         <td rowspan="2">Weekly Cumulative</td>
         <td>10%</td>
         <td>20%</td>
         <td>30%</td>
         <td>40%</td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td rowspan="2">Actual</td>
         <td rowspan="2">Weekly Cumulative</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td rowspan="2">Slippage</td>
         <td rowspan="2">Weekly Cumulative</td>
         <td>10%</td>
         <td>20%</td>
         <td>30%</td>
         <td>40%</td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </tbody>
</table>

Upvotes: 6

Related Questions