wiki-kouza1 @ ウィキ
テーブルを作る
最終更新:
wiki-kouza1
-
view
テーブルとは、いわゆる一覧表のことです。EXCELなどの表計算ソフトを利用したことのある方でしたら、すぐにピンと来ると思いますが、1行の中に一塊の関連付けられたデータが列挙され、それらが複数行ある、という構造のデータをまとめる際に利用されます。
テーブル構造
HTMLでこのテーブルを記述するのは、結構大変ですが、Wikiではとても簡単に記述できます。書式は以下のとおり。
【Wikiでの記述】
|項目1|データ1-1|データ1-2|
|項目2|データ2-1|データ2-2|
|項目3|データ3-1|データ3-2|
|項目1|データ1-1|データ1-2|
|項目2|データ2-1|データ2-2|
|項目3|データ3-1|データ3-2|
【出力】
項目1 | データ1-1 | データ1-2 |
項目2 | データ2-1 | データ2-2 |
項目3 | データ3-1 | データ3-2 |
氏名 | 性別 | アドレス |
くらもち | ♂ | 阿見町 |
といった具合で、「|(ヴァーティカル・バー)」を升目の仕切りに見立てて、EXCELでいうところのセルのような表示を得ることが出来ます。
見出しデータ
テーブルの利用法としては、名簿や集計データなどを記載することが多いのですが、そういったデータには、たいてい見出し行や見出しとなる項目があるものです。HTMLでもそのようなデータが入るセルは特別なタグをつけるのですが、Wikiでもそれを利用することが出来ます。
項目1 | データ1-1 | データ1-2 |
---|---|---|
項目2 | データ2-1 | データ2-2 |
項目3 | データ3-1 | データ3-2 |
左端の見出しデータだけが太字になっていることが分かると思います。この表示を得るには、Wikiでの記述は以下のようになります。
【Wikiでの記述】
|~項目1|データ1-1|データ1-2|
|~項目2|データ2-1|データ2-2|
|~項目3|データ3-1|データ3-2|
|~項目1|データ1-1|データ1-2|
|~項目2|データ2-1|データ2-2|
|~項目3|データ3-1|データ3-2|
ご覧のとおり、見出しデータの入るセルの「|」が「|~」に変わるだけです。
セルの結合
また、EXCELでいうところの「セルの結合」もできます。
データ一覧 | ||
項目1 | データ1-1 | データ1-2 |
データ2-1 | データ2-2 | |
項目3 | データ3-1 |
横方向に結合させたいときには、左に位置するセルに「>(グレーターザン)」だけを記入すると、続くセルに結合されます。
また、縦方向に結合させたい場合は、下に位置するセルに「~(チルダ)」だけを記入すると、上のセルに結合されます。
【Wikiでの記述】
|>|>|データ一覧|
|項目1|データ1-1|データ1-2|
|~|データ2-1|データ2-2|
|項目3|>|データ3-1|
|>|>|データ一覧|
|項目1|データ1-1|データ1-2|
|~|データ2-1|データ2-2|
|項目3|>|データ3-1|
ただ、残念なことに、まだ上記の「見出しデータ」との併用には対応していないようです。単に升目のきり方を制御できるだけ、という利用法に限定されそうです。
ちなみにHTMLで記述すると、細かい点が自由にレイアウトできます。
データ一覧 | ||
---|---|---|
見出し1 | データ1 | データ2 |
データ3 | データ4 | |
データ5 | データ6 | |
見出し2 | データ7 |
ちなみに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>