http://www.kotono8.com/pedia/w/index.php?title=%E3%83%98%E3%83%AB%E3%83%97:Tables/ja&feed=atom&action=history
ヘルプ:Tables/ja - 版の履歴
2024-03-28T22:37:45Z
このウィキのこのページに関する変更履歴
MediaWiki 1.34.1
http://www.kotono8.com/pedia/w/index.php?title=%E3%83%98%E3%83%AB%E3%83%97:Tables/ja&diff=1444&oldid=prev
松永英明: 1 版
2009-07-06T07:43:49Z
<p>1 版</p>
<p><b>新規ページ</b></p><div>{{PD Help Page/ja}}<br />
ウィキページに'''表'''(テーブル)を書くには、直接XHTMLのテーブル要素を使用するか、表記術用のウィキマークアップを使います。XHTMLのテーブル要素については多くのウェブサイトで解説されていますので、そちらを参照してください。ウィキマークアップを使う利点としては、XHTMLのテーブル要素よりもソースを簡潔に記述できることがあります。<br />
<br />
表を使うとソースが複雑になってしまいますので、表はどうしても必要な時に限って使用しましょう。<br />
<br />
== ウィキの表マークアップ概要 ==<br />
{|cellpadding="5" cellspacing="0" border="1" width="60%"<br />
|<br />
<nowiki>{|</nowiki><br />
| '''表の開始'''<br />
|-<br />
|<br />
<nowiki>|+</nowiki><br />
| 表の'''題(キャプション)''': ''省略可''。表の開始記号と最初の行の間でのみ有効<br />
|-<br />
|<br />
<nowiki>|-</nowiki><br />
| '''行の開始''': ''最初の行は省略可''(MediaWIkiが自動的に補完)。<br />
|-<br />
|<br />
<nowiki>!</nowiki> <br />
| '''見出し'''セル: ''省略可''。連続する見出しセルは、各セルを<code><nowiki>!!</nowiki></code> または <code><nowiki>||</nowiki></code> で区切って同一行に書くか、新規行に <code><nowiki>!</nowiki></code>に続けて書く。<br />
|- <br />
|<br />
<nowiki>|</nowiki><br />
| '''データ'''セル: ''必須!'' 連続するセルは、各セルを <code><nowiki>||</nowiki></code> で区切って同一行に書くか、新規行に <code><nowiki>|</nowiki></code>に続けて書く。<br />
|-<br />
|<br />
<nowiki>|}</nowiki><br />
| '''表の終了''' <br />
|}<br />
*上述の各マークアップは'''新しい行の冒頭に書く必要があります'''。ただしは連続するセルを同一行に書くための二重の<code>||</code>と<code>!!</code>は例外です。また新規行の冒頭にある半角空白は無視されます。<br />
*'''XHTML属性'''。各マークアップは、表の終了マークアップを除き、XHTML属性を与えることができます。属性はマークアップと同一行に書かなければなりません。各属性の間はシングルスペースで分離してください。<br />
**セルと題(<code>|</code> または <code>||</code>、 <code>!</code> または <code>!!</code>、 <code>|+</code>)は内容のある部分ですので、中身と属性を区別するためにパイプ記号(<code>|</code>)を使用します。セルの内容は属性と同じ行に書いても、次の行に書いても構いません。<br />
**表の開始と行の開始のマークアップ(<code>{|</code> と <code>|-</code>)はそれ自身の内容はない部分です。属性指定の後にパイプ記号(<code>|</code>)を'''加えないで'''ください。これらの開始記号のあとに加えられたパイプは、ページの生成時に直前の文字列とともに除去されるため、表が意図通り生成されなくなることがあります。<br />
*'''セルの内容'''は(ア)セル開始のマークアップと同一行に書く、(イ)マークアップの次以下の行に書く、のいずれも可能です。行の冒頭に使用しないと有効でないウィキマークアップ(リスト、見出し、入れ子にする表など)をセルの中に入れるためには、新しい行に書く必要があります。<br />
<br />
==基本==<br />
下記のテーブルには罫線がなく、間隔の取り方もよくありませんが、最も単純なウィキマークアップによる表を示しています。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{|<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
</pre><br />
|<br />
{|<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
|}<br />
<br />
表中の同一行のセルは、編集テキストの同一行に<code>||</code>で区切って記述できます。<br />
<br />
編集テキスト中の余分なスペースは表示結果に反映されません。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{|<br />
| みかん || りんご || その他<br />
|-<br />
| おにぎり || パン || その他<br />
|-<br />
| みそ || しょう油|| その他<br />
|}<br />
</pre><br />
|<br />
{|<br />
| みかん || りんご || その他<br />
|-<br />
| おにぎり || パン || その他<br />
|-<br />
| みそ || しょう油|| その他<br />
|}<br />
|}<br />
<br />
===見出しセル===<br />
<code>|</code>の代わりに "<code>!</code>" を使うと見出しセルになります。見出しはデフォルトではボールド体・中央揃えで表示されます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{|<br />
! 項目<br />
! 数量<br />
! 値段<br />
|-<br />
|みかん<br />
|10<br />
|700<br />
|-<br />
|おにぎり<br />
|4<br />
|300<br />
|-<br />
|みそ<br />
|1<br />
|500<br />
|-<br />
!合計<br />
|<br />
|1500<br />
|}<br />
</pre><br />
|<br />
{|<br />
! 項目<br />
! 数量<br />
! 値段<br />
|-<br />
|みかん<br />
|10<br />
|700<br />
|-<br />
|おにぎり<br />
|4<br />
|300<br />
|-<br />
|みそ<br />
|1<br />
|500<br />
|-<br />
!合計<br />
|<br />
|1500<br />
|}<br />
|}<br />
<br />
===表の題===<br />
'''表の題'''は次のように加えることができます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{|<br />
|+ 食べものリスト<br />
|-<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
</pre><br />
|<br />
{|<br />
|+ 食べものリスト<br />
|-<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
|}<br />
<br />
== XHTML属性 ==<br />
表にはXHTML属性を付加できます。XHTML属性についてもっとも信頼できる記述については、[http://www.w3.org/TR/REC-html40/struct/tables.html W3C の配布する HTML 4.01 仕様書の表の項目]を参照してください。<br />
<br />
=== 表全体の属性 ===<br />
表の開始マークアップ(<code>{|</code>)に続けて付加された属性は表全体に適用されます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|500.00<br />
|-<br />
|みそ<br />
|しょう油<br />
|1.00<br />
|}<br />
</pre><br />
|<br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|500.00<br />
|-<br />
|みそ<br />
|しょう油<br />
|1.00<br />
|}<br />
|}<br />
<br />
=== セルの属性 ===<br />
各'''セル'''にも属性を付加できます。例えば、数値は右寄せの方が見やすいかもしれません。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|align="right" | 12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|align="right" | 500.00<br />
|-<br />
|みそ<br />
|しょう油<br />
|align="right" | 1.00<br />
|}<br />
</pre><br />
|<br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|align="right"|12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|align="right"|500.00<br />
|-<br />
|みそ<br />
|しょう油<br />
|align="right"|1.00<br />
|}<br />
|}<br />
<br />
===行の属性===<br />
個々の'''行'''にも属性を設定することができます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre><br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|align="right"|12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|align="right"|500.00<br />
|- style="font-style:italic; color:green;"<br />
|みそ<br />
|しょう油<br />
|align="right"|1.00<br />
|}<br />
</pre><br />
|<br />
{| border="1"<br />
|みかん<br />
|りんご<br />
|align="right"|12,333.00<br />
|-<br />
|おにぎり<br />
|パン<br />
|align="right"|500.00<br />
|- style="font-style:italic; color:green;"<br />
|みそ<br />
|しょう油<br />
|align="right"|1.00<br />
|}<br />
|}<br />
<br />
===CSSスタイル===<br />
CSSスタイル属性を、他のHTML属性の有無にかかわらず加えることができます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre style="white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all;"><br />
{| style="color:green; background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
</pre><br />
|<br />
{| style="color:green; background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
|}<br />
<br />
表の題や見出しにも属性は追加できます。<br />
<br />
{| cellspacing="0" border="1"<br />
!style="width:50%"|入力内容<br />
!style="width:50%"|表示結果<br />
|-<br />
|<br />
<pre style="white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all;"><br />
{| border="1" cellpadding="20" cellspacing="0"<br />
|+ align="bottom" style="color:#e76700;" |''食べものリスト''<br />
|-<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
</pre><br />
|<br />
{| border="1" cellpadding="20" cellspacing="0"<br />
|+ align="bottom" style="color:#e76700;" |''食べものリスト''<br />
|-<br />
|みかん<br />
|りんご<br />
|-<br />
|おにぎり<br />
|パン<br />
|-<br />
|みそ<br />
|しょう油<br />
|}<br />
|}<br />
<br />
==注意事項==<br />
===負の値===<br />
新しい行の冒頭にマイナス記号を持つ負の数値(または負の数値を返す引数)があると、表が崩れてしまうことがあります。これは<code>|-</code>の記号が新しい表の列を開始するマークアップだからです。これを避けるためには、マイナス記号の前にスペースを挿入する(<code>| -6</code>)か、前のセルと同じ行に続けて <code>|| -6</code> のように記述してください。<br />
<br />
{{Languages}}<br />
[[Category:Help/ja|{{PAGENAME}}]]<br />
[[Category:Tables/ja]]</div>
松永英明