テーブル編

haikはレスポンシブルデザイン対応となったため、テーブルの仕様に変更がありました。主にマニュアルに記述していないことについて調査します。
大きく変更になったのは、テーブルの横幅の指定です。QHMでは幅をピクセル指定できましたが、同様な記述をすると横幅の割合いの指定と解釈するようです。ピクセルのサイズにはなりません。

T01 列の幅を指定する

haikではピクセル指定で列の幅は指定できません。以下のおまじないを書くと画面全体に広がるテーブルとなります。このようなテーブルでは少し間延びしてしまうので、段組(cols)を使用して、中央または左右に寄せた方がいい感じになります。

段組を使用しない例

【おまじない】
|LEFT:150|CENTER:300|RIGHT:100|c
|~A|~B|~C|
|幅150　左寄せ|幅300　中央寄せ|幅100　右寄せ|

段組を使用した例

段組でテーブルを中央に寄せる。(左に３余白、中央に6、右に3余白)

【おまじない】
#cols(6+3){{
|LEFT:150|CENTER:300|RIGHT:100|c
|~A|~B|~C|
|幅150　左寄せ|幅300　中央寄せ|幅100　右寄せ|
}}

T02 テーブルの枠線を消す

【手順】

1. テーブルの全部の線を消すときは、以下のおまじないを記述します。

   【おまじない】これは通常のテーブルの書き方
   |STYLE:class=table table-bordered|
   |~ラーメン|こてこての豚骨ラーメン|700円|人気No.1|
   |~カレー|激辛です。覚悟してね|600円|人気No.2|
   |~うどん|どん兵衛に似た味ですが、ちょっと...|500円|人気No.3|

2. テーブルの枠線を消すために、以下のスクリプトをそのページ内に記述します。サイト全部のテーブルで枠線を消すときは、フッター内に記述します。
   テーブルの内側の枠だけ消したい場合は、 .table-bordered {border: none;}　は不要です。

   #beforescript{{
   <style type="text/css">
   <!--
   /* テーブルの外枠を消す */
   .table-bordered {
       border: none;
   }
   /* テーブル内の枠を消す */
   .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
       border: none;
   }
   -->
   </style>
   }}

【結果】

【解説】

• テーブル作成時におまじないの先頭には　 |STYLE:class=table table-bordered|　が入りますが、このクラスのプロパティを強制的に枠なしに設定します。

T03 スマホのとき横スクロールするテーブルを作る

以下のおまじないを記述します。テーブルの先頭に STYLE:responsive を入れます。これで、横に大きななテーブルをスマホで見たとき、テーブルの横幅が確保されたままになりますので、横スクロールして見やすくなります。

【おまじない】
|STYLE:responsive|
|~ラーメン|こてこての豚骨ラーメン|700円|人気No.1|
|~カレー|激辛です。覚悟してね|600円|人気No.2|
|~うどん|どん兵衛に似た味ですが、ちょっと...|500円|人気No.3|

【解説】

• 　STYLE:responsive　と同時に枠線を消すクラスを指定してもクラスの指定は無視されるようです。レスポンシブ対応にして同時に枠線を消すことはできませんでした。

以下はSTYLE:responsiveを指定していないときの例。スマホで見ると、横にスクロールしません。

T04 テーブル内の縦の文字位置を変更する。

テーブル内の横の文字位置は　:LEFT :CENTER :RIGHT で指定できますが、縦の文字位置を変更するおまじないはありません。そこで、CSSを変更することで縦の文字位置を変更します。
【手順】
1.以下のスクリプトをページ内にコピペします。（中央に表示したいとき）これだけです。

#beforescript{{
<style type="text/css">
<!--
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
   vertical-align: middle;
}
-->
</style>
}}

【解説】
vertical-align: には、以下が指定できます。
top
middle
bottom

【確認環境】
haik 6.0.3
haikテーマ： haik_seed

テーブルヘッダーだけ色を変更する

(未稿)