標準テーブル
テーブルは、モバイルデバイス用にレイアウトを自動的にスタックします。この動作を無効にするには、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件 |
|