「テーブルを作る」(2010/01/20 (水) 20:11:14) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
テーブルとは、いわゆる一覧表のことです。EXCELなどの表計算ソフトを利用したことのある方でしたら、すぐにピンと来ると思いますが、1行の中に一塊の関連付けられたデータが列挙され、それらが複数行ある、という構造のデータをまとめる際に利用されます。
***テーブル構造
HTMLでこのテーブルを記述するのは、結構大変ですが、Wikiではとても簡単に記述できます。書式は以下のとおり。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|項目1|データ1-1|データ1-2|<br>
|項目2|データ2-1|データ2-2|<br>
|項目3|データ3-1|データ3-2|<br>
</div>
}}}
【出力】
|項目1|データ1-1|データ1-2|
|項目2|データ2-1|データ2-2|
|項目3|データ3-1|データ3-2|
といった具合で、「&color(red){|}(ヴァーティカル・バー)」を升目の仕切りに見立てて、EXCELでいうところのセルのような表示を得ることが出来ます。
***見出しデータ
テーブルの利用法としては、名簿や集計データなどを記載することが多いのですが、そういったデータには、たいてい見出し行や見出しとなる項目があるものです。HTMLでもそのようなデータが入るセルは特別なタグをつけるのですが、Wikiでもそれを利用することが出来ます。
|~項目1|データ1-1|データ1-2|
|~項目2|データ2-1|データ2-2|
|~項目3|データ3-1|データ3-2|
左端の見出しデータだけが太字になっていることが分かると思います。この表示を得るには、Wikiでの記述は以下のようになります。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|~項目1|データ1-1|データ1-2|<br>
|~項目2|データ2-1|データ2-2|<br>
|~項目3|データ3-1|データ3-2|<br>
</div>
}}}
ご覧のとおり、見出しデータの入るセルの「&color(red){|}」が「&color(red){|~}」に変わるだけです。
***セルの結合
また、EXCELでいうところの「セルの結合」もできます。
|>|>|データ一覧|
|項目1|データ1-1|データ1-2|
|~|データ2-1|データ2-2|
|項目3|>|データ3-1|
横方向に結合させたいときには、左に位置するセルに「&color(red){>}(グレーターザン)」だけを記入すると、続くセルに結合されます。
また、縦方向に結合させたい場合は、下に位置するセルに「&color(red){~}(チルダ)」だけを記入すると、上のセルに結合されます。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|>|>|データ一覧|<br>
|項目1|データ1-1|データ1-2|<br>
|~|データ2-1|データ2-2|<br>
|項目3|>|データ3-1|<br>
</div>
}}}
ただ、残念なことに、まだ上記の「見出しデータ」との併用には対応していないようです。単に升目のきり方を制御できるだけ、という利用法に限定されそうです。
ちなみにHTMLで記述すると、細かい点が自由にレイアウトできます。
#html2(){{{
<div style="text-align:center">
<table style="width:300px;margin:auto">
<tr><th colspan="3" style="color:white;background:#333333;">データ一覧</th></tr>
<tr><th rowspan="3" style="color:white;background:#999999">見出し1</th><td>データ1</td><td>データ2</td></tr>
<tr><td>データ3</td><td>データ4</td></tr>
<tr><td>データ5</td><td>データ6</td></tr>
<tr><th style="color:white;background:#999999">見出し2</th><td colspan="2">データ7</td></tr>
</table>
}}}
ちなみにHTMLソースはこんな感じです。けっこう煩雑ですね。
<div style="text-align:center">
<table style="width:300px;margin:auto">
<tr>
<th colspan="3" style="color:white;background:#333333;">データ一覧</th>
</tr>
<tr>
<th rowspan="3" style="color:white;background:#999999">見出し1</th>
<td>データ1</td><td>データ2</td>
</tr>
<tr><td>データ3</td><td>データ4</td></tr>
<tr><td>データ5</td><td>データ6</td></tr>
<tr>
<th style="color:white;background:#999999">見出し2</th>
<td colspan="2">データ7</td>
</tr>
</table>
</div>
----
テーブルとは、いわゆる一覧表のことです。EXCELなどの表計算ソフトを利用したことのある方でしたら、すぐにピンと来ると思いますが、1行の中に一塊の関連付けられたデータが列挙され、それらが複数行ある、という構造のデータをまとめる際に利用されます。
***テーブル構造
HTMLでこのテーブルを記述するのは、結構大変ですが、Wikiではとても簡単に記述できます。書式は以下のとおり。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|項目1|データ1-1|データ1-2|<br>
|項目2|データ2-1|データ2-2|<br>
|項目3|データ3-1|データ3-2|<br>
</div>
}}}
【出力】
|項目1|データ1-1|データ1-2|
|項目2|データ2-1|データ2-2|
|項目3|データ3-1|データ3-2|
|氏名|性別|アドレス|
|くらもち|♂|阿見町|
といった具合で、「&color(red){|}(ヴァーティカル・バー)」を升目の仕切りに見立てて、EXCELでいうところのセルのような表示を得ることが出来ます。
***見出しデータ
テーブルの利用法としては、名簿や集計データなどを記載することが多いのですが、そういったデータには、たいてい見出し行や見出しとなる項目があるものです。HTMLでもそのようなデータが入るセルは特別なタグをつけるのですが、Wikiでもそれを利用することが出来ます。
|~項目1|データ1-1|データ1-2|
|~項目2|データ2-1|データ2-2|
|~項目3|データ3-1|データ3-2|
左端の見出しデータだけが太字になっていることが分かると思います。この表示を得るには、Wikiでの記述は以下のようになります。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|~項目1|データ1-1|データ1-2|<br>
|~項目2|データ2-1|データ2-2|<br>
|~項目3|データ3-1|データ3-2|<br>
</div>
}}}
ご覧のとおり、見出しデータの入るセルの「&color(red){|}」が「&color(red){|~}」に変わるだけです。
***セルの結合
また、EXCELでいうところの「セルの結合」もできます。
|>|>|データ一覧|
|項目1|データ1-1|データ1-2|
|~|データ2-1|データ2-2|
|項目3|>|データ3-1|
横方向に結合させたいときには、左に位置するセルに「&color(red){>}(グレーターザン)」だけを記入すると、続くセルに結合されます。
また、縦方向に結合させたい場合は、下に位置するセルに「&color(red){~}(チルダ)」だけを記入すると、上のセルに結合されます。
#html2(){{{
<div class="code">
【Wikiでの記述】<br>
|>|>|データ一覧|<br>
|項目1|データ1-1|データ1-2|<br>
|~|データ2-1|データ2-2|<br>
|項目3|>|データ3-1|<br>
</div>
}}}
ただ、残念なことに、まだ上記の「見出しデータ」との併用には対応していないようです。単に升目のきり方を制御できるだけ、という利用法に限定されそうです。
ちなみにHTMLで記述すると、細かい点が自由にレイアウトできます。
#html2(){{{
<div style="text-align:center">
<table style="width:300px;margin:auto">
<tr><th colspan="3" style="color:white;background:#333333;">データ一覧</th></tr>
<tr><th rowspan="3" style="color:white;background:#999999">見出し1</th><td>データ1</td><td>データ2</td></tr>
<tr><td>データ3</td><td>データ4</td></tr>
<tr><td>データ5</td><td>データ6</td></tr>
<tr><th style="color:white;background:#999999">見出し2</th><td colspan="2">データ7</td></tr>
</table>
}}}
ちなみにHTMLソースはこんな感じです。けっこう煩雑ですね。
<div style="text-align:center">
<table style="width:300px;margin:auto">
<tr>
<th colspan="3" style="color:white;background:#333333;">データ一覧</th>
</tr>
<tr>
<th rowspan="3" style="color:white;background:#999999">見出し1</th>
<td>データ1</td><td>データ2</td>
</tr>
<tr><td>データ3</td><td>データ4</td></tr>
<tr><td>データ5</td><td>データ6</td></tr>
<tr>
<th style="color:white;background:#999999">見出し2</th>
<td colspan="2">データ7</td>
</tr>
</table>
</div>
----
表示オプション
横に並べて表示:
変化行の前後のみ表示: