表¶

項目

基本指針
入力フォームの表
一覧表
検索条件／詳細検索
セル内の位置／文字寄せ（align）
サイズ指定方法
ソート順

基本指針 ¶

入力や選択項目がある場合は、<table class=”imui-form”> を使用します。

項目名となる th の中には直接文字列を指定せず label の中に文字列を指定します。

詳細検索の表を表示する場合は、 <table class=”imui-form-search-condition”>を使用します。

入力フォームの表 ¶

<table class="imui-form">
  <tr>
    <th><label>項目1</label></th>
    <td><input type="text" name="item1" />
  </tr>
  <tr>
    <th><label>項目2</label></th>
    <td><input type="text" name="item2" />
  </tr>
</table>

一覧表 ¶

<table class="imui-table">
  <tr>
    <th><label>項目1</label></th>
    <td><input type="text" name="item1" />
  </tr>
  <tr>
    <th><label>項目2</label></th>
    <td><input type="text" name="item2" />
  </tr>
</table>

検索条件／詳細検索 ¶

<table class="imui-form-search-condition">
  <tr>
    <th><label>項目1</label></th>
    <td><input type="text" name="item1" />
  </tr>
  <tr>
    <th><label>項目2</label></th>
    <td><input type="text" name="item2" />
  </tr>
</table>

セル内の位置／文字寄せ（align）¶

横並びの表（１行目：項目、２行目以降：データ、入力フォーム部品、処理アイコン、処理リンク）

文字の寄せは、以下のとおりとします。

種類文字寄せ

項目（行）中央寄せ

データ：数値右寄せ

データ：文字列左寄せ

データ：処理アイコン中央寄せ

データ：処理リンク中央寄せ

データ：日付／日時左寄せ

データ：区分／コード中央寄せ

チェックボックス中央寄せ

ラジオボタン中央寄せ

アイコン（状態表示など）中央寄せ

縦並びの表（１列目：項目、２列目：データ、入力フォーム部品、処理アイコン、処理リンク）

文字の寄せは、以下のとおりとします。

種類文字寄せ

項目（行）左寄せ

データ：数値右寄せ [1]

データ：文字列左寄せ

データ：処理アイコン左寄せ

データ：処理リンク左寄せ

データ：日付／日時左寄せ

データ：区分／コード左寄せ

チェックボックス左寄せ

ラジオボタン左寄せ

アイコン（状態表示など）左寄せ

文字寄せを指定するには、以下のクラスを指定してください。

文字寄せ class

左寄せ不要

中央寄せ align-C

右寄せ align-R

種類	文字寄せ
項目（行）	中央寄せ
データ：数値	右寄せ
データ：文字列	左寄せ
データ：処理アイコン	中央寄せ
データ：処理リンク	中央寄せ
データ：日付／日時	左寄せ
データ：区分／コード	中央寄せ
チェックボックス	中央寄せ
ラジオボタン	中央寄せ
アイコン（状態表示など）	中央寄せ

種類	文字寄せ
項目（行）	左寄せ
データ：数値	右寄せ [1]
データ：文字列	左寄せ
データ：処理アイコン	左寄せ
データ：処理リンク	左寄せ
データ：日付／日時	左寄せ
データ：区分／コード	左寄せ
チェックボックス	左寄せ
ラジオボタン	左寄せ
アイコン（状態表示など）	左寄せ

文字寄せ	class
左寄せ	不要
中央寄せ	align-C
右寄せ	align-R

[1]	ただし、数値とその他の入力フォーム・ラベルなどが左右に極端に離れてしまう場合、数値の入力フォーム幅を小さくするなどし、視線の移動が少なくなるように注意してください。

サイズ指定方法 ¶

テーブルのサイズ指定の方法は以下とします。

HTML で table を記述する場合（スクロール無）

table

width 指定不要です。（スタイルシートに指定があるため）

imui-form-container で囲みます。

または、bootstrap を使用します。

th

width はスタイルシートで準備されたクラスを使用します。wd-15, wd-20, wd-225px, wd-335px があります。

※wd-15 は、width:15% !important;, wd-20は、width:20% !important;が指定されます。

または、bootstrap を使用します。

td

基本的にサイズを指定しません。

HTML で table を記述する場合（スクロール有）

２つのテーブルを上下または左右に配置してスクロールを表示させるため、td の width の幅を指定する必要があります。

px を指定しないと線のずれが発生するため、style=”width: 0px” を指定してください。

コラム

bootstrap について

bootstrap の詳細は、こちらを参照してください。

テーブル全体で bootstrap を使用する場合は、該当のクラスを指定します。

コラム

HTML5 の廃止タグ

th 要素は、HTML5 では abbr 属性, align 属性, axis 属性, char 属性, charoff 属性, height 属性, nowrap 属性, valign 属性, width 属性が廃止されています。

td 要素は、HTML5 では abbr 属性, align 属性, axis 属性, char 属性, charoff 属性, height 属性, nowrap 属性, scope 属性, valign 属性, width 属性が廃止されています。

ソート順 ¶

画面のユーザビリティが低下する場合は、各画面にて仕様を決定してください。

画面仕様により、機能単位で決定する場合は、画面間の差異にご注意ください。

一覧画面／一覧表

一覧画面、一覧表を作成する場合、複数列存在する場合は、ソートキーを第２ソートキーまで指定してください。

初期表示のソートキーは、画面表示の基準となります。従って、以下を実行時に初期表示と同じソートとなります。

検索ボタンを押下した場合

最新表示アイコンを押下した場合

ソートの順番は、昇順から降順になります。

未ソート例を押下した場合、昇順になります。

ソートキー指定例

例１：ソートを実行した場合、直前の第１ソートキーが第２ソートキーになります。

1 初期表示第１ソートキー：ユーザ名昇順第２ソートキー：ユーザコード昇順

2 住所をクリック第１ソートキー：住所昇順第２ソートキー：ユーザ名昇順

3 電話番号をクリック第１ソートキー：電話番号昇順第２ソートキー：住所昇順

例２：第Xソートキーを固定キーにします。（以下更新日時は、一覧表には非表示）

1 初期表示第１ソートキー：ユーザ名昇順第２ソートキー：更新日時降順

2 住所をクリック第１ソートキー：住所昇順第２ソートキー：更新日時降順

3 電話番号をクリック第１ソートキー：電話番号昇順第２ソートキー：更新日時降順

1	初期表示	第１ソートキー：ユーザ名昇順	第２ソートキー：ユーザコード昇順
2	住所をクリック	第１ソートキー：住所昇順	第２ソートキー：ユーザ名昇順
3	電話番号をクリック	第１ソートキー：電話番号昇順	第２ソートキー：住所昇順

1	初期表示	第１ソートキー：ユーザ名昇順	第２ソートキー：更新日時降順
2	住所をクリック	第１ソートキー：住所昇順	第２ソートキー：更新日時降順
3	電話番号をクリック	第１ソートキー：電話番号昇順	第２ソートキー：更新日時降順