Tag: haik

table(表)のテスト

htmlプラグインを使ってタグで記述した場合

#html(){{{
<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered">
    <tr><th>1111</th><th>222</th><th>3333</th><tr>
    <tr><td>1111</td><td>222</td><td>3333</td><tr>
    <tr><td>1111</td><td>222</td><td>3333333333333333333333333333</td><tr>
    <tr><td>1111</td><td>233333333333333333333322</td><td>3333</td><tr>
    <tr><td>111111111111111111111111111111111111111111</td><td>222</td><td>3333</td><tr>
    <tr><td>1111</td><td>222</td><td>3333</td><tr>
    <tr><td>1111</td><td>222</td><td>3333</td><tr>
    <tr><td>1111</td><td>222</td><td>3333</td><tr>
    </table>
  </div>
</div>
}}}

結果

HAIKらしい記述

パーツからの貼付けを利用

|STYLE:class=table table-bordered|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|

結果

|STYLE:class=table table-bordered|

を

|STYLE:class=table table-striped|

とすると、一行毎に薄い背景色がつくらしい、このサイトの私の設定がおかしいのか背景色はつかなった。

結果

HAIKで横幅の狭い場合に横スクロールさせる

以下のような表をスマートフォンでそのまま閲覧すると、列内で何行も改行が行われて見づらくなります。敢えて改行を少なくしてレイアウトは崩さずに横スクロールさせることが出来ます。

表の先頭に「STYLE:responsive」を追加します。以下のような感じです。

|STYLE:responsive|
|~見出し|ここに内容を書く|１行、３列のサンプル|１行、4列のサンプル|１行、5列のサンプル|
|~見出し|ここに内容を書く|2行、３列のサンプル|2行、4列のサンプル|2行、5列のサンプル|
|~見出し|ここに内容を書く|3行、３列のサンプル|3行、4列のサンプル|3行、5列のサンプル|
|~見出し|ここに内容を書く|4行、３列のサンプル|4行、4列のサンプル|4行、5列のサンプル|

実際には以下の様に表示されます。スマートフォンで上の表示と見比べて下さい。

この時のHTMLソース表示は次の様になっていました。

<div class="table-responsive qhm-table-responsive-wrapper"><table class="style_table table qhm-table-responsive" cellspacing="1" border="0" style=""><tbody><tr><th class="style_th">見出し</th><td class="style_td">ここに内容を書く</td><td class="style_td">１行、３列のサンプル</td><td class="style_td">１行、4列のサンプル</td><td class="style_td">１行、5列のサンプル</td></tr><tr><th class="style_th">見出し</th><td class="style_td">ここに内容を書く</td><td class="style_td">2行、３列のサンプル</td><td class="style_td">2行、4列のサンプル</td><td class="style_td">2行、5列のサンプル</td></tr><tr><th class="style_th">見出し</th><td class="style_td">ここに内容を書く</td><td class="style_td">3行、３列のサンプル</td><td class="style_td">3行、4列のサンプル</td><td class="style_td">3行、5列のサンプル</td></tr><tr><th class="style_th">見出し</th><td class="style_td">ここに内容を書く</td><td class="style_td">4行、３列のサンプル</td><td class="style_td">4行、4列のサンプル</td><td class="style_td">4行、5列のサンプル</td></tr></tbody></table></div>

見づらいので改行を追加して表示。

<div class="table-responsive qhm-table-responsive-wrapper">
<table class="style_table table qhm-table-responsive" cellspacing="1" border="0" style="">
<tbody>
<tr>
<th class="style_th">見出し</th>
<td class="style_td">ここに内容を書く</td>
<td class="style_td">１行、３列のサンプル</td>
<td class="style_td">１行、4列のサンプル</td>
<td class="style_td">１行、5列のサンプル</td>
</tr>
<tr>
<th class="style_th">見出し</th>
<td class="style_td">ここに内容を書く</td>
<td class="style_td">2行、３列のサンプル</td>
<td class="style_td">2行、4列のサンプル</td>
<td class="style_td">2行、5列のサンプル</td>
</tr>
<tr>
<th class="style_th">見出し</th>
<td class="style_td">ここに内容を書く</td>
<td class="style_td">3行、３列のサンプル</td>
<td class="style_td">3行、4列のサンプル</td>
<td class="style_td">3行、5列のサンプル</td>
</tr>
<tr>
<th class="style_th">見出し</th>
<td class="style_td">ここに内容を書く</td>
<td class="style_td">4行、３列のサンプル</td>
<td class="style_td">4行、4列のサンプル</td>
<td class="style_td">4行、5列のサンプル</td>
</tr>
</tbody>
</table>
</div>