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>
}}}
結果
1111 | 222 | 3333 |
---|---|---|
1111 | 222 | 3333 |
1111 | 222 | 3333333333333333333333333333 |
1111 | 233333333333333333333322 | 3333 |
111111111111111111111111111111111111111111 | 222 | 3333 |
1111 | 222 | 3333 |
1111 | 222 | 3333 |
1111 | 222 | 3333 |
HAIKらしい記述
パーツからの貼付けを利用
|STYLE:class=table table-bordered|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
結果
見出し | ここに内容を書く |
---|---|
見出し | ここに内容を書く |
見出し | ここに内容を書く |
見出し | ここに内容を書く |
|STYLE:class=table table-bordered|
を
|STYLE:class=table table-striped|
とすると、一行毎に薄い背景色がつくらしい、このサイトの私の設定がおかしいのか背景色はつかなった。
結果
見出し | ここに内容を書く |
---|---|
見出し | ここに内容を書く |
見出し | ここに内容を書く |
見出し | ここに内容を書く |
HAIKで横幅の狭い場合に横スクロールさせる
以下のような表をスマートフォンでそのまま閲覧すると、列内で何行も改行が行われて見づらくなります。敢えて改行を少なくしてレイアウトは崩さずに横スクロールさせることが出来ます。
見出し | ここに内容を書く | 1行、3列のサンプル | 1行、4列のサンプル | 1行、5列のサンプル |
---|---|---|---|---|
見出し | ここに内容を書く | 2行、3列のサンプル | 2行、4列のサンプル | 2行、5列のサンプル |
見出し | ここに内容を書く | 3行、3列のサンプル | 3行、4列のサンプル | 3行、5列のサンプル |
見出し | ここに内容を書く | 4行、3列のサンプル | 4行、4列のサンプル | 4行、5列のサンプル |
表の先頭に「STYLE:responsive」を追加します。以下のような感じです。
|STYLE:responsive|
|~見出し|ここに内容を書く|1行、3列のサンプル|1行、4列のサンプル|1行、5列のサンプル|
|~見出し|ここに内容を書く|2行、3列のサンプル|2行、4列のサンプル|2行、5列のサンプル|
|~見出し|ここに内容を書く|3行、3列のサンプル|3行、4列のサンプル|3行、5列のサンプル|
|~見出し|ここに内容を書く|4行、3列のサンプル|4行、4列のサンプル|4行、5列のサンプル|
実際には以下の様に表示されます。スマートフォンで上の表示と見比べて下さい。
見出し | ここに内容を書く | 1行、3列のサンプル | 1行、4列のサンプル | 1行、5列のサンプル |
---|---|---|---|---|
見出し | ここに内容を書く | 2行、3列のサンプル | 2行、4列のサンプル | 2行、5列のサンプル |
見出し | ここに内容を書く | 3行、3列のサンプル | 3行、4列のサンプル | 3行、5列のサンプル |
見出し | ここに内容を書く | 4行、3列のサンプル | 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">1行、3列のサンプル</td><td class="style_td">1行、4列のサンプル</td><td class="style_td">1行、5列のサンプル</td></tr><tr><th class="style_th">見出し</th><td class="style_td">ここに内容を書く</td><td class="style_td">2行、3列のサンプル</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行、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行、3列のサンプル</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">1行、3列のサンプル</td>
<td class="style_td">1行、4列のサンプル</td>
<td class="style_td">1行、5列のサンプル</td>
</tr>
<tr>
<th class="style_th">見出し</th>
<td class="style_td">ここに内容を書く</td>
<td class="style_td">2行、3列のサンプル</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行、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行、3列のサンプル</td>
<td class="style_td">4行、4列のサンプル</td>
<td class="style_td">4行、5列のサンプル</td>
</tr>
</tbody>
</table>
</div>