HTMLでテーブル(表)を書くのは、結構面倒なのです、テーブル(表)に関連するタグと主要な属性は、以下のものがあります。
- <table> : border, cellspacing, cellpadding, summary
- <caption>
- <tr>
- <th> : rowspan, colspan
- <td> : rowspan, colspan
- <thead>
- <tbody>
- <tbody>
- <colgroup>
- <col> : span
今後の拡張として、これらのタグに徐々に対応していく予定ですが、現在のところ、もっとも主要なタグと属性にのみ対応しています。
テーブルの簡易記法の書式は以下のようになります。
||--{+border="1"+}--||表のサンプル
|-- りんご|-- 赤-|---- 林檎---|
|-I2- なし|-H2-- 日本なし-----|
|--------- 洋ナシ|ひょうたん型|
りんご | 赤 | 林檎 |
なし | 日本なし | |
洋ナシ | ひょうたん型 |
「|」で区切ることで、表を書くことができます。列をそろえるためには、前後に「-」を入れます。後ろに入れる「-」は文字列の直後に入れますが、前に入れる「-」の後には半角スペースを一つ入れます。
表のタイトルを入れたり、枠線の設定を行うには、最初の行に「||----||」を使います。上述のサンプルのように記述することで、<table>タグの属性と<caption>タグを設定することができます。
セルを上下左右に連結させるためには、「-I2-」「-H2-」などをセルの前部に記述します。「-I2-」と記述すると上下にセルを連結します。「-H2-」と記述すると左右にセルを連結します。数字を変更することで、連結するセルの数を変えられます。
class属性を指定したり、その他の属性を指定するには、以下のように記述することができます。
||--tb1--{+border="3" style="background:yellow;"+}--||表のサンプル2
||--{+style="background:aquamarine"+}--|-- りんご|-- 赤----|----------------------- 林檎---------|
||-------------------------------------|-I2- なし|-H2-{+style="font-weight:bold"+}- 日本なし-----|
||--row3-----------------------------------------|-- 洋ナシ|----------------------- ひょうたん型-|
りんご | 赤 | 林檎 |
なし | 日本なし | |
洋ナシ | ひょうたん型 |