ブログデザイン備忘録 ~表のセル結合

1. 表のセル結合
2. HTMLによる表作成
3. セル結合
4. まとめ

1. 表のセル結合

今回は表のセル同士を結合する方法について紹介する。はてな記法で比較的簡単に表を作成することができるが、セルの結合ははてな記法で表現することができない。そこでExelなどで表を作ってイメージで張り付けるなどの方法があるが、イメージ貼り付けは後で修正するときに、Exel修正→画像化→はてなアップロードと手順が多い。ということでHTMLコードで表を作成し、セルを結合するという方法を紹介する。

2. HTMLによる表作成

単純に3x3の表をHTMLで作成するには、次のようにする。<table>タグで表全体、<tr>タグは行、<td>タグでセルを設定する。

<table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
 </table>

1	2	3
4	5	6
7	8	9

見出しをつけるには<td>の代わりに<th>タグを用いると見出しの書式になる。（書式はデザインCSSで設定されているものになる)

<table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <th>4</th>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th>7</th>
      <td>8</td>
      <td>9</td>
    </tr>
 </table>

1	2	3
4	5	6
7	8	9

3. セル結合

セルを結合する場合は<td>,<th>タグ内に行方向（横）に2つ結合する場合はcolspan="2"、列方向（縦）rowspan="2"とする。文字中央揃えはタグ内にalign="center"とする。以下数種類のセル結合例を示す。

<table>
    <tr align="center">
      <th colspan="3">1</th>
    </tr>
    <tr>
      <th rowspan="2">4</th>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>

      <td>8</td>
      <td>9</td>
    </tr>
 </table>

1
4	5	6
4	8	9

<table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <th>4</th>
      <td colspan="2" align="center">5</td>
    </tr>
    <tr>
      <th>7</th>
      <td>8</td>
      <td>9</td>
    </tr>
 </table>

1	2	3
4	5
7	8	9

<table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <th>4</th>
      <td rowspan="2">5</td>
      <td>6</td>
    </tr>
    <tr>
      <th>7</th>
      <td>9</td>
    </tr>
 </table>