HTML | rowspanやcolspanを使ってテーブルのセルを結合する

HTMLのtableを作っている時に、セルを結合して一つにしたいということがあるかと思います。
そんなときは、rowspanやcolspanタグを使います。
rowspan属性は行を結合して、colspanは列を結合します。

論より証拠で、サンプルを見てみましょう。

以下のような表を作ってみたいと思います。

f:id:sho322:20140916082015j:plain

これはExcelで作ったのですが、これをHTMLにして書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>

<h3>テーブルを結合する</h3>
<table border="1">
<caption>収益表</caption>
<thead>
  <tr>
    <th>PV数</th>
    <th>単価</th>
    <th>収益</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>10000</td>
    <td rowspan="2">30</td>
    <td>300000</td>
  </tr>
  <tr>
    <td>20000</td>
    <td>60000</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
    <td>2100000</td>
  </tr>
</tfoot>
</table>

</body>
</html>