極意(33)haik環境での表の設定

haik化への試みで、一番イメージが異なり戸惑う例の一つに表(テーブル)設定があります。
haik以前の表では、表の表示位置はコンテンツ部分の中央寄りに設置されるのが基本でした。
それがhaik環境下では、コンテンツ幅一杯に表の横幅が拡大表示されてしまいます。
多分にレスポンシブ機能の標準仕様から来る違いがあるのだろうと筆者は推測しています。
疑問に思ったら直ぐ試してみないと気がすまない筆者の困った性格です。諸々試した結果を以下に公開します。

[check]<目 次>



QHMの表がhaikでは、こんな風になってしまった?

項目名1項目名2項目名3
項目1項目2項目3
項目a項目b項目c
項目ア項目イ項目ウ

[check]上記のおまじないです。

|STYLE:left|
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目a | 項目b | 項目c |
| 項目ア | 項目イ | 項目ウ |

[check]解説します。

  1. haik以前の表は、極々小さな表としてコンテンツ部分の左寄り(|STYLE:left|の指定により)に表示されていましたが、haikでは上記のような表になってしまい混乱したのは筆者だけではないと思います。
  2. 表の表示位置を制御する|STYLE:left|、|STYLE:center|、|STYLE:right|は、haik環境下では機能しないことが判明しました。
  3. haik環境下では、表の列幅はコンテンツ幅一杯に拡大されるのが標準仕様だから、上記のようになってしまうのです。



haik環境下での表の中央寄せ

それでは、小さな表を下記のようにコンテンツ部分の中央寄りに収めるにはどうするのか?

項目名1項目名2項目名3
項目1項目2項目3
項目a項目b項目c
項目ア項目イ項目ウ

[check]上記のおまじないです。

#cols(6+3){{
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目a | 項目b | 項目c |
| 項目ア | 項目イ | 項目ウ |
}}

[check]解説します。

  1. kaik環境下での表位置の制御は、段組との併用が基本となります。
  2. 段組指定の#cols(6+3){{ で真ん中部分に6、左右の余白部分に3の領域を設定して中央寄りが実現できます。
  3. 挿入する表の大きさによって、(6+3)の数値をいろいろ変えてみて下さい。



haik環境下での表の左寄せは?

項目名1項目名2項目名3
項目1項目2項目3
項目a項目b項目c
項目ア項目イ項目ウ

[check]上記のおまじないです。

#cols(6,6){{
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目a | 項目b | 項目c |
| 項目ア | 項目イ | 項目ウ |
====

}}

[check]解説します。

  • 2段の段組の左側に表を挿入しています。右側は空白です。



haik環境下での表の右寄せは?

項目名1項目名2項目名3
項目1項目2項目3
項目a項目b項目c
項目ア項目イ項目ウ

[check]上記のおまじないです。

#cols(6+6){{
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目a | 項目b | 項目c |
| 項目ア | 項目イ | 項目ウ |
}}

[check]解説します。

  • 左側の余白として6、右側の表の挿入部分として6の領域を設定しています。



haik環境下での表の列幅固定はできるか?

項目名1項目名2項目名3
項目1項目2項目3
項目A項目B項目C

[check]上記のおまじないです。

|RIGHT:50|CENTER:150|LEFT:100|c
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目A | 項目B | 項目C |

[check]解説します。

  1. 列幅固定の機能は、一応機能しているみたいですが、列幅の数値通りの幅にはなっていません。
  2. 列幅の数値は、全体を100とした場合の各列の比例配分で相対的な大きさが決まってきます。
  3. 上記の例だと、50対150対100⇒1対3対2 の比率で項目の大きさが決まります。
  4. また各列項目の左寄せ/中央寄せ/右寄せの機能は正常に働いています。



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 18  
    役に立たなかった 0  


ご意見箱