Splitting up a 3 rows evenly in a column for a table HTML

Question

So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,

<html>
<head>
<style>
  body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 12 px;
    color: #111111;}
  th {
    letter-spacing: 0.1em;
    border-bottom: 2px solid #111111;
    border-top: 1px solid #999;
  }

  .ExtractionConversion {
    background-color: #f4cccc;
  }
  .Cultivation {
    background-color: #d9ead3;
  }
  .Harvesting {
    background-color: #fce5cd;
  }
  .Dewatering {
    background-color: #c9daf8;
  }
  .Extraction {
    background-color: #d9d2e9;
  }
  .Conversion {
    background-color: #fff2cc;
  }
</style>
</head>

<body>
<table width=800 height=100 style="text-align: center" padding="10">
  <thead>
    <th>Cultivation</th>
    <th>Harvesting</th>
    <th>Dewatering</th>
    <th>Extraction</th>
    <th>Conversion</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4" class="Cultivation";>Photobioreactor</td>
      <td class="Harvesting">Centrifugation</td>
      <td rowspan="2" class="Dewatering">Heat Drying</td>
      <td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
      <td class="Conversion">Decarboxylation<td>
    </tr>
    <tr>
      <td class="Harvesting">Electrocoagulation</td>
      <td class="Conversion">Transesterfication</td>
    </tr>
    <tr>
      <td rowspan="2" class="Harvesting">Electroflocculation</td>
        <td rowspan="2" class="Dewatering">Speed Drying</td>
      <td colspan="2" class="ExtractionConversion">HTL-CHG</td>
    </tr>
    <tr>
      <td colspan="2" class="ExtractionConversion">Pyrolysis</td>
    </tr>
  </tbody>
</table>
<body>
</html>

Answer 1

You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.

 <html> <head> <style> body { font-family: Arial, Verdana, sans-serif; font-size: 12 px; color: #111111;} th { letter-spacing: 0.1em; border-bottom: 2px solid #111111; border-top: 1px solid #999; } .ExtractionConversion { background-color: #f4cccc; } .Cultivation { background-color: #d9ead3; } .Harvesting { background-color: #fce5cd; } .Dewatering { background-color: #c9daf8; } .Extraction { background-color: #d9d2e9; } .Conversion { background-color: #fff2cc; } </style> </head> <body> <table width=800 height=100 style="text-align: center" padding="10"> <thead> <th>Cultivation</th> <th>Harvesting</th> <th>Dewatering</th> <th>Extraction</th> <th>Conversion</th> </thead> <tbody> <tr> <td rowspan="4" class="Cultivation";>Photobioreactor</td> <td class="Harvesting">Centrifugation</td> <td rowspan="2" class="Dewatering">Heat Drying</td> <td rowspan="2" class="Extraction">Wet Solvent Extraction</td> <td class="Conversion">Decarboxylation<td> </tr> <tr> <td class="Harvesting">Electrocoagulation</td> <td class="Conversion">Transesterfication</td> </tr> <tr> <td rowspan="2" class="Harvesting">Electroflocculation</td> <td rowspan="2" class="Dewatering">Speed Drying</td> <td colspan="2" class="ExtractionConversion">HTL-CHG</td> </tr> <tr> <td colspan="2" class="ExtractionConversion">Pyrolysis</td> </tr> </tbody> </table> <br> <table width=800 height=100 style="text-align: center" padding="10"> <thead> <th>Cultivation</th> <th>Harvesting</th> <th>Dewatering</th> <th>Extraction</th> <th>Conversion</th> </thead> <tbody> <tr> <td rowspan="4" class="Cultivation";>Photobioreactor</td> <td rowspan="4" class="Harvesting" style="padding:0;"> <table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center"> <tr> <td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td> </tr> <tr> <td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td> </tr> <tr> <td class="Harvesting">Electroflocculation</td> </tr> </table> </td> <td rowspan="2" class="Dewatering">Heat Drying</td> <td rowspan="2" class="Extraction">Wet Solvent Extraction</td> <td class="Conversion">Decarboxylation<td> </tr> <tr> <td class="Conversion">Transesterfication</td> </tr> <tr> <td rowspan="2" class="Dewatering">Speed Drying</td> <td colspan="2" class="ExtractionConversion">HTL-CHG</td> </tr> <tr> <td colspan="2" class="ExtractionConversion">Pyrolysis</td> </tr> </tbody> </table> <br> <body> </html>

Splitting up a 3 rows evenly in a column for a table HTML

Question

1 answers

solution1
0 ACCPTED 2017-07-27 21:19:19

Splitting up a 3 rows evenly in a column for a table HTML

Question

1 answers

solution1 0 ACCPTED 2017-07-27 21:19:19

solution1
0 ACCPTED 2017-07-27 21:19:19