table 合并单元格
虽然表格布局的时代已经过去,但是并不代表就已经一无是处,只要用对地方仍是一把利器。例如要实现下面的效果 table 就具有天然优势:
Merokok Malam | Kanker Paru | Jumlah | |
YA | Tidak | ||
Ya | 3 | 0 | 3 |
Tidak | 1 | 3 | 4 |
Jumlah | 4 | 3 | 7 |
下面来看 table 如何大展身手:
Step1
应用了rowspan
的单元格可独占一行:
<table border="1px" cellspacing="0px">
<tr>
<td rowspan="2">Merokok Malam</td>
<td >Kanker Paru</td>
</tr>
<tr>
<td>YA</td>
</tr>
</table>
Merokok Malam | Kanker Paru |
YA |
Step2
应用了colspan
的单元格可独自占一列:
<table border="1px" cellspacing="0px">
<tr>
<td colspan="2">Kanker Paru</td>
</tr>
<tr>
<td>YA</td>
<td>Tidak</td>
</tr>
</table>
Kanker Paru | |
YA | Tidak |
Step3
rowspan
和colspan
结合:
<table border="1px" cellspacing="0px">
<tr>
<td rowspan="2">Merokok Malam</td>
<td colspan="2">Kanker Paru</td>
<td rowspan="2">Jumlah</td>
</tr>
<tr>
<td>YA</td>
<td>Tidak</td>
</tr>
</table>
Merokok Malam | Kanker Paru | Jumlah | |
YA | Tidak | ||
Ya | 3 | 0 | 3 |
Tidak | 1 | 3 | 4 |
Jumlah | 4 | 3 | 7 |