メニュー

テーブル
テーブルは、行にグループ化されたデータのコレクションを表示します。

ダウンロード

タイプ

テーブル

標準テーブル

テーブルは、モバイルデバイス用にレイアウトを自動的にスタックします。この動作を無効にするには、unstackableバリエーションを使用するか、タブレット用にレスポンシブ調整を許可する場合はtablet stackableを使用します。
名前 年齢 職業
ジェームス 24 エンジニア
ジル 26 エンジニア
エリース 24 デザイナー
エビデンスの評価 効果 有効性 コンセンサス コメント

A

出力
80%
18件の研究
クレアチン補給は、筋肉のクレアチンレベルを上げるための基準化合物です。ただし、この増加にはばらつきがあり、非反応者もいます。

A

重量
100%
65件の研究
クレアチンは、効力を評価するための1つのメタ分析からの数値を使用して、パワー改善の基準となる化合物です
従業員 正解数

レナ
人事

22

マシュー
ファブリックデザイン

15

リンジー
エンターテイメント

12

マーク
エグゼクティブ

11
Gitリポジトリ
node_modules 最初のコミット 10時間前
test 最初のコミット 10時間前
build 最初のコミット 10時間前
package.json 最初のコミット 10時間前
Gruntfile.js 最初のコミット 10時間前

定義

テーブルは、行の内容を定義する最初の列を強調するようにフォーマットできます。

定義テーブルは、単一の背景色で表示するように設計されています。これは、@definitionPageBackgroundを変更するか、最初のセルに背景色を指定することで調整できます。
引数 説明
評価をリセット なし 評価をデフォルト値にリセットします
評価を設定 評価 (整数) 現在の星評価を指定された値に設定します
名前 登録日 メールアドレス プレミアムプラン
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジェイミー・ハリントン 2014年1月11日 jamieharingonton@yahoo.com はい
ジル・ルイス 2014年5月11日 jilsewris22@yahoo.com はい
ユーザーを追加
承認
すべて承認

構造化

テーブルは、複雑な構造化データを表示するようにフォーマットできます。

UIテーブルは、border-collapse: separateを使用して、border-radiusなど、通常はテーブルに適用できないスタイルを受け取ることができます。ただし、これにより、rowspanまたはcolspanを使用する複雑なレイアウトや、列数が異なる行では、一部のセル罫線が欠落して表示される場合があります。

ui structured tableは一部のスタイル機能をサポートしていませんが、すべての有効なHTMLテーブルコンテンツを正しく表示できます。

名前 タイプ ファイル 言語
Ruby JavaScript Python
アルファチーム プロジェクト1 2
ベータチーム プロジェクト1 52
プロジェクト2 12
プロジェクト3 21

状態

肯定的/否定的

セルまたは行は、値が良いか悪いかをユーザーに知らせることができます。

名前 ステータス メモ
名前が指定されていません 不明 なし
ジミー 承認済み なし
ジェイミー 不明 電話連絡が必要
ジル 不明 なし

セル

エラー

セルまたは行は、エラーまたは負の値に注意を引くことができます。

名前 ステータス メモ
名前が指定されていません 承認済み なし
ジミー データを取得できません なし
ジェイミー 承認済み 機密
ジル 承認済み なし

警告

セルまたは行はユーザーに警告できます。

名前 ステータス メモ
名前が指定されていません 不明 なし
ジミー 操作が必要 なし
ジェイミー 不明 敵対的
ジル 不明 なし

アクティブ

セルまたは行は、ユーザーによってアクティブ化または選択できます。

名前 ステータス メモ
ジェイミー 承認済み 電話連絡が必要
ジョン 選択済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 承認済み なし

無効

セルは無効にできます。

名前 ステータス メモ
ジェイミー 承認済み 電話連絡が必要
ジョン 選択済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 承認済み なし

バリエーション

単一行

テーブルは、セルの内容が単一行にとどまり、折り返されないように指定できます。

名前 登録日 メールアドレス プレミアムプラン
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジェイミー・ハリントン 2014年1月11日 jamieharingonton@yahoo.com はい
ジル・ルイス 2014年5月11日 jilsewris22@yahoo.com はい

固定

テーブルは、コンテンツに基づいてテーブルセルをサイズ変更しない、より高速なテーブルレンダリングの特別な形式であるtable-layout: fixedを使用できます。

名前 ステータス 説明
ジョン 承認済み ジョンは面白い少年ですが、時には説明したいすべてを説明するのに十分なスペースがない場合があります
ジェイミー 承認済み ジェイミーは親切な女の子ですが、時には説明したいすべてを説明するのに十分なスペースがない場合があります
ジル 拒否 ジルはまあまあの女の子ですが、時には説明したいすべてを説明するのに十分なスペースがない場合があります
固定のsingle lineテーブルは、単一行に収まらないコンテンツが自動的に「...」省略記号を受け取るようにします。
名前 ステータス 説明
ジョン 承認済み これは長すぎて収まりません。申し訳ありません。
ジェイミー 承認済み 短い説明
ジル 拒否 短い説明

スタッキング

テーブルは、レスポンシブにテーブルコンテンツをスタックする方法を指定できます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし

選択可能な行

テーブルの行を選択可能にすることができます。

名前 ステータス メモ
ジョン アクションなし なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
ジョン アクションなし なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし

選択可能なセル

テーブルセルは選択可能にできます。

選択可能なセル内でaリンクを使用すると、ヒットボックスが自動的にセル領域全体になります。デフォルトでは、リンクはセルの色を継承します。
名前 ステータス 編集
ジョン アクションなし 編集
ジェイミー 承認済み 編集
ジル 拒否 編集
ジョン アクションなし 変更が必要
ジェイミー 承認済み 承認
ジル 拒否 削除

垂直方向の配置

テーブルヘッダー、行、またはセルは、垂直方向の配置を調整できます。

名前 ステータス メモ
ジョン 承認済み メモ
1
2
ジェイミー 承認済み メモ
1
2

テキストの配置

テーブルヘッダー、行、またはセルは、テキストの配置を調整できます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし

ストライプ

テーブルは、コントラストを高めるために、コンテンツの交互の行を暗い色でストライプできます。

名前 参加日 メール 電話
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジェイミー・ハリントン 2014年1月11日 jamieharingonton@yahoo.com はい
ジル・ルイス 2014年5月11日 jilsewris22@yahoo.com はい
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジェイミー・ハリントン 2014年1月11日 jamieharingonton@yahoo.com はい
ジル・ルイス 2014年5月11日 jilsewris22@yahoo.com はい
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ

セル分割

テーブルは、各行を個別のセルに分割できます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件

ベーシック

テーブルは、読みやすさを向上させるために複雑さを軽減できます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし

折りたたみセル

セルは、必要なスペースのみを使用するように折りたたむことができます。

アイコンが別の行に折り返されないようにするには、折りたたみ列の最も幅の広い行、またはすべての行で折りたたみを指定する必要があります。
node_modules 最初のコミット 10時間前
test 最初のコミット 10時間前
build 最初のコミット 10時間前

列数

テーブルは、コンテンツを均等に分割するために列数を指定できます。

名前 ステータス 年齢 性別 メモ
ジョン 承認済み 22 男性 なし
ジェイミー 承認済み 32 男性 電話連絡が必要
ジル 拒否 22 女性 なし
3人 承認済み2件

列幅

テーブルは、個々の列の幅を独立して指定できます。

テーブルは、UIグリッドと同様の16列グリッドを使用します。
名前 ステータス
ジョン 承認済み
ジェイミー 承認済み
ジル 拒否
3人 承認済み2件

折りたたみ

テーブルは、行の高さに応じて必要なスペースだけを使用するように折りたたむことができます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件

色付き

テーブルには、他のテーブルと区別するために色を付けることができます。

食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g

反転

テーブルの色を反転できます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g
食品 カロリー タンパク質
リンゴ 200 0g
オレンジ 310 0g

ソート可能

テーブルは、ユーザーがテーブルヘッダーをクリックして内容をソートできるようにすることができます。

thascendingまたはdescendingクラスを追加すると、ソート方向がユーザーに表示されます。この例では、適切なクラス名を提供するために、kylefoxのtablesortプラグインの修正版を使用しています。ソート可能なテーブルを機能させるには、このJavaScriptをページに含め、DOMの準備ができたら$('table').tablesort()を呼び出してください。
名前 ステータス メモ
ジョン アクションなし なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件

フル幅ヘッダー/フッター

定義テーブルは、最初の列によって残されたギャップを埋める、フル幅のヘッダーまたはフッターを持つことができます。

名前 登録日 メールアドレス プレミアムプラン
ジョン・リルキ 2013年9月14日 jhlilk22@yahoo.com いいえ
ジェイミー・ハリントン 2014年1月11日 jamieharingonton@yahoo.com はい
ジル・ルイス 2014年5月11日 jilsewris22@yahoo.com はい
ユーザーを追加
承認
すべて承認

パディング

テーブルは、視認性を高めるためにパディングが必要な場合があります。

名前 ステータス メモ
ジョン 承認済み 彼はとてもいい人で、電話で彼と話せて楽しかったです。また話せるのを楽しみにしています。
ジェイミー 承認済み ジェイミーは、当社の製品の購入に興味がありませんでした。
名前 ステータス メモ
ジョン 承認済み 彼はとてもいい人で、電話で彼と話せて楽しかったです。また話せるのを楽しみにしています。
ジェイミー 承認済み ジェイミーは、当社の製品の購入に興味がありませんでした。

コンパクト

テーブルは、一度に表示される行数を増やすために、よりコンパクトにする必要がある場合があります。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
名前 ステータス 別のステータス メモ
ジョン 承認済み 承認済み なし
ジェイミー 承認済み 承認済み 電話連絡が必要
ジョン 承認済み 承認済み なし
ジェイミー 承認済み 承認済み 電話連絡が必要
ジョン 承認済み 承認済み なし
ジェイミー 承認済み 承認済み 電話連絡が必要
ジョン 承認済み 承認済み なし
ジェイミー 承認済み 承認済み 電話連絡が必要

サイズ

テーブルは、小または大にすることもできます。

名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件
名前 ステータス メモ
ジョン 承認済み なし
ジェイミー 承認済み 電話連絡が必要
ジル 拒否 なし
3人 承認済み2件

ディマーメッセージ
ディマーサブヘッダー