0
私はHTMLとCSSを使用して作成した次の表を持っています：
しかし、Harvestingの下にある3つの情報は、それぞれのセルがハーベスティング列の同じ容量を占めることを確認します。私はそれを割り当てられているので今のところ、electroflocculationと表のセルは、temporarlyそれは理想的なセルの4/3のスペースを占有しなければならないときROWSPAN属性を使用して、そうするには、2つのセルのスペースを占有テーブルの列に3行を均等に分割するHTML
<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>
ありがとうございました。非常に有益であり、あなたがそれをする方法を私に教えてくれただけでなく、あなたが先に進み、それを私に見せてくれたことを私に教えてくれたことを大いに感謝します。 –
@MathewJacob全く問題ありません;）あなたはいつでもそれをアップヴォートして答えとして受け入れることができます：D – Varin