テーブルについて
前回、テーブルの結合でよくわからないことになった。色々考えたらわかったので書く。
※前回→コメパンは積み技 - ポずかご
知っている人からしたら「今までそんなことも知らずにテーブル書いてたわけ？」レベルの内容だが、自分にとっては大発見なのです。
以下は、はてなブログの「HTML編集」に書き込んだ場合について話しています（空白部分に自動で半角スペースが入る）。
※次回→テーブルについて2 - ポずかご
作りたいテーブル
こんなの
※エクセルのキャプチャ画像
案1
ソース
<table> <tr> <td></td> <td></td> <th>文字</th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <th>a</th> <th>b</th> <th>c</th> </tr> <tr> <th>数字</th> <th>1</th> <td>a1</td> <td>b1</td> <td>c1</td> </tr> <tr> <th></th> <th>2</th> <td>a2</td> <td>b2</td> <td>c2</td> </tr> <tr> <th></th> <th>3</th> <td>a3</td> <td>b3</td> <td>c3</td> </tr> </table>
結果
| 文字 | ||||
|---|---|---|---|---|
| a | b | c | ||
| 数字 | 1 | a1 | b1 | c1 |
| 2 | a2 | b2 | c2 | |
| 3 | a3 | b3 | c3 |
コピペしたとき
文字 a b c 数字 1 a1 b1 c1 2 a2 b2 c2 3 a3 b3 c3
セルの連結していないので却下。コピペしたときの表示は良いのだがセルの幅が見出しのせいで狂う。
案2
ソース
<table> <tr> <td colspan="2" rowspan="2"></td> <th colspan="3">文字</th> </tr> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> <tr> <th rowspan="3">数字</th> <th>1</th> <td>a1</td> <td>b1</td> <td>c1</td> </tr> <tr> <th>2</th> <td>a2</td> <td>b2</td> <td>c2</td> </tr> <tr> <th>3</th> <td>a3</td> <td>b3</td> <td>c3</td> </tr> </table>
結果
| 文字 | ||||
|---|---|---|---|---|
| a | b | c | ||
| 数字 | 1 | a1 | b1 | c1 |
| 2 | a2 | b2 | c2 | |
| 3 | a3 | b3 | c3 | |
コピペしたとき
文字 a b c 数字 1 a1 b1 c1 2 a2 b2 c2 3 a3 b3 c3
結果だけ見れば悪くないがコピペした際に表示が崩れるので却下。
案3
ソース
<table> <tr> <td colspan="2" rowspan="2"></td> <th colspan="3">文字</th> </tr> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> <tr> <th rowspan="3">数字</th> </tr> <tr> <th>1</th> <td>a1</td> <td>b1</td> <td>c1</td> </tr> <tr> <th>2</th> <td>a2</td> <td>b2</td> <td>c2</td> </tr> <tr> <th>3</th> <td>a3</td> <td>b3</td> <td>c3</td> </tr> </table>
結果
| 文字 | ||||
|---|---|---|---|---|
| a | b | c | ||
| 数字 | ||||
| 1 | a1 | b1 | c1 | |
| 2 | a2 | b2 | c2 | |
| 3 | a3 | b3 | c3 | |
コピペしたとき
文字 a b c 数字 1 a1 b1 c1 2 a2 b2 c2 3 a3 b3 c3
コピペしたときに崩れないが結果が崩れているので却下。
案4
ソース
<table> <tr> <td colspan="2" rowspan="2"></td> <th colspan="3">文字</th> </tr> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> <tr> <th rowspan="4">数字</th> </tr> <tr> <th>1</th> <td>a1</td> <td>b1</td> <td>c1</td> </tr> <tr> <th>2</th> <td>a2</td> <td>b2</td> <td>c2</td> </tr> <tr> <th>3</th> <td>a3</td> <td>b3</td> <td>c3</td> </tr> </table>
結果
| 文字 | ||||
|---|---|---|---|---|
| a | b | c | ||
| 数字 | ||||
| 1 | a1 | b1 | c1 | |
| 2 | a2 | b2 | c2 | |
| 3 | a3 | b3 | c3 | |
コピペしたとき
文字 a b c 数字 1 a1 b1 c1 2 a2 b2 c2 3 a3 b3 c3
結果もコピペも崩れないので良い。
変更箇所は、案3の「<th rowspan="3">数字</th>」を「<th rowspan="4">数字</th>」にした。
案5
ソース
<table> <tr> <td colspan="2" rowspan="3"> </td> </tr> <tr> <th colspan="3">文字</th> </tr> <tr> <th>a</th><th>b</th><th>c</th> </tr> <tr> <th rowspan="4">数字</th> </tr> <tr> <th>1</th> <td>a1</td> <td>b1</td> <td>c1</td> </tr> <tr> <th>2</th> <td>a2</td> <td>b2</td> <td>c2</td> </tr> <tr> <th>3</th> <td>a3</td> <td>b3</td> <td>c3</td> </tr> </table>
結果
| 文字 | |||
|---|---|---|---|
| a | b | c | |
| 数字 | |||
| 1 | a1 | b1 | c1 |
| 2 | a2 | b2 | c2 |
| 3 | a3 | b3 | c3 |
コピペしたとき
文字 a b c 数字 1 a1 b1 c1 2 a2 b2 c2 3 a3 b3 c3
結果もコピペも崩れないかつ、行頭に二つの大見出しがあるため採用。
変更箇所は、案4の「<td colspan="2" rowspan="2">」を「<td colspan="2" rowspan="3">」にした。
解説
案3が崩れる理由
案3の記述だと<tr>の個数的に5行6列の表になる。しかし「数字」の連結数が足りていないためこうなる。空白部分は詰められる。
| 空 | も | - | じ | |
|---|---|---|---|---|
| 白 | a | b | c | |
| す | ||||
| う | 1 | a1 | b1 | c1 |
| じ | 2 | a2 | b2 | c2 |
| 3 | a3 | b3 | c3 |
案4の実態
| 空 | も | - | じ | |
|---|---|---|---|---|
| 白 | a | b | c | |
| す | ||||
| う | 1 | a1 | b1 | c1 |
| じ | 2 | a2 | b2 | c2 |
| | | 3 | a3 | b3 | c3 |
案5の実態
| 空 | ||||
|---|---|---|---|---|
| も | - | じ | ||
| 白 | a | b | c | |
| す | ||||
| う | 1 | a1 | b1 | c1 |
| じ | 2 | a2 | b2 | c2 |
| | | 3 | a3 | b3 | c3 |
あとがき
ぶっちゃけテキストエディタにコピペしないと気付かない。むしろ別の不具合が起こりそうなので良くないのかも？趣味でブログやってるだけだから文法的にあってるかはシラネ。
エクセルに貼りつけたら案の定バグってる。
結局colspanやらrowspanを使わない案1が最強じゃね？
