標準テーブル
テーブルは、モバイルデバイス用にレイアウトを自動的にスタックします。この動作を無効にするには、unstackable
バリエーションを使用するか、タブレット用にレスポンシブ調整を許可する場合はtablet stackable
を使用します。
名前 |
年齢 |
職業 |
ジェームス |
24 |
エンジニア |
ジル |
26 |
エンジニア |
エリース |
24 |
デザイナー |
エビデンスの評価 |
効果 |
有効性 |
コンセンサス |
コメント |
|
出力 |
|
80%
18件の研究
|
クレアチン補給は、筋肉のクレアチンレベルを上げるための基準化合物です。ただし、この増加にはばらつきがあり、非反応者もいます。 |
|
重量 |
|
100%
65件の研究
|
クレアチンは、効力を評価するための1つのメタ分析からの数値を使用して、パワー改善の基準となる化合物です |
|
Gitリポジトリ |
node_modules |
最初のコミット |
10時間前 |
test |
最初のコミット |
10時間前 |
build |
最初のコミット |
10時間前 |
package.json |
最初のコミット |
10時間前 |
Gruntfile.js |
最初のコミット |
10時間前 |
テーブルは、行の内容を定義する最初の列を強調するようにフォーマットできます。
定義テーブルは、単一の背景色で表示するように設計されています。これは、@definitionPageBackground
を変更するか、最初のセルに背景色を指定することで調整できます。
|
引数 |
説明 |
評価をリセット |
なし |
評価をデフォルト値にリセットします |
評価を設定 |
評価 (整数) |
現在の星評価を指定された値に設定します |
テーブルは、複雑な構造化データを表示するようにフォーマットできます。
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 |
テーブルは、ユーザーがテーブルヘッダーをクリックして内容をソートできるようにすることができます。
th
に
ascending
または
descending
クラスを追加すると、ソート方向がユーザーに表示されます。この例では、適切なクラス名を提供するために、kylefoxの
tablesortプラグインの修正版を使用しています。ソート可能なテーブルを機能させるには、
このJavaScriptをページに含め、DOMの準備ができたら
$('table').tablesort()
を呼び出してください。
名前 |
ステータス |
メモ |
ジョン |
アクションなし |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジル |
拒否 |
なし |
3人 |
承認済み2件 |
|
定義テーブルは、最初の列によって残されたギャップを埋める、フル幅のヘッダーまたはフッターを持つことができます。
テーブルは、視認性を高めるためにパディングが必要な場合があります。
名前 |
ステータス |
メモ |
ジョン |
承認済み |
彼はとてもいい人で、電話で彼と話せて楽しかったです。また話せるのを楽しみにしています。 |
ジェイミー |
承認済み |
ジェイミーは、当社の製品の購入に興味がありませんでした。 |
名前 |
ステータス |
メモ |
ジョン |
承認済み |
彼はとてもいい人で、電話で彼と話せて楽しかったです。また話せるのを楽しみにしています。 |
ジェイミー |
承認済み |
ジェイミーは、当社の製品の購入に興味がありませんでした。 |
テーブルは、一度に表示される行数を増やすために、よりコンパクトにする必要がある場合があります。
名前 |
ステータス |
メモ |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
名前 |
ステータス |
別のステータス |
メモ |
ジョン |
承認済み |
承認済み |
なし |
ジェイミー |
承認済み |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
承認済み |
なし |
ジェイミー |
承認済み |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
承認済み |
なし |
ジェイミー |
承認済み |
承認済み |
電話連絡が必要 |
ジョン |
承認済み |
承認済み |
なし |
ジェイミー |
承認済み |
承認済み |
電話連絡が必要 |
テーブルは、小または大にすることもできます。
名前 |
ステータス |
メモ |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジル |
拒否 |
なし |
3人 |
承認済み2件 |
|
名前 |
ステータス |
メモ |
ジョン |
承認済み |
なし |
ジェイミー |
承認済み |
電話連絡が必要 |
ジル |
拒否 |
なし |
3人 |
承認済み2件 |
|