ヘルプ:表

ウィキペディアから、無料の百科事典
ナビゲーションにジャンプ 検索にジャンプ

テーブルは、データまたは画像を整理および配置する列と行の配置です特別なウィキテキスト構文を使用してウィキペディアページにテーブルを作成でき、さまざまなスタイルやトリックを使用してテーブルをカスタマイズできます。

表は書式設定手段として使用できますが、代わりに 複数列のリストを使用することを検討してください。

ツールバーの使用

ソースモードの場合

ベクトルツールバー–デフォルト
モノブックツールバー

テーブルを自動的に挿入するには、編集ツールバーVector toolbar insert table button new.pngのまたはButton insert table.png(テーブルの挿入)をクリックしますベクトルツールバーでは、テーブルアイコンは[詳細]メニューにあります。「テーブルの挿入」がツールバーにない場合は、次の指示に従って追加してください。

[テーブルの挿入]をクリック すると、次のテキストが挿入されます。

{| class = "wikitable"
| +キャプションテキスト
|-ヘッダーテキスト !!ヘッダーテキスト !!ヘッダーテキスト
|-
| 例|| 例|| 
|-
| 例|| 例|| 
|-
| 例|| 例|| 
|}

このコードは次のテーブルを生成します。

キャプションテキスト
ヘッダーテキスト ヘッダーテキスト ヘッダーテキスト

サンプルテキスト(「ヘッダーテキスト」または「例」)は、実際のデータに置き換えることを目的としています。ソースモードでテーブルに入力できます。または、ビジュアルエディター(VE)を使用します。

ビジュアルエディターで

ビジュアルエディタ(VE)を使用すると、ウィキテキストを経由せずにセルに直接入力できます。さらに下のVEセクションを参照してくださいVEを使用すると、行または列を簡単に追加または削除できます。VEでは、これは([挿入]メニューの)テーブルアイコンをクリックしたときに表示されるものです。

基本的なテーブルマークアップの概要

テーブル要素 ウィキテキスト 必須 使用上の注意
テーブルスタート {| 必須
表のキャプション |+ オプション テーブルの開始と最初のテーブル行の間のみ。
テーブル行 |- オプション 最初の行の前は省略できます。
テーブルヘッダーセル ! オプション !!連続するテーブルヘッダーセルは、二重マーク( )で区切られた同じ行に追加できます。または、それぞれが独自の単一のマーク(!)を持つ新しい行から開始します。
テーブルデータセル |また|| オプション 連続するテーブルデータセルは、二重マーク()で区切られた同じ行に追加することも||、それぞれ独自の単一マーク(|)を持つ新しい行で開始することもできます。このマークは、HTML属性をセルおよびキャプションのコンテンツから分離するためにも使用されます。
テーブルエンド |} 必須
  • 上記のマークは、オプションで単一の行に連続するセルを追加するための二重マーク(および)を除いて、新しい行で開始する必要があります。||!!
  • 行頭の空白は無視されます。
  • コンテンツは、同じ行のセルマークの後に続く場合があります(オプションのHTML属性の後)。またはセルマークの下の行(ただし、不要な段落に注意してください)。リスト、見出し、ネストされたテーブルなど、それ自体が新しい行で開始する必要があるwikiマークアップを使用するコンテンツは、独自の新しい行である必要があります。
  • 表のキャプションまたはセルにパイプ文字( )を挿入するには、エスケープマークアップを使用します。|<nowiki>|</nowiki>

HTML属性

テーブルの終わり()を除く各マークは|}、オプションで1つ以上の属性を受け入れます。属性はマークと同じ行にある必要があります。

  • セルキャプション|または||!または、、!!および|+)はコンテンツを保持します—コンテンツの前に属性を持つ単一のパイプ(|)を使用して、属性をコンテンツから分離します。
  • のマーク({|および|-)は、コンテンツを直接保持しません。属性の後にパイプ()を追加しないでください。|

テーブルに一般的に含まれる属性は次classのとおりですclass="wikitable"styleCSSスタイリング用。scope、行または列のヘッダーセルを示します。rowspan、セルを複数の行で拡張します。colspan、セルを複数の列で拡張します。

パイプ構文チュートリアル

HTMLテーブル構文も機能しますが、テーブルを作成するためのショートカットとして特別なwikicodeを使用できます。縦棒または「パイプ」記号( )コードは、 HTMLテーブルの | マークアップとまったく同じように機能するため、HTMLテーブルコードの知識は、パイプコードを理解するのに役立ちます。ショートカットは次のとおりです。

  • テーブル全体が中括弧と縦棒文字(パイプ)で囲まれています。したがって、を使用{|してテーブルを開始し、|}終了します。それぞれが独自のライン上にある必要があります:
{| 
  テーブルコードはここにあります
|}
  • オプションのテーブルキャプションは、垂直バーとプラス記号 ""で始まる行と|+、その後のキャプションに含まれています。
{|
| +キャプション
  テーブルコードはここにあります
|}
  • 新しいテーブルを開始するには、独自の行に縦棒とハイフン|-を入力します: " "。その行のセルのコードは次の行から始まります。
{|
| +テーブルのキャプション
|-
  行コードはここにあります
|-
  次の行コードはここにあります
|}
{|
| +テーブルのキャプション
|-
|  セルコードはここにあります
|-
|  次の行のセルコードはここにあります
|  次のセルコードはここにあります
|}
  • セルは、新しい行と1本のバー、または||同じ行の2本のバー ""で区切ることができます。どちらも同じ出力を生成します。

ウィキソース

{|
| +テーブルのキャプション
|-
|セル1 || セル2 || セル3
|-
|セルA
|セルB
|セルC
|-
|セルx
|セルy ||セルz
|}

レンダリングされた結果

表のキャプション
セル1 セル2 セル3
セルA セルB セルC
セルx セルy セルz
  • オプションのパラメータを使用すると、セル、行、またはテーブル全体の表示とスタイルを変更できます。スタイリングを追加する最も簡単な方法は、wikitable CSSクラスを設定することです。これは、ウィキペディアの外部スタイルシートで、それを使用して灰色の配色とセルの境界線をテーブルに適用するように定義されています。

ウィキソース

{| class = wikitable
| +テーブルのキャプション列ヘッダー1列ヘッダー2列ヘッダー3
|-行ヘッダー1
| セル2 || セル3
|-行ヘッダーA
| セルB
| セルC
|}

レンダリングされた結果

表のキャプション
列ヘッダー1 列ヘッダー2 列ヘッダー3
行ヘッダー1 セル2 セル3
行ヘッダーA セルB セルC

テーブルパラメータとセルパラメータはHTMLと同じです。http://www.w3.org/TR/html401/struct/tables.html#edef-TABLEおよびテーブル(HTML)を参照 してくださいただし、<thead>2021年12月の時点で、、、、、、および要素は現在MediaWikiで<tbody>サポート<tfoot><colgroup><col>いません

どのセルにもコンテンツがない場合でも、テーブルは便利です。たとえば、セルの背景色をセルパラメータで変更して、meta:Template talk:Square8x8ペントミノの例のようにテーブルを図にすることができます。表形式の「画像」は、アップロードされた画像よりも編集がはるかに便利です。

テーブル内の列数が一定に保たれるように、各行には他の行と同じ数のセルが必要です。空のセルの場合は、ゼロ幅スペース&#x200B;または古い改行なしスペース&nbsp;をコンテンツとして使用して、セルが確実に表示されるようにします。

セルは複数の列または行にまたがることができますcolspan(下記の§Mélangeを参照)rowspan

パイプのレンダリング

パイプ文字を含む セルコンテンツが正しくレンダリングされない場合は、そのセルに空の形式を追加するだけです。行の2番目のパイプ文字は表示されません。フォーマットを追加するために予約されています。最初のパイプと2番目のパイプの間のウィキコードはフォーマットですが、空またはエラーが無視されるため、消えてしまいます。この場合、ダミーフォーマットを追加してください。(実際の形式については、§HTML属性を参照してください。) 3番目のパイプ文字を使用して、最初のパイプ文字をレンダリングします。 |cell code

セルコードの3番目のパイプであるときに最初のパイプをレンダリングします。

ウィキソース

{| class = wikitable
|-
| ''フォーマット'' | P | i | p | e |
| C | e | l | l | 2 |
|-
| ''フォーマット'' | P | i | p | e || ''フォーマット'' | C | e | l | l | 2 |
|-
|| P | i | p | e | s || C | e | l | l | 2 |
|}

レンダリングされた結果

P | i | p | e | e | l | l | 2 |
P | i | p | e C | e | l | l | 2 |
P | i | p | e | s e | l | l | 2 |

3番目以降のパイプ文字はレンダリングされますが、セル内に隣接する2つのパイプ文字を表示するには(新しいセルの開始時に最初のパイプとして機能させるのではなく)、他のパイプレンダリングオプションが必要です。<nowiki>|</nowiki>ダミー形式を使用してパイプをレンダリングする代わりに、1) (推奨)または2)html&#124;または。で直接レンダリングできます&#x7C;次の表のセルコードの各行には、1つのウィキコードパイプがあります。

隣接するパイプの表示

ウィキソース

{| class = wikitable
|-
| <nowiki> | </ nowiki> Pipes34:<nowiki> || </ nowiki>
|-
| &#124; Pipes34:&#124;&#x7C;
|}

レンダリングされた結果

| Pipes34:||
| Pipes34:||

テンプレートは、解析される順序のため、単一の|を入力するのと同じです。パイプ文字。ここでは、単一のパーサータグは適用されません。&#124と上記のよう に、2番目のパイプからどのように逃げないかを確認してください。{{!}}<nowiki />|<nowiki>|</nowiki>

テーブルで機能しない一般的なメカニズム

ウィキソース

{| class = wikitable
|-
| <nowiki  /> | Pipe3:|
|-
| Pipe2:{{!}} Pipe3:{{!}}
|}

レンダリングされた結果

Pipe3:|
Pipe3:|

範囲

列ヘッダー! scope="col" |は、の代わりにで識別されます|行ヘッダー! scope="row" |は、の代わりにで識別されます|各ヘッダーセルは、wikiマークアップの別々の行にある必要があります。scope="col"andscope="row"マークアップは、ヘッダーを対応するセルに明示的に関連付けるため、すべてのデータテーブルの列ヘッダーと行ヘッダーに使用する必要があります。これにより、スクリーンリーダーの一貫したエクスペリエンスが保証されますManual of Styleでは、列ヘッダーと行ヘッダーにスコープを使用する必要があります

複雑なテーブルの場合、ヘッダーが2つの列または行にまたがる場合は、またはをそれぞれ使用! scope="colgroup" colspan="2" |! scope="rowgroup" rowspan="2" |、ヘッダーを2列の列ヘッダーまたは2行の行ヘッダーとして明確に識別します。ヘッダーが不明確な場合、これはアクセシビリティの問題を引き起こす可能性があります。したがって、を使用id=して各ヘッダーにスペースを入れずに一意の値を設定してから、ヘッダーが不明確なデータセルのIDを参照し、headers=各IDをスペースで区切ります。

ヘッダーセルは通常、ブラウザに応じて通常のセルとは異なる方法でレンダリングされます。多くの場合、太字でレンダリングされ、中央に配置されます。美的観点からこのレンダリングが望ましくない場合は、行ヘッダーを左揃えにして太字を削除する「plainrowheaders」クラスを使用してテーブルのスタイルを設定できます。

典型的な例は、次のようにマークアップできます。

ウィキソース

{| class = "wikitable plainrowheaders"
 | +テーブルのキャプション
 !scope = col | 列ヘッダー1
 !scope = col | 列ヘッダー2
 !scope = col | 列ヘッダー3
 |-
 !scope = row | 行ヘッダー1
| セル2 || セル3
|-
 !scope = row | 行ヘッダーA
| セルB || セルC
|}

レンダリングされた結果

表のキャプション
列ヘッダー1 列ヘッダー2 列ヘッダー3
行ヘッダー1 セル2 セル3
行ヘッダーA セルB セルC

行ヘッダー

行ヘッダーでは、行ヘッダーセルのウィキテキストで別の行を使用する必要があることに注意してください。前のセクションの最後の表の正しい形式を参照してください。シングルパイプとダブルパイプ(バー)の使用に注意してください。

以下は、データセルのウィキテキストが行ヘッダーのウィキテキストと同じ行にある場合のテーブルの外観です。データセルの背景は、列ヘッダーおよび行ヘッダーと同じグレーの色合いであることに注意してください。データセルの背景は明るいはずです。

ウィキソース

{| class = "wikitable plainrowheaders"
 | +テーブルのキャプション
 !scope = col | 列ヘッダー1
 !scope = col | 列ヘッダー2
 !scope = col | 列ヘッダー3
 |-
 !scope = row | 行ヘッダー1 || セル2 || セル3
|-
 !scope = row | 行ヘッダーA || セルB || セルC
|}

レンダリングされた結果

表のキャプション
列ヘッダー1 列ヘッダー2 列ヘッダー3
行ヘッダー1 セル2 セル3
行ヘッダーA セルB セルC

上記の形式の長いwikiテーブルがあり、データセルの背景をすばやく明るくしたい場合は、tab2wikiを使用してください。表をページ(ウィキテキストではなく)からコピーして、tab2wikiに貼り付けます。次のチェックボックスをオンにします。

  • 列の最初の要素はヘッダーです
  • 行の最初の要素はヘッダーです

これのチェックを外します:

  • テーブルを圧縮する

必要に応じて、「ソート可能なテーブル」をオンまたはオフにします。次に、「実行」をクリックします。ウィキテキストの結果をウィキにコピーして戻します。class=wikitable背景の陰影を取得するには、を 使用する必要があります。

Tab2wikiは、ウィキテキストで長いテーブル形式を使用することで問題を修正します。以下では、単一のバー(パイプ)のみが使用されていることに注意してください。

行ヘッダーセルは、ウィキテキストの別々の行にあります。スコープを追加して機能させる必要がclass=plainrowheadersあり、太字ではない行ヘッダーテキストを取得する必要があります。

ウィキソース

{| class = "wikitable plainrowheaders"
 | +テーブルのキャプション
!列ヘッダー1
!列ヘッダー2
!列ヘッダー3
|-
!行ヘッダー1
|セル2
|セル3
|-
!行ヘッダーA 
|セルB 
|セルC 
|}

レンダリングされた結果

表のキャプション
列ヘッダー1 列ヘッダー2 列ヘッダー3
行ヘッダー1 セル2 セル3
行ヘッダーA セルB セルC

この問題を解決する別の方法は、テーブルwikitextをフリーウェアのNoteTabLightなどのテキストエディタにコピーすることです。次の方法は、フラグテンプレートを使用するテーブルで機能します。テーブルウィキテキストで、の一括置換を行います

}} ||

}} ^ P |

^ Pは、改行のNoteTabLightコードです。これにより、行ヘッダーセルがウィキテキストの別の行に配置されます。また、テンプレートやスタイルを失うことはありません。そして、圧縮されたウィキテキスト形式のほとんどを維持します。

シンプルでわかりやすいテーブル

ミニマリストテーブル

これらは両方とも同じ出力を生成します。各行のセル数と各セル内の合計テキストに基づいてスタイルを選択します。

ウィキソース

{|
|-
| A
| B
|-
| C
| D
|}
{|
|-
| A || B
|-
| C || D
|}

レンダリングされた結果(境界線がないことに注意してください)。

A B
C D

九九

この例class="wikitable"では、ウィキペディアのテーブル用の外部スタイルシートを使用してテーブルのスタイルを設定するために使用されていることに注意してください。境界線、背景の陰影、太字のヘッダーテキストを追加します。

ウィキソース

{| class = wikitable style = "text-align:center;"
| +掛け算の九九
|-
×
 1
 2
 3
|-
1
| 1 || 2 || 3
|-
2
| 2 || 4 || 6
|-
3
| 3 || 6 || 9
|-
4
| 4 || 8 || 12
|-
5
| 5 || 10 || 15
|}

レンダリングされた結果

九九
×× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

テーブル全体の操作

キャプションと要約

ベストプラクティスとして、データテーブルには明示的なテーブルキャプションをお勧めします。ウィキペディアのスタイルマニュアルでは、通常のウィキテキストの見出しや紹介文とは異なり、キャプションがテーブルに明示的に関連付けられているため、アクセシビリティの理由から優先度が高いと見なされています。ウィキペディアのすべてのデータテーブルにはキャプションが必要です。キャプションは|+、テーブルの行(|-)と同様にマークアップで提供されますが、セルが含まれておらず、テーブルの境界内にありません。キャプションは常に表示され、テーブルの上に(ほとんどのブラウザで)中央にタイトルとして表示されます。キャプションはスタイル設定でき(ブロックではなくインライン、CSSを使用)、ウィキリンク、参照引用などを含めることができます。

要約は、テキストおよびオーディオブラウザのテーブルのデータの概要を提供し、通常はグラフィカルブラウザには表示されません要約(テーブルのスタイル優先度の高いマニュアル)はコンテンツの概要であり、キャプションテキストを繰り返しません。画像のalt説明に類似していると考えてください。要約は、テーブルを開いたのと同じ行に、テーブル全体のその他のパラメーターとともに追加されます。ただし、この属性はHTML5では廃止されていますsummary="Summary text here."{|class=summary=

ソース引用を含む左揃えのキャプションを示す Wikiマークアップの例:

{| class = wikitable
| + style = "text-align:left;" | 2014〜2015年に報告されたデータ、地域別<ref name = "Garcia 2005" />
|-
scope = col | 年 !!scope = col | アフリカ!! scope = col | 南北アメリカ!! scope = col | アジア太平洋地域 !!scope = col | ヨーロッパ
|-
scope = row | 2014年
| 2,300 || 8,950 || '' 9,325 '' || 4,200
|-
scope = row | 2015年
| 2,725 || '' 9,200 '' || 8,850 || 4,775
|}

レンダリングされた結果

地域別の2014〜2015年に報告されたデータ[99]
アフリカ 南北アメリカ アジア太平洋地域 ヨーロッパ
2014年 2,300 8,950 9,325 4,200
2015年 2,725 9,200 8,850 4,775

注: HTML 5width=xでは廃止されているため、 MediaWikiでは最終的に無視される可能性があります。参照:ウィキペディア:HTML 5#Table属性代わりにCSSスタイルを使用してください。style="width: x;"

style=max-width:Xemテーブルのウィキテキストの一番上の行で使用して、テーブル全体の最大幅を指定できます。一部のテーブルでは、これが必要なすべてです。

次の表の抜粋は、このバージョン国富リストからの成人1人あたりの富によるものです。目標は、データ列を絞り込み、国名をそれぞれ1行に分散させることです。これらすべてにより、国リストをスキャンするときに簡単になります。ただし、国名は必要に応じてワードラップする必要があります(一部の携帯電話の狭い縦向きのビューなど)。style=max-width:Xemそのため、選択した列見出しで使用されました関連するヘッダーウィキテキストは次のとおりです。

国または[[subnationalarea]]style = max-width:4em | 成人1人あたりの資産の中央値([[USD]])style = max-width:4em | 成人1人あたりの平均資産([[USD]])style = max-width:4em | 成人人口
国または地方 成人1人あたりの資産の中央値(USD 成人1人あたりの平均資産(USD 成人人口
 コンゴ民主共和国 382 1,084 37,100,000
 モザンビーク 352 880 13,814,000

以下は 、ブラウザウィンドウを絞り込んでいない場合の様子です。下の表が上の表と比べてどのように縮小するかを確認してください。上記の表は、ブラウザと画面の幅を狭くするために国ごとに1行を維持しているため、長い国の表で読みやすくなっています。以下のテーブル形式では、行数が大幅に増える可能性があり、より多くの垂直スクロールが必要になります。 style=max-width:Xem

国または地方 成人1人あたりの資産の中央値(USD 成人1人あたりの平均資産(USD 成人人口
 コンゴ民主共和国 382 1,084 37,100,000
 モザンビーク 352 880 13,814,000

emユニットは、ズーム設定とともにサイズが大きくなるため、優れています。最大幅<br>は、ヘッダーの区切りを使用するよりも優れています。ヘッダーの区切りは、一時停止のためにスクリーンリーダーを使用している人を煩わせるからです。最大幅により、テーブルを縮小して小さなタブレットや電話の画面に収めることもできます。

style=width:Xemいかなる状況でもさらに狭くなることはないため、その使用は避けてください。このサブページで理由をご覧ください同じ理由class=nowrapで避けるべきです。

高さ

行の高さだけでなく、テーブル全体の高さも指定できます。下の中央の行の高さはに設定されstyle=height:7em、テーブル全体の高さはstyle=height:14em単位に設定されます。計算を行うと、一番上の行と一番下の行の高さがそれぞれ3.5em単位であることがわかります。3.5 + 3.5 + 7 = 14.ワードラップがある場合、これに対応するために高さが増加します。

Wikiマークアップ

{| class = wikitable style = height:14em;
|-左 !!中心 !!
|-
| 左上のセル|| 上部中央のセル|| 右上のセル
| -style = height:7em
| 左中央のセル|| 中央の中央のセル|| 右中央のセル
|-
| 左下のセル|| 下部中央のセル|| 右下のセル
|}

レンダリングされた結果

中心
左上のセル 上部中央セル 右上のセル
左中央のセル ミドルセンターセル 右中央のセル
左下のセル 下部中央のセル 右下のセル

境界線の設定

たとえば、CSSプロパティを使用してテーブルの周囲に境界線を追加しますこの例では、幅が1ピクセルの実線(破線ではない)の灰色の境界線を使用しています。 border: thickness style color;border:3px dashed red

ウィキソース

{| style = "border-spacing:2px; border:1px solid darkgray;"style = "width:140px;" | style = "width:150px;" | 中心style = "width:130px;" | 
|-
| [[File:StarIconBronze.png | 120px |ブロンズスターアイコン]] 
| [[File:StarIconGold.png | 120px |ゴールドスターアイコン]] 
| [[File:StarIconGreen.png | 120px |緑色の星のアイコン]]
| -style = "text-align:center;"
| ブロンズスター|| ゴールドスター|| 緑の星
|}

レンダリングされた結果

中心
Bronze star icon Gold star icon Green star icon
ブロンズスター ゴールドの星 緑の星

下の行のテキストは中央に配置されstyle="text-align: center;"、星の画像は中央に配置されていない(つまり、左揃えになっている)ことに注意してください。

File:仕様でパラメーターが省略されている限り|thumb、テーブルにキャプション行は表示されません(マウスオーバー時のみ)。境界線の色darkgrayは、記事の一般的なテーブルまたはインフォボックスと一致します。ただし、任意の色名(のように)にすることも、 16進色(:など)をstyle="border: 1px solid darkgreen;"使用することもできます#DDCCBB

テーブル内のすべてのセルの境界線

ウィキソース

{| border = 1
|-
| A || B || C
|-
| D || E || F
|}

レンダリングされた結果

A B C
D E F

すべてのセルの境界線の色が同じである場合、結果として得られる二重の境界線は望ましくない可能性があります。border-collapse: collapse;テーブルの開始タグにCSSプロパティを追加して、それらを単一のものに減らしますcellspacing=...廃止されました)。

さらに、W3C では、値が「1」の場合border=、テーブルルート( )で廃止された属性を使用できます。{|これにより、デフォルトの色で1ピクセルの境界線がテーブルとそのすべてのセルに一度に追加されます。

上記のように、プロパティを使用しborder-collapseて二重境界線を結合します。

ウィキソース

{| border = 1 style = "border-collapse:collapse;"
|-
| A || B || C
|-
| D || E || F
|}

レンダリングされた結果

A B C
D E F

並べてテーブル

2つ以上のテーブルを並べて配置できます。ただし、水平スクロールを回避する場合は、テーブルを狭い画面で折り返す必要があります(一方が他方の下にドロップします)。以下は、関連するウィキテキストです。詳細はこちら

< div  style = display:inline-table >
- テーブル - 
</ div >  
< div  style = display:inline-table >
- テーブル - 
</ div >

</ div>はそれ自体が1行になっているため、テーブル間のスペースが発生することに注意してください。スペースが必要ない場合は、次を使用してください。

</ div> <div style = display:inline-table>

ブラウザウィンドウを絞り込んで、以下の表が折り返されていることを確認してください。これはモバイルビューでも機能します。ウィキペディアのページの下部にある「モバイルビュー」をクリックします。

これらの表は、アイスランドの男子ハンドボール代表チームのバージョンからの抜粋です。多くのスポーツ記事にはテーブルが並んでいます。

公式大会のみで行われた試合の総数。
プレーヤー 一致する 目標
グズムンドゥルフラフンケルソン 407 0
GuðjónValurSigurðsson 364 1,875
公式試合でのみ得点されたゴールの総数。
プレーヤー 目標 一致する 平均
GuðjónValurSigurðsson 1,875 364 5.15
オラフール・ステファンソン 1,570 330 4.76

style=display:inline-tableテーブルウィキテキスト内に追加することはできません。テーブルウィキテキストの外に追加する必要があります。これは、テーブルが折り返されるときに、テーブルのキャプションがモバイルポートレートビューやその他の狭いモバイル画面に正しく配置されないためです。これは、キャプションが長い場合に特に顕著です。その場合、一方のテーブルがもう一方のテーブルの下に落ちると、キャプションはテーブルの最初の列だけの上にひどく折り返されます。

表と画像を並べて

ミックスに画像を追加することもできます。vertical-align:top;アイテムを上に揃えるために追加します。その他のオプションについては、 CSSのvertical-alignプロパティを参照してください。表と画像は画面の幅に応じて折り返されます。ブラウザウィンドウを絞り込んで表示します。例えば:

  • <div style="display:inline-table; vertical-align:top;">
表1
名前
フレッド オレンジ
ボブ
リンディ
ニューヨーク市
表2
動物
ラクーン メイン
アラスカ
マンタレイ フロリダ

Gold star on blue.gif

vertical-align:bottom;アイテムを下に揃えるために追加します。各アイテムの配置を選択できます。星が下に並んでいることに注意してください。

表1
名前
フレッド オレンジ
ボブ
リンディ
ニューヨーク市
表2
動物
ラクーン メイン
アラスカ
マンタレイ フロリダ

Gold star on blue.gif

最初のdivにマージンスタイルを 追加することで、インデントを追加できます。

  • <div style="display:inline-table; vertical-align:top; margin-left:4em;">
表1
名前
フレッド オレンジ
ボブ
リンディ
ニューヨーク市
表2
動物
ラクーン メイン
アラスカ
マンタレイ フロリダ

Gold star on blue.gif

フロートテーブルを左または右

2つのテーブルクラスfloatleftfloatright(大文字と小文字を区別する)は、テーブルをフローティングし、テキストに固執しないようにテーブルの余白を調整するのに役立ちます。floatleftテーブルを左にフロートさせ、右マージンを調整します。floatright反対のことをします。例:

この段落は表の前にあります。列2のテキストは、フォーマット指定子「rowspan = 2」のために両方の行にまたがっています。したがって、2行目の「列2」のコーディングはなく、列1と列3だけです。
{| class = "wikitable floatright"
| 列1、行1
| rowspan = "2" | 列2、行1(および2)
| 列3、行1
|-
| 列1、行2
| 列3、行2
|}
{| class = "wikitable floatleft"
| 列1、行1
| rowspan = "2" | 列2、行1(および2)
| 列3、行1
|-
| 列1、行2
| 列3、行2
|}
Sed ut perspiciatis、unde omnis iste natus error sit voluptatem accusantium doloremque laudantium、totam rem aperiam eaque ipsa、quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt、explicabo。Nemo enim ipsam voluptatem、quia voluptas sit、aspernatur aut odit aut fugit、sed quia consequuntur magni dolores eos、qui ratione voluptatem sequi nesciunt、neque porro quisquam est、qui dolorem ipsum、quia dolor sit a numquam eius modi tempora incidunt、ut Labore et dolore magnam aliquam quaeratvoluptatem。Ut enim ad minima veniam、quis nostrum exercitationem ullam corporis suscipit labiosam、nisi ut aliquid ex ea commodi consequatur?Quis autem vel eum iure reprehenderit、qui in ea voluptate velit esse、quam nihil molestiae consequatur、vel illum、qui dolorem eum fugiat、

ブラウザに表示されるとおり:

この段落は表の前にあります。列2のテキストは、フォーマット指定子「rowspan = 2」のために両方の行にまたがっています。したがって、2行目の「列2」のコーディングはなく、列1と列3だけです。

列1、行1 列2、行1(および2) 列3、行1
列1、行2 列3、行2
列1、行1 列2、行1(および2) 列3、行1
列1、行2 列3、行2

Sed ut perspiciatis、unde omnis iste natus error sit voluptatem accusantium doloremque laudantium、totam rem aperiam eaque ipsa、quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt、explicabo。Nemo enim ipsam voluptatem、quia voluptas sit、aspernatur aut odit aut fugit、sed quia consequuntur magni dolores eos、qui ratione voluptatem sequi nesciunt、neque porro quisquam est、qui dolorem ipsum、quia dolor sit a numquam eius modi tempora incidunt、ut Labore et dolore magnam aliquam quaeratvoluptatem。Ut enim ad minima veniam、quis nostrum exercitationem ullam corporis suscipit labiosam、nisi ut aliquid ex ea commodi consequatur?Quis autem vel eum iure reprehenderit、qui in ea voluptate velit esse、quam nihil molestiae consequatur、vel illum、qui dolorem eum fugiat、

、など、テーブルをフロートする方法は他にもありますが、フロートさstyle="float:left;"たマルチメディアオブジェクトのstyle="float:right;"にテーブルを配置できるパラメータはとだけであることに注意してください例えば: floatleftfloatright

テーブルをfloatleftプロデュースに合わせる:

StarIconGold.png
列1、行1 列2、行1(および2) 列3、行1
列1、行2 列3、行2

Sed ut perspiciatis、unde omnis iste natus error sit voluptatem accusantium doloremque laudantium、totam rem aperiam eaque ipsa、quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt、explicabo。Nemo enim ipsam voluptatem、quia voluptas sit、aspernatur aut odit aut fugit、sed quia consequuntur magni dolores eos、qui ratione voluptatem sequi nesciunt、neque porro quisquam est、qui dolorem ipsum、quia dolor sit a numquam eius modi tempora incidunt、ut Labore et dolore magnam aliquam quaeratvoluptatem。Ut enim ad minima veniam、quis nostrum exercitationem ullam corporis suscipit labiosam、nisi ut aliquid ex ea commodi consequatur?Quis autem vel eum iure reprehenderit、qui in ea voluptate velit esse、quam nihil molestiae consequatur、vel illum、qui dolorem eum fugiat、

しかし、それを調整すると、次のようになりstyle="float:left;"ます。

StarIconGold.png
列1、行1 列2、行1(および2) 列3、行1
列1、行2 列3、行2

Sed ut perspiciatis、unde omnis iste natus error sit voluptatem accusantium doloremque laudantium、totam rem aperiam eaque ipsa、quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt、explicabo。Nemo enim ipsam voluptatem、quia voluptas sit、aspernatur aut odit aut fugit、sed quia consequuntur magni dolores eos、qui ratione voluptatem sequi nesciunt、neque porro quisquam est、qui dolorem ipsum、quia dolor sit a numquam eius modi tempora incidunt、ut Labore et dolore magnam aliquam quaeratvoluptatem。Ut enim ad minima veniam、quis nostrum exercitationem ullam corporis suscipit labiosam、nisi ut aliquid ex ea commodi consequatur?Quis autem vel eum iure reprehenderit、qui in ea voluptate velit esse、quam nihil molestiae consequatur、vel illum、qui dolorem eum fugiat、

テーブルのセンタリング

align="center"HTML5では非推奨であり、Mediawikiソフトウェアではうまく機能しません。例えば; を介してテーブルの左揃えをオーバーライドすることはありませんclass=wikitable

中央に配置されたテーブルを実現できますが、「フロート」しません。つまり、どちらの側にもテキストは表示されません。秘訣は
{| style="margin-left: auto; margin-right: auto; border: none;" [注1]です

Wikiマークアップ:

表の前のテキスト...
{| class = "wikitable" style = "margin-left:auto; margin-right:auto; border:none;"
| +セルは左揃え、テーブルは中央に配置
|-scope = "col" | 飲酒運転scope = "col" | autescope = "col" | irure
|-
| ドーラー|| reprehenderitで|| 自発的なvelitで
|-
| esse cillum dolore || eu fugiat nulla || pariatur。
|}
...テーブルの後のテキスト

ブラウザに表示されるとおり:

表の前のテキスト...

セルは左揃えで、テーブルは中央に配置されます
飲酒運転 aute irure
ドーラー reprehenderitで 自発的なvelitで
esse cillum dolore eu fugiat nulla pariatur。

...テーブルの後のテキスト。

ネストされたテーブル

例えば
  • なぜ<nowiki/>

表の前のテキスト...

A B
A B
a0 b0
A A
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
a1 b1
B B
a0 b0
A A
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
a1 b1
B B
バツ
The all-in-one test...

...テーブルの後のテキスト。
— テーブル内のテーブル..。

...と...

電車を引用

外部リンク非表示のアイコン

ウィキテキスト:

<!-[[ヘルプ:コメントタグ]]->

{{Collapse | 1 = < nowiki /> 
*なぜ< syntaxhighlightlang  = "moin" inline > < nowiki / > </ syntaxhighlight ><!-上の<nowiki />を削除して確認します。-> 
{{tq2 | 1 = < nowiki /> {{tq2 | {{tq2 | 1 = < nowiki />テーブルの前のテキスト... <!-そして明示的なパラメータの受け渡し?[[Template:tq2#Caveats]]も確認してください。-> 
{{{!}} class = "wikitable" style = "background-color:#eaf8f4; color:#008560"
!A !! B !!
{{{!}} class = "wikitable" style = "background-color:#f8f4ea"
!A !! B
{{!}}-
{{!}}
{{{!}} class = "wikitable"
!a0 !! b0
{{!}}-
{{!}} A {{!}} {{!}} A
{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{{!}}
{{{!}} class = "wikitable"
!a1 !! b1
{{!}}-
{{!}} B {{!}} {{!}} B
{{!}}}
{{!}}}
{{!}}-
{{!}}
{{{!}} class = "wikitable" style = "color:#ff4242"
!a0 !! b0
{{!}}-
{{!}} A {{!}} {{!}} A
{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{{!}}
{{{!}} class = "wikitable"
!a1 !! b1
{{!}}-
{{!}} B {{!}} {{!}} B
{{!}}}
{{!}} {{Collapse | 1 = < span  style = "color:#ff4242" >オールインワンテスト... </ span > | 2 = X}}
{{!}}} ...テーブルの後のテキスト。| source = '' ' < span  style = "background-color:#ffff00" > Table </ span > in table' '' ...}}
...と...}}
'' '引用[[電車| < span  style = "color:#ff0000" > train </ span > ]] < span  style = "background-color:#ffff00; color:#ff0000" ></スパン> '' '

[https://en.wikipedia.org/wiki/Help:Link#External_links外部リンク](< span  class = "plainlinks" > [https://en.wikipedia.org/wiki/Help:External_link_icons#Hiding_link_icons hidden icon ] </ span >)}} | 2 =たとえば| expand = y}}


7つの異なる(青)テーブルが、テーブルのセル内にネストされて表示されます。自動的に、2つのテーブル| A | および| B | B | セル内の通常のテキスト文字の横並びではなく、垂直方向に配置されます。そして、float各テーブルを修正するために使用されます| C | および| D | テーブルの1つのセル内の独自の位置に。これはチャートや回路図に使用できますが、上記のように、これは非推奨です。ネストされたテーブルは、新しい行から開始する必要があります。

α cell2
ネスト
テーブル
元のテーブルをもう一度
A
B B
C
D


ウィキテキスト:

{| style = "border:1px solid black;"
| style = "border:1px solid black;" | &アルファ;
| style = "border:1px solid black; text-align:center;" | cell2
{| style = "border:2px solid black; background:#ffffcc;" <!-ネストされたテーブルは新しい行にある必要があります->
| style = "border:2px solid darkgray;" | ネスト
|-
| style = "border:2px solid darkgray;" | テーブル
|}
| style = "border:1px solid black; vertical-align:bottom;" | 元のテーブルをもう一度
| style = "border:1px solid black; width:100px" |
{| style = "border:2px solid black; background:#ffffcc"
| style = "border:2px solid darkgray;" | A
|}
{| style = "border:2px solid black; background:#ffffcc"
| style = "border:2px solid darkgray;" | B
| style = "border:2px solid darkgray;" | B
|}
| style = "border:1px solid black; width:50px" |
{| style = "border:2px solid black; background:#ffffcc; float:left"
| style = "border:2px solid darkgray;" | C
|}
{| style = "border:2px solid black; background:#ffffcc; float:right"
| style = "border:2px solid darkgray;" | D
|}
|}

スクロール

注:テーブルとスティッキーヘッダーのスクロールについては、このCSSトークページを参照してください。
参照:メタ:コミュニティウィッシュリスト調査2022 /テーブルヘッダーの読み取り/フローティングそして:T42763

テーブル全体をスクロールdiv内に配置して、古いテーブル行が消えたときに新しいテーブル行が画面に表示されるようにすることができます。MOS:SCROLL、およびこの記事の説明を参照してくださいそのディスカッションの完全にブラインドスクリーンリーダーのユーザーは、関連記事のスクロールテーブルは問題ではないと書いています。国や地域ごとのCOVID-19のパンデミック、およびCOVID-19のパンデミックによる死亡には、非常に高度なスクロールテーブルがいくつかあります(スクロール中に行と列のヘッダーが表示され、粘着性があります)スクロールヘッダーとスティッキーヘッダーは携帯電話でも機能します。さらに下の別のスクロールテーブルを参照してください:#Sectionリンクまたは行アンカーへのマップリンク

abc def
jkl mno pqr
stu vwx yz
< div  style = "height:7em; overlay:auto; border:2px solid red;" >>
{| class = wikitable
|-
| abc || def || 
| -style = "height:100px;"
| jkl || style = "width:100px;" | mno || pqr
|-
| stu || vwx || yz
|}
</ div >

色; パラメータの範囲

単一のセルのテキストと背景の色を指定する2つの方法は次のとおりです。

ウィキソース

{|
|-
| style = "background:red; color:white;" | abc
| def
| style = "background:red;" | <スパン スタイル= "color:white;" ></スパン>
| jkl
|}

レンダリングされた結果

abc def jkl

他のパラメータと同様に、行全体またはテーブル全体に色を指定することもできます。行のパラメーターはテーブルの値をオーバーライドし、セルのパラメーターは行のパラメーターをオーバーライドします。

style=background-color:並べ替え可能なヘッダーセルで機能します。style=background:ではない。そのセルでの並べ替えが壊れます。ヘルプ:並べ替えを参照してください

列全体の色を指定する簡単な方法はありません。列の各セルを個別に指定する必要があります。ツールはそれを簡単にすることができます。

Wikiマークアップ

{| style = "background:yellow; color:green;"
|-
| stu || style = "background:silver;" | vwx || yz
| -style = "background:red; color:white;"
| stu || style = "background:silver;" | vwx || yz
|-
| stu || style = "background:silver;" | vwx || yz
|}

レンダリングされた結果

stu vwx yz
stu vwx yz
stu vwx yz

テーブルを背景に溶け込ませるには、style="background: none;"またはを使用しますstyle="background: transparent;"(警告:style="background: inherit;"、IE6を含む一部の古いブラウザーでは機能しないため、色の設定が失敗した場合にテーブルが理解できるようにしてください。)

セルをclass=wikitableテンプレートのデフォルトの色の1つと一致させるには、次を使用します。style="background:#EAECF0;"   暗いヘッダーの場合、およびstyle="background:#F8F9FA;"   軽いボディに。#A2A9B1は、wikitablesの境界線の色です。

セル操作

セルパラメータの設定

セルの先頭に、パラメータを追加し、その後に1本のパイプを追加します。たとえば、style="width: 300px"|そのセルを300ピクセルの幅に設定します。複数のパラメータを設定するには、各パラメータの間にスペースを入れてください。

ウィキソース

{| style = "color:white;"
|-
| style = "background:red;" | cell1 || style = "width:300px; background:blue;" | cell2
| style = "background:green;" | cell3
|}

レンダリングされた結果

cell1 cell2 cell3

セルの垂直方向の配置

デフォルトでは、テキストはセルの垂直方向の中央に配置されます。

行ヘッダー 長いテキスト。Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。 短いテキスト
行ヘッダー Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
誰かがページを下にスクロールして、「空の」列の上部を見て、なぜそれらが空であるのか疑問に思っていると想像してください。
短いテキスト

テキストをセルの上部に揃えるには、style="vertical-align: top;"CSSを行に適用します(残念ながら、これをすべての行に個別に適用する必要があるようです)。このvalign=...属性は廃止されたため、使用しないでください。

ウィキソース

{| class = wikitable style = "width:400px;"
| -style = "vertical-align:top;"scope = "row" style = "width:10%;" | 行ヘッダー
| style = "width:70%;" | 長いピース..。
| style = "width:20%;" | 短いテキスト
| -style = "vertical-align:top;"scope = "row" | 行ヘッダー
| Excepteur sint occaecat .. ..
| 短いテキスト
|}

レンダリングされた結果

行ヘッダー 長いテキスト。Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。 短いテキスト
行ヘッダー Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
誰かがページを下にスクロールして、「空の」列の上部を見て、なぜそれらが空であるのか疑問に思っていると想像してください。
短いテキスト

セルの水平方向の配置

デフォルトでは、テキストはデータセルの左側に配置されます。

デフォルトでは、テキストはヘッダーセルの中央に配置されます。

上記のすべては、デスクトップビューとモバイルビューの両方に当てはまります。

テーブルのヘッダーテキストの配置は、テーブルwikitextの一番上の行を class=wikitable介して、グローバルな右または左のテキストの配置に関係なく中央に配置されたままになります。style=text-align:VALUE

class = wikitableのないテーブルのヘッダーテキストの配置は、テーブルのグローバルテキスト配置に従います。

個々のセルに設定されたテキストの配置は、他のすべてを上書きします。

セルコンテンツのインデントとパディング

セルの内容は、任意の側でインデントまたはパディングできます。また、テキストを揃えることもできます。2行目では、テキストが右揃えになっています。次の例を参照してください。

ウィキソース

{| class = wikitable
|-
| インデントまたはパディングされていないセルコンテンツ
|-
| style = "padding-left:2em;" | style = "padding-left:2em;"
|-
| style = "text-align:right; padding-right:2em;" | style = "text-align:right; padding-right:2em;"
|-
| style = "padding-top:2em;" | style = "padding-top:2em;"
|-
| style = "padding-bottom:2em;" | style = "padding-bottom:2em;"
|-
| style = "padding:3em 5%;" | style = "padding:3em 5%;" {{space | 4}}(上下:3em。左右:5%)
|-
| style = "padding:3em 4em 5%;" | style = "padding:3em 4em 5%;" {{space | 4}}(上:3em。左と右:4em。下5%)
|-
| style = "padding:3%;" | style = "padding:3%;" {{space | 4}}(上、右、下、左:すべて3%)
|-
| style = "padding:1em 20px 8%9em;" | style = "padding:1em 20px 8%9em;" {{space | 4}}(上:1em。右:20px。下:8%。左:9em。)
|}

レンダリングされた結果

インデントまたはパディングされていないセルコンテンツ
style = "padding-left:2em;"
style = "text-align:right; padding-right:2em;"
style = "padding-top:2em;"
style = "padding-bottom:2em;"
style = "padding:3em 5%;"     (上下:3em。左右:5%)
style = "padding:3em 4em 5%;"     (上:3em。左と右:4em。下5%)
style = "padding:3%;"     (上、右、下、左:すべて3%)
style = "padding:1em 20px 8%9em;"     (上:1em。右:20px。下:8%。左:9em。)

Westclox Big Ben.jpg
引数のパターン

の引数は、次の意味で、正午から時計回りに進む12時間時計style="padding: "順序付けられていると見なすことができます。「top」は正午(つまり、12時、時計の上部)に関連付けられています。右」は3時、「下」は6時、「左」は9時です。引数は正午から時計回りに並べられます:上→右→下→左(説明付きの例については、この[注2]脚注を参照してください)。

これと同じ順序は、セルの境界線をで指定する場合など、他の場所でも使用されますborder-style:

個々のセルの境界

テーブルに使用されるのと同じCSSをセルのフォーマット指定子(|...で囲まれている|)で使用して、各セルの周囲に境界線を付ける ことができます。

ウィキソース

{| style = "border-spacing:2px; border:1px solid darkgray;"style = "width:140px;" | style = "width:150px;" | 中心style = "width:130px;" | 
| -style = "text-align:center;"
| style = "border:1px solid blue;" |
[[File:StarIconBronze.png | 120px |ブロンズスターアイコン]]
| style = "border:1px solid#777777;" |
[[File:StarIconGold.png | 120px |ゴールドスターアイコン]]
| style = "border:1px solid#22AA55;" | <!-緑がかった境界線->
[[File:StarIconGreen.png | 120px |緑色の星のアイコン]]
| -style = "text-align:center;"
|ブロンズスター|| ゴールドスター|| 緑の星
|}

レンダリングされた結果

中心

Bronze star icon

Gold star icon

Green star icon

ブロンズスター ゴールドの星 緑の星

テキストではなく、画像セルのみに個別の境界線があることに注意してください。下の16進色(:など#616161)は黒に近くなります。通常、テーブル内のすべての境界線は1つの特定の色になります。

セルの上、右、下、および左の境界線

単一のセルの左、右、下、または上の境界線を設定するには、style='border-style:'4つの引数を取り、それぞれがまたはのいずれかであるをsolid使用できnoneます。これらの引数は、ここで説明するパターンに従って順序付けられています。たとえばstyle="border-style: solid none solid none;"、4つのパラメータがそれぞれに対応する場合

'border-style: top right bottom left;'

セルの境界。この例の後に説明する理由により、実際に表示されるテーブルに変更が加えられないように、次のコードを変更する方法は多数あります

ウィキソース

{| class = wikitable
|-
| 左上
<!-ボーダースタイル:右上下左; ->
| style = "border-style:solid solid none none;" | Top_Center
| 右上
|-
| style = "border-style:none none solid solid;" | Middle_Left
| style = "border-style:none none none none;" | Middle_Center
| style = "border-style:solid solid none none;" | Middle_Right
|-
| 左下の
| style = "border-style:none none solid solid;" | Bottom_Center
| 右下
|}

レンダリングされた結果

左上 Top_Center 右上
Middle_Left Middle_Center Middle_Right
左下の Bottom_Center 右下

ただし、次の表ではMiddle_Center、コードに関係なく、中央のセル(つまり)の境界線は削除されていないことに注意してstyle="border-style: none none none none;"ください。

ウィキソース

{| class = wikitable
|-
| Top_Left || Top_Center || 右上
|-
| Middle_Left
| style = "border-style:none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || 右下
|}

レンダリングされた結果

左上 Top_Center 右上
Middle_Left Middle_Center Middle_Right
左下の Bottom_Center 右下

これは、コードがテーブル内のすべてclass="wikitable"のセルの周囲に境界線(上、右、下、左)を配置し、たとえば、セル「Middle_Center」と「Middle_Right」の間に実際には2つの境界線があるために発生します。したがって、セル「Middle_Center」と「Middle_Right」の間の境界線を削除するには、「Middle_Center」の右の境界線と「Middle_Right」の左の境界 線の両方を削除する必要があります。

ウィキソース

{| class = wikitable
|-
| Top_Left || Top_Center || 右上
|-
| Middle_Left
<!-'ボーダースタイル:右上下左;' ->
| style = "border-style:none none none none;" | Middle_Center
| style = "border-style:none none none none;" | Middle_Right
<!-上記の行で、左端の3つの「none」引数を「solid」(または他の有効な引数)に置き換えることができ、表示されるテーブルに変更はありません。Middle_Rightの左の境界線である4番目の引数のみが「none」である必要があります。たとえば、上記の行は次のように置き換えることができます
style = "border-style:solid solid solid none;" | Middle_Right- 
>
|-
| Bottom_Left || Bottom_Center || 右下
|}

レンダリングされた結果

左上 Top_Center 右上
Middle_Left Middle_Center Middle_Right
左下の Bottom_Center 右下

に置き換えることに注意して{| class="wikitable"ください

{| style="border-collapse: collapse;"

テーブル内のすべてのセルの周囲にデフォルトで表示されるすべてのセルの境界線を削除する効果があります。この変更では、2つのセルの境界線を削除するのではなく、2つの隣接するセルの間に単一のセルの境界線を挿入する必要があります。

行演算

高さ

§幅、高さを参照)

国境

§境界線の設定を参照)

行番号

ヘルプ:行番号のセクションの並べ替えを参照してください。と:

列の操作

列幅の設定

列のセルで最も幅の広いテキスト要素の幅を受け入れるのではなく、列の幅を特定の要件に強制するには、この例に従います。テキストの折り返しが強制さ れることに注意してください。

ウィキソース

{| class = wikitable
|-scope = "col" style = "width:50px;" | 名前scope = "col" style = "width:250px;" | 効果scope = "col" style = "min-width:225px; max-width:300px;" | で見つかったゲーム
|-
| モンスターボール|| レギュラーポケボール|| すべてのバージョン
|-
| グレートボール|| モンスターボールよりも優れている|| すべてのバージョン
|}

レンダリングされた結果

名前 効果 で見つかったゲーム
モンスターボール レギュラーポケボール すべてのバージョン
グレートボール モンスターボールよりも優れている すべてのバージョン

ヘッダーのないテーブルに列幅を設定するには、各列の最初のセルに幅を指定します。

ウィキソース

{| class = wikitable
|-
| style = "width:100pt;" | この列の幅は100ポイントです
| style = "width:200pt;" | この列の幅は200ポイントです
| style = "width:300pt;" | この列の幅は300ポイントです
|-
| 何とか|| blih || bluh
|}

レンダリングされた結果

この列の幅は100ポイントです この列の幅は200ポイントです この列の幅は300ポイントです
何とか blih bluh

2列のテーブルの1つをに設定して、2列のテーブルの幅を均等にするなど、パーセンテージを使用することもできますstyle="width: 50%;"

幅を設定する1つのアプリケーションは、連続するテーブルの列を揃えることです。以下は、列が350pxと225pxに設定された個別のテーブルです。警告:特定のピクセルサイズを設定すると、ブラウザウィンドウ、デバイスサイズ、ユーザーエンドのフォントサイズの制限、およびその他の制約に合わせてコンテンツを調整するブラウザの機能が妨げられるため、非推奨になりました。パーセンテージまたはemでの相対サイズを使用することを強くお勧めします。

ウィキソース

{| class = wikitable
|-scope = col style = "width:350px;" | scope = col style = "width:225px;" | 資本
|-
| オランダ|| アムステルダム
|}

{| class = wikitable
|-scope = col style = "width:350px;" | scope = col style = "width:225px;" | 資本
|-
| フランス|| パリ
|}

レンダリングされた結果

資本
オランダ アムステルダム
資本
フランス パリ

ノーラップ

ページの幅全体にまたがるテーブルでは、最も幅の広いセルよりも幅の狭いセルが折り返される傾向があります。列全体が折り返されないようstyle="white-space: nowrap;"にするには、最も長い/最も広いセルの非ヘッダーセルで使用して、列全体に影響を与えます。

なしnowrapで、ブラウザに表示されるように:

ウィキソース

{| class = "wikitable sortable"
|-
scope = col | エピソード
scope = col | 日付
scope = col | 概要
|-
|「旅の始まり」
| 2010年1月1日
| [[ Lorem ipsum ]] dolor sit amet、[...] <!-このテキストは、以下の出力に表示される実際の(長い)テキストの切り捨てです->
|-
|「エピソードが攻撃するとき」
| 2010年1月8日
| Lorem ipsum dolor sit amet、[...]
|-
|「とても長い」
| 2010年1月15日
| Lorem ipsum dolor sit amet、[...]
|}

レンダリングされた結果

エピソード 日にち 概要
「旅の始まり」 2010年1月1日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
「エピソードが攻撃するとき」 2010年1月8日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
"さよなら" 2010年1月15日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。

nowrapブラウザに表示されるように、[エピソード]列と[日付]列の両方に、を付けます

ウィキソース

{| class = "wikitable sortable"
|-
scope = col | エピソード
scope = col | 日付
scope = col | 概要
|-
|「旅の始まり」
| 2010年1月1日
| [[ Lorem ipsum ]] dolor sit amet、[...] <!-このテキストは、以下の出力に表示される実際の(長い)テキストの切り捨てです->
|-
| style = "white-space:nowrap;" | "エピソードが攻撃したとき"
| 2010年1月8日
| Lorem ipsum dolor sit amet、[...]
|-
|「とても長い」
| style = "white-space:nowrap;" | 2010年1月15日
| Lorem ipsum dolor sit amet、[...]
|}

レンダリングされた結果

エピソード 日にち 概要
「旅の始まり」 2010年1月1日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
「エピソードが攻撃するとき」 2010年1月8日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。
"さよなら" 2010年1月15日 Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magnaaliqua。Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodoconsequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur。Excepteur sint occaecat cupidatat non proident、sunt in culpa qui officia deserunt mollit anim id estlaborum。

ツールチップ

{{ H:title }}テンプレートを使用して、列にツールチップを追加できます。column-titleを。に置き換えるだけで{{H:title|The tool tip|Column title}}、次のように表示されます:Columntitle

より複雑な例

メランジュ

注:この例にはアクセスできないため、できるだけ避ける必要があります。たとえば、ネストされたテーブル(テーブル内のテーブル)は、可能な場合は個別のテーブルに分割する必要があります。

これはより高度な例であり、テーブルを作成するために利用できるいくつかのオプションを示しています。

ユーザーは、自分のテーブルでこれらの設定を試して、どのような効果があるかを確認できます。これらの手法のすべてがすべての場合に適切であるとは限りません。たとえば、色付きの背景を追加できるからといって、それが常に良いアイデアであるとは限りません。テーブル内のマークアップを比較的単純に保つようにしてください。他の人も記事を編集することを忘れないでください。ただし、この例では、何が可能かを理解できます。

Wikiマークアップ:

中央揃えのテーブルの前のテキスト...
{| style = "border:1px solid black; border-spacing:0; margin:1em auto;"
| + '' 'テーブルの例' ''
|-
style = "border:1px solid black; padding:5px; background:#efefef;" | 最初のヘッダー
colspan = "2" style = "border:1px solid black; padding:5px; background:#ffdead;" | 2番目のヘッダー
|-
| style = "border:1px solid black; padding:5px;" | 左上
| style = "border:1px solid black; padding:5px;" | アッパーミドル
| rowspan = "2" style = "border:1px solid black; border-bottom:3px solid grey; padding:5px; vertical-align:top;" |
右側
|-
| style = "border:1px solid black; border-bottom:3px solid grey; padding:5px;" | 左下
| style = "border:1px solid black; border-bottom:3px solid grey; padding:5px;" | 下位中産階級
|-
| colspan = "3" style = "border:1px solid black; text-align:center;" |
ネストされたテーブルの前のテキスト...
{|
| + ''テーブル内のテーブル ''
|-
| style = "text-align:center; width:150px;" | [[ファイル:Wiki.png ]]
| style = "text-align:center; width:150px;" | [[ファイル:Wiki.png ]]
|-
| colspan = "2" style = "text-align:center; border-top:1px solid red; <!-
  -> border-right:1pxの赤一色; border-bottom:2pxの赤一色; <!-
  -> border-left:1px solid red; "|
2つのウィキペディアのロゴ
|}
...ネストされたテーブルの後のテキスト
|}
...中央のテーブルの後のテキスト

ブラウザに表示されるとおり:

中央揃えのテーブルの前のテキスト...

テーブルの例
最初のヘッダー 2番目のヘッダー
左上 アッパーミドル

右側

左下 下位中産階級

ネストされたテーブルの前のテキスト...

テーブルの中のテーブル
Wiki.png Wiki.png

2つのウィキペディアのロゴ

...ネストされたテーブルの後のテキスト

...中央のテーブルの後のテキスト

中央に浮かぶ画像

テーブルを使用して画像を折り返すことができるため、テーブルをページの中央に向かって浮かせることができます(:を使用するなどstyle="float: right;")。ただし、テーブルの余白、境界線、およびフォントサイズは、通常の画像表示と一致するように正確に設定する必要があります。File-specパラメーター|thumb(ユーザー設定の幅に自動サムネリングしますが)は、近くのテキストを圧迫する広い左マージンを強制するため、パラメーター|centerを追加して左マージンのパディングを抑制することができます。ただし、|centerキャプションを2行目(中央のボックス "[]"の下)に表示する|thumb場合があるため、省略して画像サイズをハードコーディングし、灰色(#BBB)の境界線を追加することもできます。正確なパラメータを使用して他の画像と一致させると、フローティング画像テーブルは次のようにコーディングできます。

{| style = "float:right; border:1px solid #BBB; margin:.46em 0 0 .2em;"
| -style = "font-size:86%;"
| style = "vertical-align:top;" | [[ファイル:DuraEuropos-TempleOfBel.jpg | 180px ]] <!- 
  > <br>ベル神殿[[ベル(神話) | ベル]](フローティング)
|}

フローティングテーブル内のテキストのサイズはstyle="font-size: 86%;"。です。そのフローティング画像テーブルは、一般的な画像ボックスをフローティングしますが、画像の左側の余白を調整することができます(以下のテンプル-フローティングの例を参照)。

インフォボックスA
このサンプルインフォボックスは、フローティング画像ボックスが中央に向かってどのように配置されるかを示しています。
DuraEuropos-TempleOfBel.jpg
ベル 神殿 (フローティング)
この表の周りの破線の境界線は、「thumb | right」を使用した画像の暗黙のマージンを示しています。

キャプションテキストを省略したり、パラメータ「thumb |」を削除したりできます。そのため、キャプションは「マウスオーバー表示」まで非表示になります。残念ながら、パラメータ|thumb(キャプションの表示に使用)は、ユーザー設定のサイズで画像のサイズを変更するための自動サムネリングも制御します。キャプションを隠しながら自動サムネイルサイズを設定するには、|frameless|rightの代わりにを使用し|thumbます。

パラメータ付きの画像セットは|left右側のマージン(パラメータの反対側のマージン)が広いため、style = "float:left; margin:0.46em 0.2em;のテーブル内|rightの画像セットを使用すると、左側にフローティングできます。 |center"。

画像テーブルの外側では、パラメータ|rightによって画像がインフォボックスの上または下に(いずれか)整列しますが、インフォボックスの横には表示されないことを思い出してください。

優先順位に注意してください。最初にを使用するインフォボックスまたは画像が表示され|right、次にフローティングテーブルが表示され、最後に、まだ収まるテキストの折り返しが表示されます。テキストの最初の単語が長すぎると、左側を完成させるのにテキストが収まらないため、フローティングテーブルの横にテキストを収めるのに十分なスペースが残っていない場合は、「不規則な左マージン」を作成することに注意してください。

複数の単一画像テーブルがスタックされている場合、ページ幅に応じて、ページ全体に整列するようにフロートします。テキストを絞り込んで、自動調整されたとおりにできるだけ多くのフローティングテーブルを表示してから、左側に収まるテキストをすべて折り返します。

DuraEuropos-TempleOfBel.jpg
...フロートによる:右
DuraEuropos-TempleOfBel.jpg
...画像の折り返し...
DuraEuropos-TempleOfBel.jpg
これらすべて...

この自動整列機能を使用して、画像の「フローティングギャラリー」を作成できます。つまり、各テーブルがテキストの単語であるかのように、20個のフローティングテーブルのセットが(後方、右から左に)折り返されます。ページ。通常の方向に折り返す(左から右に折り返す)には、代わりに、topパラメーターを使用して左側のテーブルとしてすべてのフローティングテーブルを定義しますstyle="float:left; margin:0.46em 0.2em;"複数のフローティング画像は、テキストの周りの画像のより柔軟な植字を可能にします。

COLSPANとROWSPANの併用

ウィキソース

{| class = wikitable
|-
1列目!! 2列目!! 列3
|-
| rowspan = 2 | A
| colspan = 2 style = "text-align:center;" | B
<!-この行の列3はセルB(左側)で占められています->
|-
<!-この行の列1はセルA(上)で占められています->
| C 
| D
|-
| E
| rowspan = 2 colspan = 2 style = "text-align:center;" | F
<!-この行の列3はセルF(左側)で占められています->
|-
| G 
<!-この行の列2と3はセルF(上)で占められています->
|-
| colspan = 3 style = "text-align:center;" | H
<!-この行の列2と3はセルH(左側)で占められています->
|}

レンダリングされた結果

列1 列2 列3
A B
C D
E F
G
H

rowspan=2forセルGrowspan=3をforセルFと組み合わせてGFの下に別の行を取得することは、すべての(暗黙の)セルが空になるため、機能しないことに注意してください。同様に、すべてのセルが空の場合、完全な列は表示されません。空でないセルと空のセルの間の境界線も表示されない場合があります(ブラウザによって異なります)&nbsp;。空のセルをダミーのコンテンツで埋めるために使用します。

以下は、宣言された行とセルの順序が括弧内に示されている同じ表です。rowspanの使用法colspanも示されています。

列1
(行1セル1)
列2
(行1セル2)
列3
(行1セル3)
A
(行2セル1)
rowspan=2
B
(行2セル2)
colspan=2
C
(行3セル1)
D
(行3セル2)
E
(行4セル1)
F
(行4セル2)
rowspan=2 colspan=2
G
(行5セル1)
H
(行6セル1)
colspan=3

セルCは列2にありますが、列1は行2で宣言されたセルAで占められているため、 Cは行3で宣言された最初のセルです。セルFは行5で宣言された唯一のセルです他の列を占有しますが、行4で宣言されています。

回避策

小数点の位置合わせ

残念ながら、数値の列を小数点に揃える唯一の方法は、最初の右寄せと2番目の左寄せの2つの列を使用することです。

ウィキソース

{| style = "border-collapse:collapse;"
| style = "text-align:right;" | 432 || .1
|-
| style = "text-align:right;" | 43 || .21
|-
| style = "text-align:right;" | 4 || .321
|}

レンダリングされた結果

432 .1
43 .21
4 .321

数値の列がセルのパディングまたはセルの境界線のあるテーブルに表示される場合でも、境界線と2つの列の間のパディングを強制的にオフにすることで、中央に見苦しいギャップなしで小数点を揃えることができます。

ウィキソース

{| class = wikitable
!colspan = 2 | 見出し
|-
| style = "text-align:right; border-right:none; padding-right:0;" | 432
| style = "text-align:left; border-left:none; padding-left:0;" | .1
|-
| style = "text-align:right; border-right:none; padding-right:0;" | 43
| style = "text-align:left; border-left:none; padding-left:0;" | .21
|-
| style = "text-align:right; border-right:none; padding-right:0;" | 4
| style = "text-align:left; border-left:none; padding-left:0;" | .321
|}

レンダリングされた結果

見出し
432 .1
43 .21
4 .321

または、{{ decimalcell }}テンプレートを使用することもできます。

ウィキソース

{| class = wikitable
 colspan = 2 |見出し
|-
| {{小数セル| 432.1 }}
|-
| {{小数セル| 43.21 }}
|-
| {{小数セル| 4.​​321 }}
|}

レンダリングされた結果

見出し
432
.1
43
.21
4
.321

このように2つの列を使用すると、通常、Webページを(ブラウザーまたは検索エンジンのいずれかで)検索すると、列の境界にまたがるテキストを見つけることができないという欠点があります。

また、テーブルにセル間隔(したがってborder-collapse=separate)がある場合、つまりセルの間にギャップがある個別の境界線がある場合でも、そのギャップは表示されます。

数字の列を揃えるより大雑把な方法は、数字の幅を意図した図形スペース &#8199;を使用することですが、実際にはフォントに依存します。

ウィキソース

{|
| 432.1
|-
| &amp; #8199; 43.21
|-
| &amp; #8199; &amp; #8199; 4.321
|}

レンダリングされた結果

432.1
 43.21
  4.321

この行のその他のコンパニオンは次のとおりです。タイプライターのキーボードのハイフンダッシュで簡単に使用できる代わりに、ピリオドまたはコンマを置き換える句読点( ) –これはプラス記号と同じ幅であり、図ダッシュもおそらく最も有用です。明らかにウィキペディアにはない電話番号。 &#x2008;&minus;

OpenTypeフォントを使用する場合、を交互に使用することもできます。これは、アラビア数字⟨1⟩のカーニングで特に顕著です。標準のブラウザでは、サンセリフフォント⟨1⟩は他の数字と同じ幅を占めます。オンになって いるかのように動作します。font-variant-numeric:tabular-numsfont-variant-numeric:proportional-numsfont-variant-numerals:tabular-nums

{{ 0 }}が位置合わせに役立つと感じる人もいます。

最後の手段として、事前にフォーマットされたテキストを使用する場合、表機能を完全に省略して、行をスペースで開始し、スペースを入れて数字を配置することができます。ただし、事前にフォーマットされたテキストを使用するのには十分な理由があります。記事のテキスト:

ウィキソース(スペースだけ!):

432.1
  43.21
   4.321

レンダリングされた結果

432.1
 43.21
  4.321

非長方形のテーブル

{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}}以下のレンダリング結果の左上のセルのように、ヘッダーセルを斜めに分割するために使用できます。[注3]

ウィキソース

{| class = wikitable
{{対角分割ヘッダー| From | To}}
個体 !!液体 !!ガス
|-
個体
| 固体-固体変換|| 溶ける|| 昇華
|-
液体
| 凍結|| {{ sdash }} || 沸騰/蒸発
|-
ガス
| 証言録取|| 凝縮|| {{ sdash }}
|}

レンダリングされた結果

から
個体 液体 ガス
個体 固体-固体変換 溶融 昇華
液体 凍結 沸騰/蒸発
ガス 沈着 結露

セルの境界線はborder: none; background: none;、テーブルまたはセルのいずれかのスタイル属性に追加することで非表示にできます(古いブラウザーでは機能しない場合があります)。もう1つの用途は、複数列に整列されたテーブルを実装することです。

ウィキソース

{| class = wikitable style = "border:none; background:none;"
colspan = 2 rowspan = 2 style = "border:none; background:none;" | [[File:Pfeil_SO.svg | none | link = | 20px]]
colspan = 3 | 
|-しっかり液体ガス
|-rowspan = 3 | から個体
| 固体-固体変換|| 溶ける|| 昇華
|-液体
| 凍結|| {{sdash}} || 沸騰/蒸発
|-ガス
| 証言録取|| 凝縮|| {{sdash}}
|}

レンダリングされた結果

Pfeil SO.svg
個体 液体 ガス
から 個体 固体-固体変換 溶融 昇華
液体 凍結 沸騰/蒸発
ガス 沈着 結露

画像上のリンクの削除は、それが純粋に装飾的であることに依存していることに注意してください(支援機器によって無視されるため)

ウィキソース

{| class = wikitable style = "border:none; background:none;"
scope = col | scope = col | サイズ
| rowspan = 5 style = "border:none; background:none;" |
scope = col | scope = col | サイズ
| rowspan = 5 style = "border:none; background:none;" |
scope = col | scope = col | サイズ
|-
| 1990 || 1000 <br>(推定)|| 2000 || 1357 || 2010 || 1776年
|-
| 1991 || 1010 || 2001 || 1471 || 2011 || 1888年
|-
| colspan = 2 style = "text-align:center;" |⋮
| colspan = 2 style = "text-align:center;" |⋮
| colspan = 2 style = "text-align:center;" |⋮
|-
| 1999 || 1234 || 2009 || 1616 || 2019 || 1997 <br>(est)
|}

レンダリングされた結果

サイズ サイズ サイズ
1990年 1000
(推定)
2000 1357 2010年 1776年
1991 1010 2001年 1471 2011 1888年
1999年 1234 2009年 1616 2019年 1997年
(推定)

センタリング

§センタリングテーブルを参照)

クラス

上記で説明した基本的なCSSクラス以外にも、いくつかのCSSクラスがありますclass=wikitable

テーブルコードの最初の行の、の後に{|、スタイルを直接指定する代わりに、スタイルを適用するために使用できるCSSクラスを指定することもできます。このクラスのスタイルは、さまざまな方法で指定できます。

  • ソフトウェア自体で、スキンごとに(たとえば、クラスソート可能
  • MediaWiki:Common.css内の1つのwikiのすべてのユーザーをまとめて(たとえば、このプロジェクトや他のいくつかのプロジェクトでは、クラスwikitableが存在するか、または存在し、後でshared.cssに移動されました)
  • MediaWiki:Monobook.cssなどのスキンごとに個別に
  • ユーザーサブページの1つのWikiで個別に
  • 個別に、ただしユーザーのローカルコンピューター上のすべてのWebページに関連するクラスのテーブルに対して共同で。

テーブルパラメータを記憶する代わりに、の後に適切なクラスを含めるだけです{|これにより、テーブルのフォーマットの一貫性を保つことができ、クラスを1回変更するだけで問題を修正したり、それを使用しているすべてのテーブルの外観を一度に向上させることができます。たとえば、これは次のとおりです。

ウィキソース

{| style = "border-spacing:2px;"
| +掛け算の九九
|-scope = col | &times;scope = col | 1scope = col | 2scope = col | 3
|-scope = row | 1
| 1 || 2 || 3
|-scope = row | 2
| 2 || 4 || 6
|-scope = row | 3
| 3 || 6 || 9
|-scope = row | 4
| 4 || 8 || 12
|-scope = row | 5
| 5 || 10 || 15
|}

レンダリングされた結果

九九
×× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

これになります:

ウィキソース

{| class = wikitable
| +掛け算の九九
|-scope = col | &times;scope = col | 1scope = col | 2scope = col | 3
|-scope = row | 1
| 1 || 2 || 3
|-scope = row | 2
| 2 || 4 || 6
|-scope = row | 3
| 3 || 6 || 9
|-scope = row | 4
| 4 || 8 || 12
|-scope = row | 5
| 5 || 10 || 15
|}

レンダリングされた結果

九九
×× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

テーブルのインラインCSSを。に置き換えるだけclass=wikitableです。これは、 MediaWiki:Common.csswikitableのクラスに多数のCSSスタイルルールが含まれているためです。これらはすべて、クラスでテーブルをマークするときに一度に適用されます。その後、必要に応じてスタイルルールを追加できます。これらはクラスのルールをオーバーライドし、クラススタイルをベースとして使用し、それを基に構築できるようにします。 table.wikitable

ウィキソース

{| class = wikitable style = "font-style:italic; font-size:120%; border:3px dashed red;"
| +掛け算の九九
|-scope = col | &times;scope = col | 1scope = col | 2scope = col | 3
|-scope = row | 1
| 1 || 2 || 3
|-scope = row | 2
| 2 || 4 || 6
|-scope = row | 3
| 3 || 6 || 9
|-scope = row | 4
| 4 || 8 || 12
|-scope = row | 5
| 5 || 10 || 15
|}

レンダリングされた結果

九九
×× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

テーブルはwikitableクラスの灰色の背景を保持し、ヘッダーは引き続き太字で中央に配置されていることに注意してください。しかし、現在、テキストの書式設定はローカルstyle=ステートメントによって上書きされています。表のすべてのテキストは斜体で通常のサイズの120%になり、wikitableの境界線は赤い破線の境界線に置き換えられました。

折りたたみ可能なテーブル

クラスはテーブルを折りたたむためにも使用できるため、デフォルトでは非表示になっています。クラスmw-collapsibleを使用して、折りたたみ動作を有効にします。sortable折りたたみ可能なテーブルは、クラスも含めることで並べ替えることもできます§並べ替え可能なテーブルを参照)デフォルトでは、折りたたみ可能なテーブルは展開を開始します。これを変更するには、クラスを追加します。または、の代わりにを追加することもできます。これにより、ページに2つ以上の折りたたみ可能な要素が存在する場合、テーブルが自動的に折りたたまれます。 mw-collapsedautocollapsemw-collapsed

:この記事の以前のバージョンではcollapsibleクラスが推奨されていましたmw-collapsibleが、現在は推奨されています。これはMediaWikiソフトウェアの機能であり、ローカルのカスタマイズではなく、テーブルだけでなく、任意の要素を折りたたみ可能にするために使用できます。mw-collapsibleまた、テーブルにヘッダー行は必要ありませんcollapsibleテーブルのキャプションが存在しない限り、テーブルの最初の行に「[hide]」/「[show]」コントロールが表示されます(ヘッダー行であるかどうかは関係ありません)。§キャプション付きの表を参照)

ヘッダー行の例

ウィキソース

{| class = "wikitable mw-collapsible mw-collapsed"
|-
 ヘッダ
|-
| 隠され始めたコンテンツ
|-
| より多くの隠されたコンテンツ
|}

レンダリングされた結果

ヘッダ
Content that starts hidden
More hidden content

ヘッダー行のない例

ウィキソース

{| class = "wikitable mw-collapsible"
|-
| 最初の行は常に表示されます
|-
| 表示され始めるコンテンツ
|}

レンダリングされた結果

最初の行は常に表示されます
表示され始めるコンテンツ


ウィキソース

{| class = "wikitable mw-collapsible mw-collapsed"
|-
| 最初の行は常に表示されます
|-
| 他の行は非表示になります
|}

レンダリングされた結果

最初の行は常に表示されます
Other rows start hidden

キャプション付きのテーブル

キャプションのあるテーブルは、テーブルのキャプションに折りたたまれます。折りたたむとヘッダーは表示されません。{{ nowrap }}を使用して、テーブルが折りたたまれたときにキャプションが小さな垂直の列に収まらないようにします。

ウィキソース

{| class = "wikitable mw-collapsible"
| + {{ nowrap |やや長いテーブルキャプション}}
|-
 ヘッダ
|-
| コンテンツが表示され始めます
|-
| より目に見えるコンテンツ
|}

レンダリングされた結果。
「非表示」をクリックして表示します


やや長いテーブルキャプション
ヘッダ
コンテンツが表示され始めます
より目に見えるコンテンツ

Rendered result
(without {{nowrap}}.
Click "hide" to see


Somewhat long table caption
Header
Content starts visible
More visible content

Starting off collapsed:

Wiki source

{| class="wikitable mw-collapsible mw-collapsed"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts hidden
|-
| More hidden content
|}

Rendered result.
Click "hide" to see


Somewhat long table caption
Header
Content starts hidden
More hidden content

Rendered result
(without {{nowrap}}.
Click "hide" to see


Somewhat long table caption
Header
Content starts hidden
More hidden content

Sortable tables

Tables can be made sortable by adding class=sortable to the top line of the table wikitext. For details see Help:Sorting.

Numerical and year sorting problems

Sorting and collapsing

It is possible to collapse a sortable table. To do so, you need to use this code:

class="wikitable sortable mw-collapsible"

For example:

Wiki source

{| class="wikitable sortable mw-collapsible"
|+ {{nowrap|Sortable and collapsible table }}
|-
! scope=col | Alphabetic
! scope=col | Numeric
! scope=col | Date
! scope=col class=unsortable | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4.2 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}

Rendered result

Sortable and collapsible table
Alphabetic Numeric Date Unsortable
d 20 2008-11-24 This
b 8 2004-03-01 column
a 6 1979-07-23 cannot
c 4.2 1492-12-08 be
e 0 1601-08-13 sorted.

If you want the table to default to collapsed state, use the code

{| class="wikitable sortable mw-collapsible mw-collapsed"

in place of

{| class="wikitable sortable mw-collapsible"

mw-datatable – row highlighting via cursor hover. White background

Note: class=mw-datatable is not working in some skins. See T287997 and this discussion.
Note: class=mw-datatable overrides background color for a row, but not the background color for individual cells.

class=mw-datatable allows for row highlighting. This makes it easier to follow the data and info across a row, especially in wider tables.

mw-datatable use is found with this global search within wikitext across all Wikimedia Foundation wikis. See bottom of search results for English language wiki use. See next section for one possible replacement.

tpl-blanktable – row highlighting via cursor hover. White background

This replaces class=mw-datatable (see previous section) for now. It does not override existing background colors set for cells or rows.

See Template:Import-blanktable. Add {{Import-blanktable}} in the wikitext anywhere before the table wikitext.

Add class=tpl-blanktable to the top of the table wikitext.

To see where and how it is used:

Scroll your cursor over the tpl-blanktable tables below to see the light blue hover banding.

class=tpl-blanktable produces a white background for data cells; while class=wikitable produces a gray background for data cells:

Wiki source

{{Import-blanktable}}
{| class=tpl-blanktable
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}

Rendered result

1 2 3
1-1 2-1 3-1
1-2 2-2 3-2


Wiki source

{| class=wikitable
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}

Rendered result

1 2 3
1-1 2-1 3-1
1-2 2-2 3-2

class=tpl-blanktable can be used in combination with class class=wikitable

Wiki source

{{Import-blanktable}}
{| class="wikitable tpl-blanktable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}

Rendered result

1 2 3
1-1 2-1 3-1
1-2 2-2 3-2

Cells spanning multiple rows or columns

It is possible to create cells that stretch over two or more columns. For this, one uses |colspan=n | content. Similarly, one can create cells that stretch over two or more rows. This requires |rowspan=m | content. In the table code, one must leave out the cells that are covered by such a span. The resulting column- and row-counting must fit.

Wiki source

{| class=wikitable style="text-align: center;"
!col1
!col2
!col3
!col4
|-
!row1
| colspan=2 | A
<!-- column counting: cell 'B' can not exist -->
|C
|-
!row2
|AA
|BB
|CC
|-
!row3
|AAA
| rowspan=2 | BBB
|CCC
|-
!row4
|AAAA
<!-- row counting: cell 'BBBB' can not exist -->
|CCCC
|}

Rendered result

col1 col2 col3 col4
row1 A C
row2 AA BB CC
row3 AAA BBB CCC
row4 AAAA CCCC

In the code, the cell | colspan="2" | A spans two columns. Note that, in the next column, a cell expected to contain "B" does not exist.

Similar: in the code, cell | rowspan="2" | BBB spans two rows. A cell expected to contain "BBBB" does not exist.

Section link or map link to a row anchor

To enable a section link's anchor (or a map link's anchor), referencing a specific row within a table, an id="section link anchor name" parameter needs to be added to the row start |- or <tr>:

|- id="section link anchor name"
<tr id="section link anchor name">

Note that each section link anchor name must be different from every other in the page (this includes heading names), to create valid XHTML and allow proper linking.

Example of a map link to a row

When a country label, containing a link, is clicked on the map, the link coded, for example, as [[#Table row 11|Slovenia]] that references the anchor (within the table), coded as |- id="Table row 11", makes the page scroll so selected row of the table is at the top of the browser view. Here, we use the template family {{Image label begin}}, {{Image label small}}, and {{Image label end}} to lay out such a table for us:

Avaaz members by percent of population.
The list can be scrolled manually or interactively.
Country Population Avaaz %

Andorra 85,000 3,316   3.90
Luxembourg 498,000 14,228   2.86
France 64,768,000 1,827,517   2.82
Belgium 10,423,000 292,530   2.81
Iceland 309,000 7,667 2.48
Switzerland 7,623,000 182,814 2.40
Malta 407,000 9,129 2.24
Austria 8,214,000 167,132 2.03
Liechtenstein 36,000 718 1.99
Spain 46,506,000 810,680 1.74
Slovenia 2,003,000 27,780 1.39
Sweden 9,074,000 125,248 1.38
Germany 81,644,000 1,082,972 1.33
Italy 60,749,000 796,634 1.31
Ireland 4,623,000 58,504 1.27
United Kingdom 62,348,000 781,025 1.25
Portugal 10,736,000 132,219 1.23
Netherlands 16,574,000 191,608 1.16
Romania 21,959,000 211,867 0.96
Norway 4,676,000 36,483 0.78
Denmark 5,516,000 41,377 0.75
Bulgaria 7,149,000 52,296 0.73
Greece 10,750,000 78,874 0.73
Latvia 2,218,000 14,967 0.67
Estonia 1,291,000 8,535 0.66
Croatia 4,487,000 28,950 0.65
Lithuania 3,545,000 21,721 0.61
Finland 5,255,000 28,836 0.55
Hungary 9,992,000 51,684 0.52
Poland 38,464,000 162,643 0.42
Slovakia 5,470,000 22,588 0.41
Czech Republic 10,202,000 39,358 0.39
Macedonia 2,072,000 3847 0.19
Bosnia and Herz. 4,622,000 8,436 0.18
Serbia 7,345,000 12,369 0.17
Montenegro 667,000 1,101 0.17
Albania 2,987,000 3,300 0.11
Moldova 3,732,000 2,134 0.06
Russia 139,390,000 62,932 0.05
Belarus 9,613,000 2,643 0.03
Ukraine 45,416,000 13,002 0.03

Row template

Regardless of whether wikitable format or HTML is used, the wikitext of the rows within a table, and sometimes even within a collection of tables, may have much in common, e.g.:

  • the basic code for a table row
  • code for color, alignment, and sorting mode
  • fixed texts such as units
  • special formats for sorting

In such a case, it can be useful to create a template that produces the syntax for a table row, with the data as parameters. This can have many advantages:

  • easily changing the order of columns, or removing a column
  • easily adding a new column if many elements of the new column are left blank (if the column is inserted and the existing fields are unnamed, use a named parameter for the new field to avoid adding blank parameter values to many template calls)
  • computing fields from other fields, e.g. population density from population and area
  • duplicating content and providing span tags with display: none; for the purpose of having one format for sorting and another for display
  • easy specification of a format for a whole column, such as color and alignment

Example:

Using m:Help:Table/example row template (talk, backlinks, edit)

Wiki source

{| class="wikitable sortable"
|-
! scope=col | a
! scope=col | b
! scope=col | a/b
{{Help:Table/example row template|  50|200}}
{{Help:Table/example row template|   8| 11}}
{{Help:Table/example row template|1000| 81}}
|}

Rendered result

a b a/b
50 200 0.25
8 11 0.72727272727273
1000 81 12.345679012346

Conditional table row

For a conditional row in a table, we can have:

Wiki source

{| class=wikitable
 {{ #if:1|{{!}}-
  ! scope=row {{!}} row one, column one
  {{!}}row one, column two}}
 {{ #if: |{{!}}-
  ! scope=row {{!}} row two, column one
  {{!}}row two, column two}}
 |-
  ! scope=row {{!}} row three, column one
  | row three, column two
|}

Rendered result

row one, column one row one, column two
row three, column one row three, column two

With comments to explain how it works, where note how the second row is missing:

Wiki source

{| class=wikitable
 <!--
  Row one is shown because the '1' evaluates
  to TRUE.
 -->
 {{ #if:1|{{!}}-
  ! scope=row {{!}} row one, column one
  <!--
   Any {{!}}'s are evaluated to the pipe
   character '|' since the template '!' just
   contains '|'.
  -->
  {{!}}row one, column two}}
 <!--
  Row two is NOT shown because the space
  between the ':' and the '|' evaluates to FALSE.
 -->
 {{ #if: |{{!}}-
  ! scope=row {{!}} row two, column one
  {{!}}row two, column two}}
 <!--
  Row three is shown.
 -->
 |-
  ! scope=row {{!}} row three, column one
  | row three, column two
|}

Rendered result

row one, column one row one, column two
row three, column one row three, column two

Other table syntax

The types of table syntax that MediaWiki supports are:

  1. Wikicode  |  syntax
  2. HTML (and XHTML)
  3. Mixed XHTML and wikicode (Do not use)

All three are supported by MediaWiki and create (currently) valid HTML output, but the pipe syntax is the simplest. Mixed HTML and wikicode  |  syntax (i.e., unclosed  |  and |- tags) don't necessarily remain browser-supported in the future, especially on mobile devices.

See also HTML element#Tables. Note, however, that the thead, tbody, tfoot, colgroup, and col elements are currently not supported in MediaWiki, as of July 2015.

Comparison of table syntax

XHTML Wiki-pipe
Table <table>...</table> {|
...
|}
Caption <caption>caption</caption> |+ caption
Header cell <th scope="col">column header</th>

<th scope="row">row header</th>

! scope="col" | column header

! scope="row" | row header

Row <tr>...</tr> |-
Data cell <td>cell1</td><td>cell2</td>
<td>cell3</td>
| cell1 || cell2 || cell3

or
| cell1
| cell2
| cell3

Cell attribute <td style="font-size: 87%;">cell1</td> | style="font-size: 87%;" | cell1
Sample table
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
{|
| 1 || 2
|-
| 3 || 4
|}
1 2
3 4
Pros
  • Can preview or debug with any XHTML editor
  • Can be indented for easier reading
  • Well-known
  • Insensitive to newlines
  • No characters like "|", which can collide with template and parser function syntax
  • Easy to write
  • Easy to read
  • Takes little space
  • Can be learned quickly
Cons
  • Tedious
  • Takes a lot of space
  • Difficult to read quickly
  • Debugging more difficult because of tag pairing requirements
  • Indented code might not match nesting.
  • Confusing newline behaviour as they only occasionally break cells.
  • Unfamiliar syntax for experienced HTML editors
  • Rigid structure
  • Cannot be indented for clarity
  • HTML tag text may be easier to read than pipes, plus signs, dashes, etc.
  • Requires using {{!}} to pass a  |  character in a parameter.
  • Sensitive to newlines; see Help:Newlines and spaces.

Pipe syntax in terms of the HTML produced

The pipe syntax, developed by Magnus Manske, substitutes pipes ( | ) and other symbols for HTML. There is an online script, which converts HTML tables to pipe-syntax tables.

The pipes must start at the beginning of a new line, except when separating parameters from content or when using || to separate cells on a single line. The parameters are optional.

Tables

A table is defined by {| parameters |}, which generates <table params>...</table>.

Rows

For each table, an HTML <tr> tag is generated for the first row. To start a new row, use:

|-

which generates another <tr>.

Parameters can be added like this:

|- params

which generates <tr params>.

Note:

  • <tr> tags are automatically opened before the first <td> equivalent
  • <tr> tags are automatically closed at another <tr> equivalent and at the </table> equivalent

Cells

Cells are generated either like this:

|cell1
|cell2
|cell3

or like this:

|cell1||cell2||cell3

which both generate:

<td>cell1</td><td>cell2</td><td>cell3</td>.

The || equals a newline +  | .

Parameters in cells can be used like this:

|params|cell1||params|cell2||params|cell3

which results in:

<td params>cell1</td>
<td params>cell2</td>
<td params>cell3</td>

Headers

The code used produces a <th>...</th>, functioning the same way as <td>...</td>, but with different style and semantic meaning. A  !  character is used instead of the opening  | , and !! can be used like ||, to enter multiple headers on the same line. Parameters still use "|", though. Example:

!params|cell1

Captions

A <caption> tag is created by |+caption which generates the HTML <caption>caption</caption>.

You can also use parameters: |+params|caption which generates <caption params>caption</caption>.

Table cell templates

{{Table cell templates}} provide a set of templates to configure text and color in cells in a standard way, producing stock output such as "Yes", "No", and "n/a", on coloured backgrounds.

Vertically oriented column headers

Sometimes it is desirable (such as in a table predominantly made of numbers) to rotate text such that it proceeds from top to bottom or bottom to top instead of from left to right or right to left. Formerly, browser support for this type of styling as a component of HTML or CSS was sporadic (Internet Explorer was one of the few browsers that supports this in cascading stylesheets, albeit in a non-standard way).

Enclose the text of each heading in a {{vertical header}} template. For example:

! {{vertical header|Date/Page}}

If the text includes an equals sign then replace it with {{=}}.

Rotated column headers using {{vertical header}}
Date/Page
05/08 4266 7828 7282 1105 224 161 916 506 231
04/08 4127 6190 6487 1139 241 205 1165 478 301

An alternative solution that works in most if not all browsers is to use images in place of the text. For instance, the following table uses SVG images instead of text to produce the rotated column headers:

Rotated column headers using images
Date/Page VG: Project VG: Talk VG: Portal VG: Article guidelines VG: Templates VG: Sources VG: Assessment VG: Cleanup VG Requests
05/08 4266 7828 7282 1105 224 161 916 506 231
04/08 4127 6190 6487 1139 241 205 1165 478 301

Normally, one problem with this approach is that readers are directed to different pages when they click on the images. To eliminate this problem—or to direct readers to a different page—you can use the |link= parameter of the File: specification. A column header can be coded as follows:

! [[File:wpvg vg project.svg |alt=VG: Project |link='''Wikipedia:WikiProject Video games''']]

The image wikilinks to the page Wikipedia:WikiProject Video games.

By setting the link to an empty string (e.g. [[File:wpvg hd date page.svg |link=]]), no navigation occurs when visitors click on an image. Note that it might also be a good idea to color the image text blue if you are using the images as links. Also, SVG is the preferred image format in this case because it can be re-scaled to any size while producing fewer artifacts.

A more serious potential problem is that the "rotated text" is not text that can be used by screen readers and other technologies for visually disabled users. So those users wouldn't be able to "read" the column headers. Also, automated search engine Web crawlers would not be able to read it either. This is solved by always using the |alt= parameter in the File: specification of each image to provide the same text as in the rotated image; see |alt=VG: Project in the example above.

Wikitable as image gallery

A wikitable can be used to display side-by-side images, in the manner similar to that of an image gallery (formatted by <gallery>...</gallery>), but with larger images and less vacant area around photos.

A simple, framed gallery can be formatted using class="wikitable" to generate the minimal thin lines around images within the table:

 {| class="wikitable"
 |-
 |<!--col1-->[[File:Worms 01.jpg|130px]]
 |<!--col2-->[[File:Worms Wappen 2005-05-27.jpg|125px]]
 |<!--col3-->[[File:Liberty-statue-with-manhattan.jpg|125px]]
 |<!--col4-->[[File:New-York-Jan2005.jpg|125px]]
 |-
 |<!--col1-->Nibelungen Bridge to Worms
 |<!--col2-->Worms and its sister cities
 |<!--col3-->Statue of Liberty
 |<!--col4-->New York City
 |}<!--end wikitable-->
Worms 01.jpg Worms Wappen 2005-05-27.jpg Liberty-statue-with-manhattan.jpg New-York-Jan2005.jpg
Nibelungen Bridge to Worms Worms and its sister cities Statue of Liberty New York City

An advantage of wikitable image galleries, compared to <gallery> formatting, is the ability to "square" each image when similar heights are needed, so consider putting two-number image sizes (such as 199x95px), where the second number limits height:

 {| class="wikitable"
 |<!--col1-->[[File:Worms 01.jpg|199x95px]]
 |<!--col2-->[[File:Worms Wappen 2005-05-27.jpg|199x95px]]
 |<!--col3-->[[File:Liberty-statue-with-manhattan.jpg|199x95px]]
 |<!--col4-->[[File:New-York-Jan2005.jpg|100x95px]]<!--smaller-->
 |-
 |<!--col1-->Nibelungen Bridge to Worms
 |<!--col2-->Worms and its sister cities
 |<!--col3-->Statue of Liberty
 |<!--col4-->New York City
 |}

Note the three images sized 199x95px appear identical height, of 95px (the fourth image purposely smaller). The "95px" forces height, while 199x fits the various widths (it could even be 999x):

Worms 01.jpg Worms Wappen 2005-05-27.jpg Liberty-statue-with-manhattan.jpg New-York-Jan2005.jpg
Nibelungen Bridge to Worms Worms and its sister cities Statue of Liberty New York City

Therefore, the use of size 199x95px (or 999x95px, or whatever) produces the auto-height-sizing beyond the <gallery> tag, and with the option to set taller thumbnails (199x105px), or even to have some images purposely smaller than other images of 95px height. A very short height (e.g. 70px) allows many more images across the table:

 {| class="wikitable"
 |-
 |<!--col1-->[[File:Worms 01.jpg|199x70px]]
 |<!--col2-->[[File:Gold star on blue.gif|199x70px]]
 |<!--col3-->[[File:Worms Wappen 2005-05-27.jpg|199x70px]]
 |<!--col4-->[[File:Gold star on deep red.gif|199x70px]]
 |<!--col5-->[[File:Liberty-statue-with-manhattan.jpg|199x70px]]
 |<!--col6-->[[File:Gold star on blue.gif|199x70px]]
 |<!--col7-->[[File:New-York-Jan2005.jpg|199x70px]]<!--same height-->
 |-
 |}

The above wikitable-coding produces the result below, of 7 columns:

Worms 01.jpg Gold star on blue.gif Worms Wappen 2005-05-27.jpg Gold star on deep red.gif Liberty-statue-with-manhattan.jpg Gold star on blue.gif New-York-Jan2005.jpg

Once images have been placed in a wikitable, control of formatting can be adjusted when more images are added.

Shifting/centering

Images within a wikitable can be shifted by inserting non-breaking spaces (&nbsp;) before or after the image code (e.g., &nbsp;[[Image:...]]). However, auto-centering simply requires use of the |center parameter (see WP:Extended image syntax#Location).

In the example below, note how Col2 uses |center, but Col3 uses &nbsp;:

 {| class="wikitable"
 |-
 |<!--Col1-->[[File:Domtoren vanaf Brigittenstraat.jpg|299x125px]]
 |<!--Col2-->[[File:Utrecht 003.jpg|299x125px|center]]
 |<!--Col3-->&nbsp;[[File:Uitzicht--Domtoren.jpg|299x125px]]&nbsp;
 |-
 |<!--Col1-->Dom tower from Brigittenstraat
 |<!--Col2-->Cloister garth of the Utrecht Dom Church
 |<!--Col3-->&nbsp;&nbsp;<small>View from bell tower</small>
 |}

The above coding generates the table below: note the middle garden image is centered (but not the left image), and the right image has 2 spaces before "View...", to give an approximation of centering:

Domtoren vanaf Brigittenstraat.jpg
Utrecht 003.jpg
 Uitzicht vanaf de Domtoren.jpg 
Dom tower from Brigittenstraat Cloister garth of the Utrecht Dom Church   View from bell tower

Also note that the tag <small>...</small> made a smaller-text-size caption. Fonts also can be sized by percent (style="font-size: 87%;"), where the exact percent-size as displayed depends on the various sizes allowed for a particular font; the browser will approximate to the nearest possible size.

 | style="font-size: 87%;" | View from bell tower

The column attribute, above, uses style= to set the font size for the caption, following the second pipe symbol.

A font-size: 65%; is excessively small, while font-size: 87%; is a mid-size font, slightly larger than that produced by the tag <small>.

Indenting tables

While tables should not normally be indented, when their surrounding paragraphs are also indented, you can indent tables using one or more colons (":", the normal indent code) at the beginning of a line, the same way you'd indent any other wiki content.

Note that indentation applied to only the first line of the table definition (the line that begins with "{|") is sufficient to indent the entire table. Do not attempt to use colons for indentation anywhere within the rest of the table code (not even at the beginning of a line), as that will prevent the MediaWiki software from correctly reading the code for the table.

Wiki source

:{| class=wikitable
|-
! Header 1
! Header 2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}

Rendered result

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

The same table without indentation would be like this:

Wiki source

{| class=wikitable
|-
! Header 1
! Header 2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}

Rendered result

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Adding flags and linking country names in country lists

This is fast. It works with compact or long table wikitext. Single or double bars between cells.
Note: User:PrimeHunter (Talk) provided the code. Ask him for help.
Note: In editing preferences check the box: "enable the editing toolbar. This is sometimes called the '2010 wikitext editor'."

Make sure the countries, states, provinces, or cities, etc. are in the first column. The regular expression wraps all the text in the first cell of each row with the {{flaglist}} template. {{flaglist|Country name}} So do this before adding any styling to the first column.

Click on the wikitext source editing link. Click on "Advanced" in the editing toolbar. Then click on the search and replace icon on the right. Put a check in the box called "Treat search string as a regular expression." Fill in the "Search for" box with:

(\|-.*\n\|\s*)([^\|\n]*)

Fill in the "replace with" box with:

$1{{flaglist|$2}}

Then click "Replace all". Nearly all countries will be linked and will have flags.

For the red links create redirects as necessary to the correct country data templates. Save this initial table permanently in a user sandbox without overwriting it. This is so that the redirects are kept due to being in use on that sandbox page. Otherwise, admins will delete unused redirects, and you will have to do this tedious, time-consuming redirect task every time you fully update the table. In the edit summary of such redirects, add something like this: "Please do not delete this redirect. It is sometimes used in updates of [[NAME OF ARTICLE WITH TABLE]]."

Adding links to specialized country, state, or territory articles

For example:

Once you have a table with {{flaglist}} or other flag template it is easy to convert the links to specialized links. So instead of Oklahoma you would have Incarceration in Oklahoma, or if that article does not exist, then Crime in Oklahoma.

Use a global find-and-replace as previously described, but without regular expressions. Replace:

{{flaglist

with

{{flagg|us*eft|pref=Incarceration in|pref2=Crime in

The {{flagg}} template looks for the articles. If it finds one of the two choices it adds the link and an asterisk after the state, country, territory, or other subnational area name. If it does not find either article, it just adds the standard link.

Substitute your preferred topics in the pref= and pref2= spots.

This particular use of {{flagg}} parameters is expensive and can only be used on a few hundred links per article. Every time the article is saved it occurs, even for null edits. So only one big country table per article. Other country tables in the same article should use standard links.

In List of countries by incarceration rate the {{flagg}} template creates a link to Incarceration in United States. That link is a redirect to Incarceration in the United States. Add "the" as necessary to create redirect pages. Admins will delete redirects that are not linked from within Wikipedia. So if you need to create redirects be sure to use them right away in an article table. Or keep them in a sandbox that the admins can see until you use them in an article table. See examples. See list.

The use of {{flagg|us*eft is found with this global search within wikitext.

Add link brackets to text in each cell in a column

Note: User:PrimeHunter (Talk) provided the code. Ask him for help.
Note: In editing preferences check the box: "enable the editing toolbar. This is sometimes called the '2010 wikitext editor'."

List of countries by intentional homicide rate has a main table with a region column and a subregion column. Here below is a fast way to link the regions and subregions in those columns. For example, after updating the whole table from the source. See example in this sandbox.

The following assumes the syntax is a whole table row in one source line starting with a pipe and with double pipe between cells.

Click on the wikitext source editing link. Click on "Advanced" in the editing toolbar. Then click on the search and replace icon on the right. Put a check in the box called "Treat search string as a regular expression." Fill in the "Search for" box with:

^(\|(.*?\|\|){m} *)(.*?)( *\|\|| *\n)

Change "m" to the number of the column minus 1. 2nd column from the left would be "1". 3rd column from the left would be "2". The row number column created by Template:Static row numbers is not counted in these calculations. Fill in the "replace with" box with:

$1[[$3]]$4

Then click "Replace all". The "m" number may be different if a table uses rowspan or colspan.

If you then want to left align the region and subregion links do a simple find and replace. Replace the left brackets:

[[

with:

style=text-align:left|[[

Aligning text in header cells versus other cells

If there is no global text alignment set in the top line of the table wikitext, then all text is left aligned, except for header cells which are default center aligned.

Only in tables with class=wikitable does the header cell text not follow the global text alignment set in the top line of the table wikitext.

When using class=wikitable header text now stays centered in both desktop and mobile view unless specifically changed per header cell. This is true wherever the header row is located (top, bottom, middle). Global text alignment for non-header cells is done by putting style=text-align:VALUE in the top line of the table wikitext. See example in the next section.

Aligning the data in data columns to the right

Both tables below use class=wikitable The table to the right also aligns the text and data in all cells (except header cells) to the right.

Basic table
Header Header Header
Text data 12 data 12
Text data 123 data 123
Text data 1234 data 1234
style=text-align:right
Header Header Header
Text data 12 data 12
Text data 123 data 123
Text data 1234 data 1234

If most columns consist of data cells, then you might choose to align the data to the right. It is easy.
Just add style=text-align:right to the top line of the wikitext for the table:

{| class=wikitable style=text-align:right

or

{| class="wikitable sortable" style=text-align:right

and so on.

Aligning the text in the first column to the left

This can be done in the wikitext source editor. In editing preferences check the box labeled: "enable the editing toolbar. This is sometimes called the '2010 wikitext editor'."

In the table section click "edit source" (wikitext editing). Click on "Advanced" in the editing toolbar. Then click on the "search and replace" icon on the right. In the popup form check the box for "Treat search string as a regular expression".

Fill in the "Search for" box with (\|-\n\|)
Fill in the "replace with" box with

$1style=text-align:left|

Then click "Replace all". All the text in the first column will be aligned to the left of their cells.

If for some reason those cells are header cells, then fill in the "Search for" box with

(\|-\n\!)

Note the exclamation point for a header cell. Fill in the "replace with" box with

$1style=text-align:left|

Then click "Replace all".

Converting spreadsheets and database tables to wikitable format

See also the Visual Editor section farther down, and the spreadsheet info there.

To convert from spreadsheets (such as those produced by Gnumeric, Microsoft Excel, or LibreOffice/OpenOffice.org/StarOffice Calc), you can use the Copy & Paste Excel-to-Wiki converter, tab2wiki, or the MediaWiki Tables Generator.

You can save spreadsheets as .csv and use the CSV to Wikitable converter. Another version is here.

The CSV Converter converts comma-separated values (CSV) format to table wikitext or to HTML. See (documentation). You may use this to import tables from both spreadsheets and databases (such as MySQL, PostgreSQL, SQLite, FileMaker, Microsoft SQL Server & Access, Oracle, DB2, etc.).

Converting rows to columns and columns to rows

Sometimes there is a need to transpose columns and rows (move rows to columns, and columns to rows). For simple tables, this can be done via the "transpose rows and columns" function of Copy & Paste Excel-to-Wiki, or via the "transpose" feature of a third-party spreadsheet program such as Microsoft Excel, the free web-based Google Sheets, or the free downloadable software LibreOffice Calc.

To transpose the table with a third-party spreadsheet program, copy the published table on the Wikipedia page and paste it into a new blank document in your spreadsheet program. While the pasted cells are still selected in the spreadsheet, copy them again by by right-clicking and choosing "Copy" from the context menu. Open a new blank spreadsheet spreadsheet, click in the upper-left cell, right click on it, and choose "Paste Special". In Microsoft Excel, check the "Transpose" box at the bottom of the dialogue and hit Okay. In Google Sheets, choose "Transposed" from the sub-menu. in LibreOffice Calc, choose "Transpose" from the sub-menu. Perform any required editing of the transposed table, and copy the new table directly from the spreadsheet program into visual editor, or into one of the wikitable converters previously mentioned, such as toolforge:excel2wiki or tab2wiki.

For more complicated operations, such as consolidating multiple rows with the same header into a single column, you can use the "pivot table" feature of an external spreadsheet program. For example; the data for the overdose rates table by state for United States drug overdose death rates and totals over time comes from a csv file and is converted to wikitable format via one of the previously mentioned csv converters, but the year headers in the left table below need to become the column headers in the right table (truncated).

Year State Rate
2019 AL 16.3
2019 AK 17.8
2019 AZ 26.8
2019 AR 13.5
2019 CA 15
2019 CO 18
2019 CT 34.7
2019 DE 48
2019 FL 25.5
2019 GA 13.1
2019 HI 15.9
2019 ID 15.1
2019 IL 21.9
2019 IN 26.6
2019 IA 11.5
2019 KS 14.3
2019 KY 32.5
2019 LA 28.3
2019 ME 29.9
2019 MD 38.2
2019 MA 32.1
2019 MI 24.4
2019 MN 14.2
2019 MS 13.6
2019 MO 26.9
2019 MT 14.1
2019 NE 8.7
2019 NV 20.1
2019 NH 32
2019 NJ 31.7
2019 NM 30.2
2019 NY 18.2
2019 NC 22.3
2019 ND 11.4
2019 OH 38.3
2019 OK 16.7
2019 OR 14
2019 PA 35.6
2019 RI 29.5
2019 SC 22.7
2019 SD 10.5
2019 TN 31.2
2019 TX 10.8
2019 UT 18.9
2019 VT 23.8
2019 VA 18.3
2019 WA 15.8
2019 WV 52.8
2019 WI 21.1
2019 WY 14.1
2018 AL 16.6
2018 AK 14.6
2018 AZ 23.8
2018 AR 15.7
2018 CA 12.8
2018 CO 16.8
2018 CT 30.7
2018 DE 43.8
2018 FL 22.8
2018 GA 13.2
2018 HI 14.3
2018 ID 14.6
2018 IL 21.3
2018 IN 25.6
2018 IA 9.6
2018 KS 12.4
2018 KY 30.9
2018 LA 25.4
2018 ME 27.9
2018 MD 37.2
2018 MA 32.8
2018 MI 26.6
2018 MN 11.5
2018 MS 10.8
2018 MO 27.5
2018 MT 12.2
2018 NE 7.4
2018 NV 21.2
2018 NH 35.8
2018 NJ 33.1
2018 NM 26.7
2018 NY 18.4
2018 NC 22.4
2018 ND 10.2
2018 OH 35.9
2018 OK 18.4
2018 OR 12.6
2018 PA 36.1
2018 RI 30.1
2018 SC 22.6
2018 SD 6.9
2018 TN 27.5
2018 TX 10.4
2018 UT 21.2
2018 VT 26.6
2018 VA 17.1
2018 WA 14.8
2018 WV 51.5
2018 WI 19.2
2018 WY 11.1
2017 AL 18
2017 AK 20.2
2017 AZ 22.2
2017 AR 15.5
2017 CA 11.7
2017 CO 17.6
2017 CT 30.9
2017 DE 37
2017 FL 25.1
2017 GA 14.7
2017 HI 13.8
2017 ID 14.4
2017 IL 21.6
2017 IN 29.4
2017 IA 11.5
2017 KS 11.8
2017 KY 37.2
2017 LA 24.5
2017 ME 34.4
2017 MD 36.3
2017 MA 31.8
2017 MI 27.8
2017 MN 13.3
2017 MS 12.2
2017 MO 23.4
2017 MT 11.7
2017 NE 8.1
2017 NV 21.6
2017 NH 37
2017 NJ 30
2017 NM 24.8
2017 NY 19.4
2017 NC 24.1
2017 ND 9.2
2017 OH 46.3
2017 OK 20.1
2017 OR 12.4
2017 PA 44.3
2017 RI 31
2017 SC 20.5
2017 SD 8.5
2017 TN 26.6
2017 TX 10.5
2017 UT 22.3
2017 VT 23.2
2017 VA 17.9
2017 WA 15.2
2017 WV 57.8
2017 WI 21.2
2017 WY 12.2
State 2017 2018 2019
AL 18 16.6 16.3
AK 20.2 14.6 17.8
AZ 22.2 23.8 26.8

To re-arrange the table using pivot tables, copy and paste the published Wikitable into a spreadsheet program such as freeware LibreOffice Calc.

In LibreOffice Calc, select a data cell. Then click on the "Pivot Table" command from the Insert menu. Click OK in the popup box. In the next dialog box drag "Year" to the "Column Fields" box, and drag "State" to the "Row Fields" box. Drag "Rate" to the "Data Fields" box. Click OK. The table will convert to the new format with the years as column headers. It is easier to do than to describe. For help see: LibreOffice: Pivot Tables and LibreOffice Help: Pivot Table.

If further editing is required, first copy and paste that table to a new Calc spreadsheet, to prevent complications with the existing interactive pivot table. When done editing, copy the new table (if small) directly from the Calc page into visual editor, or into one of the wikitable converters previously mentioned, such as Copy & Paste Excel-to-Wiki or tab2wiki. Then use VE to delete the summation column and row.

List of countries by intentional homicide rate has a country table that uses a source with multiple years. But the table only shows data for the latest available year for each country. Some more complex transposing needs to be done with the source spreadsheet. To do it quickly see these threads:

Picking selected dates from massive .csv files

COVID-19 pandemic deaths has a few tables by year of cumulative deaths by country on the first of each month. The source is a massive WHO (World Health Organization) csv file. Download here. You could convert it to a massive wikitable as described elsewhere, and delete the hundreds of unwanted date columns over several hours.

Or you could open the csv file in a spreadsheet such as freeware LibreOffice Calc. Then delete all columns except for "Country", "Date reported", and "Cumulative deaths" columns (select, right-click, delete). Save as .ods file. Then use the autofilter function to select just the dates of interest from a checklist. Click anywhere in the table. Then: Data menu > AutoFilter. Dropdown menus will show up on all column heads. In the "Date reported" dropdown menu clear the "All" box by clicking it. This unchecks all the dates. Then check the dates you want. In this case all the first of the month dates for the desired year. Click OK. Save the file. See video. See: "Applying AutoFilter" in Calc help.

In order to completely remove all the unwanted data you must copy and paste that table to a new Calc ods file. A simple paste works (edit menu > paste). This greatly reduces the file size. See: "Only Copy Visible Cells" in Calc help.

On this smaller file use the "Pivot Table" method described in the previous section to put the dates as column heads. Select a data cell. Then click on the "Pivot Table" command from the Insert menu. Click OK in the popup box. In the next dialog box drag "Date reported" to the "Column Fields" box, and drag "Country" to the "Row Fields" box. Drag "Cumulative deaths" to the "Data Fields" box. Click OK. Copy and paste that table to a new Calc ods file to prevent Pivot complications, and to do further editing.

Add thousands separator as needed as described in another section. Sort latest month. Save it. Then copy that Calc table to tab2wiki, or to the VisualEditor (if small).

This method can be used for creating or updating many Wikipedia country tables that need only the latest data, or selected dates, from large multi-year data file sources. Just scrolling back and forth through one huge data file could take hours otherwise.

Automated tables updated daily by bots

Note: Contact User:Tol (talk) for help with automated tables.

Some automated tables:

The next 2 templates are the same, except one is scrolling and one is not.

Tables and the Visual Editor (VE)

See also: mw: Help:VisualEditor/User guide#Editing tables. And: Help:Introduction to tables with VisualEditor. And: Commons:Convert tables and charts to wiki code or image files.

See Phab: T108245: "Fully support basic table editing in the visual editor". See the list of tasks. Finished tasks are struck. It can be difficult to figure out from the technical language there what exactly has been improved, or what features have been added. Please add explanatory info below.

Sandboxes help a lot. For example; your user page: Special:MyPage. Create and bookmark some personal sandboxes too. Visual Editor will load very fast in empty sandboxes: Special:MyPage/Sandbox, Special:MyPage/Sandbox2, Special:MyPage/Sandbox3. As many as you want. Share the link when asking for help. To find all your sandboxes: Special:PrefixIndex/User: – click link, add user name to the spot labeled "Display pages with prefix:".

Insert blank row or column

Click on a column or row header. Then click on the arrow. From the popup menu click on "Insert".

Move or delete columns and rows

In VE click on a column or row header. Then click on the arrow. From the popup menu click on "Move" or "Delete". In freeware LibreOffice Calc select the column or row. Then click and hold the Alt key. Then drag the column or row where you want it. You can drag from anywhere in the row or column except for the row number or column letter.

Copy column from one table to another

This is useful for many things. For example; for quickly updating country lists, or adding/updating a rank column. See Help:Sorting about rank columns and row numbers. See also: Commons:Convert tables and charts to wiki code or image files. See the section on updating List of countries by incarceration rate.

Launch the Visual Editor. In the column you are copying click the header cell or whatever top cell you want. Then shift-click a cell farther down or at the end of the column. This will select the column down to that cell. Then click "copy" from the edit menu of your browser. In some browsers you can do this from the popup context menu. Then click any blank spot on the page to deselect the column.

Go to the column you want to replace or fill in (in this table or another one). Be sure visual editor has been launched. If you are copying the whole column including the header cell select just the header cell for that column by clicking on it. Then click "paste" from the edit menu of your browser. You can paste into a blank column the same way. Just select the header cell. Then from your browser: edit menu > paste.

Or you can select part of a column and paste into it. For example; if you don't want to replace the header cell.

All of the above will sometimes work when copying to or from a column in a spreadsheet (such as freeware LibreOffice Calc). If there is a problem, then paste that spreadsheet column into tab2wiki first, and copy the wikitext.

After combining the columns into one table, you may notice that VE created a mishmash of compressed and uncompressed wikitext. If this is a problem, it can be fixed by pasting the table into tab2wiki.

Note: The Visual Editor will copy templates (as in a column of country/state/province names with flag templates), but it will not copy inline styling such as styling used to left align those names. That can be added back all at once in any text editor. For example; if the flag template is the only template in the table, then replace {{ with style=text-align:left|{{

Copy or delete multiple rows

Click on the top corner cell of the area you want to select. Then shift-click on the opposite top corner cell in the same row. Then go straight down and shift-click on the bottom corner cell on the same side of the area you want to select. You will now have a rectangle or square selected of the table.

Click on "copy" or "cut" as needed from the edit menu of your browser. "Delete" will not work for multiple rows and columns.

Click on the top left corner cell of the area you want to paste into in a table. Then click "paste" from the edit menu of your browser. It can take from a few seconds to up to a minute for very large areas. You might want to do this work in a sandbox first. Then save and edit further before putting anything in an article.

"Cut" will empty the selected cells. It does not delete them. Once empty though it is very easy to delete all the empty cells, rows, and columns in the source editor. Switch over to it by clicking the arrow at the top right of the editing window.

It may be even faster to use the Visual Editor to copy the parts you want from the table into a new blank table.

Copy table from web page to Visual Editor

It is now possible to copy and paste some tables from a web page directly into the Visual Editor (VE). Not all tables work. Use an empty sandbox to do this most quickly. Save it, and edit further before pasting it into an article.

Select the table on the web page. Then click "copy" from the edit menu of your browser. In some browsers you can do this from the popup context menu. Launch visual editor on any page. Then paste the table into the page.

If that does not work, click on the insert menu, and then "table". It usually has the first header in the table selected. Then click on "paste" from the edit menu of your browser. It may take awhile for the table to show up. It can take 3 seconds, or up to a minute for very large tables.

Copy table from web to Excel2Wiki to wikitext editor to VE

For copying web page tables that can't be copied directly into the Visual Editor (as described in the previous section): Try copying the table into Excel2Wiki, or tab2wiki. Click "convert". Copy and paste the table wikitext into the wikitext editor. Save. Do further editing in VE.

Copy list (not in table) to Excel2Wiki to wikitext editor to VE

Paste any list (text and/or numbers) into Excel2Wiki. Click "convert". Copy and paste the table wikitext into the wikitext editor. Save. Do further editing in VE. For example; add more columns, or copy the column and paste it into other tables. Before pasting a list into Excel2Wiki you may want to remove a block of text. Some text editors can do this when text is set to a fixed-width font such as Courier New. For example; freeware NoteTab Light: Modify menu > Block > Cut. Fill in popup form with starting column, block width, block rows. Click OK and that rectangle of text is removed. This saves a lot of time.

Sort alphabetically or numerically with free spreadsheet and VE

Note: For more info see Help:Sorting. See the section on putting a table in initial alphabetical order.

Many things can be done in spreadsheet programs that can not be done in the visual editor. Select and copy a table right off of a page (do not go into the wikitext or the HTML). Paste the table into a spreadsheet program such as freeware LibreOffice Calc (see free guide), or another spreadsheet program. See List of spreadsheet software.

In Calc click on any cell in the column you want sorted, and then click on one of the sort options in the data menu at the top of the Calc window. Click on "ascending" or "descending" to sort alphabetically or numerically depending on the column contents. Click on "sort" for more options.

To move the header row(s) back up to the top: Select the entire row(s). To select the entire row(s) click on the Calc numbered columns located on the far left of any sheet. Press and hold ALT key. Left click and hold any cell within that section (row numbers won't work). Using the mouse drag and drop the source row(s) to its destination. Release the mouse button.

To avoid this problem when doing an alphabetical sort, select all of the table except the header rows. To do so with multiple columns click the top left non-column-header cell, and then shift-click the bottom right cell. When you click on "ascending" or "descending" in the data menu the table will be sorted alphabetically. That is the default.

Paste that sorted table (or just the selected columns of interest) into a new table in Visual Editor. Copy directly from the spreadsheet, and then paste directly into a new Visual Editor table where the first header cell has been selected. It may take up to a minute. If there is a problem, then paste into tab2wiki first, and copy the wikitext.

Copy table from PDF to Visual Editor

Upload PDF to free online PDF-to-Excel site. For example; here. Download the Excel file. Open it in freeware LibreOffice Calc or another spreadsheet program. If you just want one table from a long Excel page, you can select that table from the Calc page. Then copy the table to a new page in Calc.

Edit and move columns and rows in Calc. To drag a column first select it by clicking its header number. Then press and hold the ALT key. Then click a data cell, and drag the column to a new location. Or right click and delete the selected column (no need for ALT key). Rows are similarly moved (with the ALT key pressed), or deleted. Sort as described in the previous section.

Copy the table to a wiki sandbox. In Calc select the table. Copy directly from it, and then paste into a new Visual Editor table where the first header cell has been selected. It may take up to a minute. If there is a problem, then paste into tab2wiki first, and copy the wikitext.

Add commas or periods to separate every third digit in numbers

Countries use commas, periods, and spaces to separate every third digit in numbers. See: Thousands separator.

To replace spaces with commas or periods, paste the list, row, or column into a text editor (Notepad for example). Use replace (from edit menu in Notepad). See previous sections to learn how to copy that corrected list into a table.

If you are already in a spreadsheet use find-and-replace after selecting the column or row in question.

If there is no separator between every third digit, then paste the list, row, or column into a spreadsheet (LibreOffice Calc for example). To do that click the first column head in the blank spreadsheet. This will select that column. Then click paste from the edit menu of Calc. From the popup box click "fixed width". Uncheck everything else. Click OK. This will paste it into the first column. In Calc save it in the default .ods format. This will allow the next step.

If there are multiple columns select the top left data cell (not the header cell or this will not work). Then Shift-click on the bottom right data cell. This will select all the data cells. Don't select any text or date cells. Or deselect just the text or date cells by ctrl-click.

Click "number format" from the format menu. Then click "thousands separator" from the submenu. This will add commas or periods depending on the default language you have selected in Calc for the locale setting. (tools menu > options > language settings > languages > formats > locale settings). For example; with English you might select USA, UK, South Africa, or one of the many other English speaking countries that are listed for English. Copy that column to a Wikipedia table via VE.

Consider also a parser function {{Formatnum}} and template {{Formatnum}} (see Help:Magic words § Formatting), and familiarizing yourself with Wikipedia:Manual of Style/Dates and numbers.

Round off numbers (usually to zero decimal places)

Most of the time, especially with dollars and cents, the data is more useful to readers when rounded off to no decimal places.

It is easy to do in a spreadsheet. For example; in LibreOffice Calc select the column by clicking the very top of its column. Then go to the Format menu > Cells. A popup will show up. Click the "Number" category. Choose the number of decimal places (zero if you don't want any decimal points). You can also choose from the example list.

That popup page is also where you choose a thousands separator or not. Choosing from the example list will also check or uncheck that box. When done copy that table or column to a Wikipedia table via VE. If there is a problem, then paste into tab2wiki first, and copy the wikitext.

Summing or averaging a list of numbers

Launch VE. In a table select a column, or part of a column of numbers. To do so click the top cell you want. Then shift-click a cell farther down or at the end of the column. This will select the column down to that cell.

Upon selection you will immediately see a popup box with a sum total of the selected cells, and an average.

See also

Templates

Notes

  1. ^ border: none; avoids an unsightly empty column in tables narrower than the browser window on Android Chrome.
  2. ^ In style="padding: 3em 4em 5%;", the value 4em is used for both the "left" padding and the "right" padding, so the order going clockwise is: top (3em) → right [and hence also left] (4em) → bottom (5%); there is no "→ left" in this case because the "left" padding has already been defined. In style="padding: 3em 5%;", the value 3em is used for both the "top" and "bottom" padding while the value 5% is used for both the "left" and "right" padding, so the order going clockwise is: top [and hence also bottom] (3em) → right [and hence also left] (5%); there is no "→ bottom" nor is there "→ left" in this case because the "bottom" and "left" padding have already been defined. The same reasoning also applies to style="padding: 1em 20px 8% 9em;", and style="padding: 3%;".
  3. ^ A simplified version of Template:Table_of_phase_transitions


External links

Wikimedia sister projects