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

rowspancolspan 结合:

<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
Last Updated: 7/16/2020, 11:24:55 PM