表の結合をやってみる

カスタムHTML

　エクセルだと簡単にできる表の結合だが、webの表ではどの様に操作するのか分からない。良く使いそうな操作なので調べて出来る様にしてみたい。

　まず、ホームページやこの投稿（ブログ）などはWordPressというソフトを使っている為、WindowsのWordに近い操作である。
しかし、コンピュータ側ではHTML・CSS・Javascriptなど色々な言語がそれぞれ役割を果たして成り立っている。（まるで会社組織みたいだなぁ）

　WordPressというソフトは、webページを簡単に制作できる仕様となっているが、そこから手を加えようとすると少しコツがいるようである。『表の結合』はこのページのプログラミングであるhtmlを触らないといけないらしい、勉強してこう。（プラグインをすればできる方法もあるらしい…）

htmlをいじってみる

まず下のような簡単な表を例にとってみる。

a-1	a-2	a-3
b-1	b-2	b-3

上記表を右クリックすると、点が並んでいるオプションを選ぶことができる。そこから『htmlとして編集』を選択する。そしたら下記の様に表を形作っているhtmlのプログラム表示にかわる。

<figure class=”wp-block-table”>
    <table>
        <tbody>
            <tr>
                <td>a-1</td>
                <td>a-2</td>
                <td>a-3</td>
            </tr>
            <tr>
                <td>b-1</td>
                <td>b-2</td>
                <td>b-3</td>
            </tr>
        </tbody>
    </table>
</figure>

これは分かりにくいので下記の様な関係となっている。<table>タグで全体が囲まれており、一行ごとに<tr>タグでマトメらており、セルのデータは<td>の中に入っているということである。

そこでb-1とb-2を『水平方向に結合』、a-3と b-3を『垂直方向に結合』を考えてみる。
先ほどの『htmlとして編集』でhtml表示にして　セルのタグ<td>の中にrowspan属性およびcolspan属性を加えてやる必要がある。もちろん結合先のb-2の記述と b-3の記述は消すことになる。

すると、結合元のセルの<td>タグに　rowspan属性と colspan属性を記述し、ｂ－２，ｂ－３セルデータを消してみる。

<figure class=”wp-block-table”>
    <table>
        <tbody>
            <tr>
                <td>a-1</td>
                <td>a-2</td>
                <td rowspan=”2″>a-3</td>
            </tr>
            <tr>
                <td colspan=”2″>b-1</td>
            </tr>
        </tbody>
    </table>
</figure>

結果、下記の表の様に表示できた。やってみると簡単である。