Help:表
- Tables はこのページに
転送 されています。MediaWiki のデータベース テーブルの構造 は、Manual:データベースのレイアウト を参照 してください 。
ウィキ ページでは
テーブルのウィキ文法 の概要
{| | |
|+ | |
|- | |
! | !! ) で! ) を |
| | || ) で| ) を |
|} |
上記 のマークは必 ず行頭 で指定 する必要 があり、例外 は縦 棒 2本 ||
と!!
を使 い、特定 の行 に選択 的 に連続 するセルを追加 する場合 です。しかしながら、行頭 の空 きスペース文字 は無視 されます。- HTML の
属性 。表 の終 わりの指定 以外 は、1以上 のHTML属性 を受 け入 れます。属性 とマークは同 じ行 に記述 します。属性 どうしの間 は半角 空 きスペースで区切 ります。- セルとキャプション (
|
もしくは||
、!
もしくは!!
、|+
) に内容 を書 き込 めます。 そこで、属性 と内容 の区切 り記号 は縦 棒 1本 を使 います (|
)。 セルの内容 は同 じ行 に続 くか、下方 の数 行 に続 くか、どちらの場合 もあります。 表 であることを示 す記号 、行 が変 わることを示 す記号 ({|
と|-
) には、内容 を直接 、表示 させることができません。選択 的 に加 えた属性 の後 に縦 棒 (パイプ記号 |
) を入 れては ダメ です。 テーブルマークや行 マークの属性 の後 に誤 ってパイプを追加 した場合 、パーサーはそのパイプと最終 的 な属性 を削除 してしまいます。
- セルとキャプション (
- Content may (a) follow its cell mark on the same line after any optional HTML attributes or (b) on lines below the cell mark.
Content that uses wiki markup that itself needs to start on a new line, such as lists, headings, or nested tables, must be on its own new line.
- Pipe character as content.
To insert a pipe (|
) character into a table, use the <nowiki>|</nowiki>
escaping markup.
基礎
Create a table with editor toolbar
In wikitext editor, place the caret where you want to insert a table.
Then, in the toolbar, press “
From the dialog, you can choose whether to enable a table header row, to stylize the table with border and to make the table sortable.
A preview example is displayed.
You can also set row and column counts you need. Then, press “
By default, the following code is generated:
Wikicode:
{| class="wikitable" style="margin:auto" |+ キャプション文 |- !見出 しテキスト !!見出 しテキスト !!見出 しテキスト |- | セル内 のテキスト || セル内 のテキスト || セル内 のテキスト |- | セル内 のテキスト || セル内 のテキスト || セル内 のテキスト |- | セル内 のテキスト || セル内 のテキスト || セル内 のテキスト |}
Result:
セル |
セル |
セル |
セル |
セル |
セル |
セル |
セル |
セル |
Minimal syntax
{| |オレンジ |りんご |- |パン |パイ |- |バター |アイスクリーム |} |
|
||
で<br />
を
{| |オレンジ||りんご||など |- |パン||パイ||など |- |バター||アイス<br />クリーム||そして<br />まだまだ |} |
|
{| | オレンジ || りんご || など |- | パン || パイ || など |- | バター || アイスクリーム || そしてまだまだ |} |
|
{| |Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | * Lorem ipsum dolor sit amet * consetetur sadipscing elitr * sed diam nonumy eirmod tempor invidunt |} |
|
表 のヘッダー
|
」(パイプ!
」(
{| ! style="text-align:left;"| |
|
キャプション
{| |+ |
|
class="wikitable"
class="wikitable"
を
{| class="wikitable" |+ |
|
HTML の colspan と rowspan
{| class="wikitable" !colspan="6"| |
|
HTML の属性
HTML
表 の属性
Placing attributes after the table start tag ({|
) applies attributes to the entire table.
{| class="wikitable" style="text-align: center; color: green;" |オレンジ |りんご |12,333.00 |- |パン |パイ |500.00 |- |バター |アイスクリーム |1.00 |} |
|
セルの属性
You can put attributes on individual cells.
{| class="wikitable" | オレンジ | りんご | style="text-align:right;" | 12,333.00 |- | パン | パイ | style="text-align:right;" | 500.00 |- | バター | アイスクリーム | style="text-align:right;" | 1.00 |} |
|
You can also use cell attributes when you are listing multiple cells on a single line.
Note that the cells are separated by ||
, and within each cell the attribute(s) and value are separated by |
.
{| class="wikitable" | オレンジ || りんご || style="text-align:right;" | 12,333.00 |- | パン || パイ || style="text-align:right;" | 500.00 |- | バター || アイスクリーム || style="text-align:right;" | 1.00 |} |
|
行 の属性
You can put attributes on individual rows, too.
{| class="wikitable" | オレンジ | りんご | style="text-align:right;"| 12,333.00 |- | パン | パイ | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | バター | アイスクリーム | style="text-align:right;"| 1.00 |} |
|
キャプションとヘッダーで属性 を表示
キャプションとヘッダーには、
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|'' |
|
ボーダー幅
If "border-width:" has only one number, it is for all four border sides:
{|style="border-style: solid; border-width: 20px" | こんにちは |} |
|
If "border-width:" has more than one number, the four numbers are for top, right, bottom, left (REMEMBER clockwise order ↑→↓←):
{|style="border-style: solid; border-width: 10px 20px 100px 0" | こんにちは |} |
|
- When there are fewer than 4 values :
- three values i.e.
top
,right
,bottom
: then the default value forleft
is the one ofright
(second value). Width is then the same on left and right side. - two values i.e.
top
,right
: then the default value forbottom
is the one oftop
(first value), andleft
by default is assigned the value ofright
(second value). Width on top is then the same as on bottom; width on left is the same as on right. - 1 つの
値 、すなわちtop
の場合 :right
の既定 値 はtop
のものとなり、bottom
とleft
も同 じです。4番目 の幅 は同 じで、通常 のボーダーを構築 します。これはライティングのショートカットです。
- three values i.e.
Another method to define the widths of the four sides of a cell is to use "border-left", "border-right", "border-top" and "border-bottom":
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | こんにちは |} |
|
The HTML attributes (such as "width=", "border=", "cellspacing=", "cellpadding=") do not need any length unit (the pixel unit is assumed).
また、HTML5では
"Cellpadding" is for setting the space between the cell wall and the cell content.
HTMLの属性 やCSSのスタイルを使 って
CSS style attributes can be added with or without other HTML attributes.
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |オレンジ |りんご |- |パン |パイ |- |バター |アイスクリーム |} |
|
Padding
It represents the internal margin between the contents and the border of the cell.
{|class=wikitable | style="padding: 10px" | style="padding:10px" の |
|
列 の幅
{| class="wikitable" style="width: 85%;" | colspan="2" | この列 の幅 は画面 幅 の85%になります |- | style="width: 30%"| '''この列 は画面 幅 の85%から30%カウントされます''' | style="width: 70%"| '''この列 は画面 幅 の85%から70%カウントされます''' |}
この | |
この |
この |
テーブルヘッダーセルのアクセシビリティ
However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:
{| class="wikitable" |- ! scope="col"| |
|
配置
表 の配置
テーブルの
For example, a right-aligned table:
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | オレンジ | りんご |- | パン | パイ |- | バター | アイスクリーム |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
And a center-aligned table:
{| class="wikitable" style="margin: auto;" | オレンジ | りんご |- | パン | パイ |- | バター | アイスクリーム |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
表 とテキストの回 り込 み
float
CSS attribute, which can specify where the table floats to the right side or to the left.
float パラメータを
{| class="wikitable" style="float:right; margin-left: 10px;" | オレンジ | りんご |- | パン | パイ |- | バター | アイスクリーム |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
セルの内容 の配置
セルのtext-align
と vertical-align
でtext-align
はvertical-align
は
{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |} |
|
注意
負 の数値
|-
が、| -6
)、またはインラインのセルのマークアップ (|| -6
) を
CSS と属性
列 、列 と行 それぞれの集合 によく使 われる値
<col />
)、<colgroup></colgroup>
)あるいは<thead></thead>
、<tbody></tbody>
、<tfoot></tfoot>
)のどれも
<tbody></tbody>
)
ビジュアルエディター (VE) と表 の操作
関連 項目 : Help:ビジュアルエディター/利用 者 ガイド
Phab: T108245: "Fully support basic table editing in the visual editor" をレは
列 や行 の移動 、削除
空白 の列 もしくはカラムの挿入
ウェブ上 の表 をビジュアルエディタにコピーする
ウェブサイト
Helping tools
- Excel2Wiki allows you to copy a spreadsheet from Excel, Apache OpenOffice, LibreOffice, or Gnumeric to convert it into wikicode table.
関連 項目
注記
- ↑
テーブルは、HTMLの
table
要素 を直接 使 っても、ウィキ文法 によっても作 ることができます。 HTMLのtable
要素 とその使 い方 については、様々 なウェブページでしっかりと説明 されているので、ここでは言及 しません。 ウィキコードを使用 する利点 は、ページの編集 ビューで見 たときに、文字 列 や記号 で記述 してあると表 要素 をHTMLで記述 するよりも、表 の構造 を比較的 理解 しやすいことです。 - ↑ HTML table cellpadding Attribute