Wikiのwiki(仮)

提供:Wiki@KDS
ナビゲーションに移動 検索に移動

テーブルの作り方

<テーブル例>

見出し0 列見出しA 列見出しB 列見出しC
行見出し1 セル1A セル1B(右寄せ) セル1C(縦のセルと結合)
行見出し2 セル2A(横のセルと結合)
行見出し3 セル3A セル3B セル3C

<マークアップ例>

<table class="wikitable">
    <tr bgcolor="#E0E0E0">
        <th width="100px">見出し0</th>
        <th width="200px">列見出しA</th>
        <th width="300px">列見出しB</th>
        <th>列見出しC</th>
    </tr>
    <tr>
        <th>行見出し1</th>
        <td>セル1A</td>
        <td align="right">セル1B(右寄せ)</td>
        <td rowspan="2">セル1C(縦のセルと結合)</td>
    </tr>
    <tr>
        <th>行見出し2</th>
        <td colspan="2" bgcolor="#F0F0F0">セル2A(横のセルと結合)</td>
    </tr>
    <tr>
        <th>行見出し3</th>
        <td>セル3A</td>
        <td>セル3B</td>
        <td>セル3C</td>
    </tr>
</table>

<マークアップの注意点(デフォルトのテーブルスタイル)>

※デフォルトのテーブルスタイルを使う場合の注意点は以下の通りです。
・<table>タグに対して、「class="wikitable"」をつけてください。

・見出しのセルに使うタグは
<th></th>
がおすすめです。フォントが強調されテキストが中央表示になります。



<テーブル Q and A>

Q:セルを結合するには?
A:
・縦のセルを結合させたい場合
結合させたいセルの一番上のセルのタグに対して、「rowspan="数字"」を指定する。
(数字)には結合したいセルの数(一番上のセルもその数に含める)を入れる。
「rowspan="数字"」を指定したタグ以外の結合させたタグは削除。

・横のセルを結合させたい場合
結合させたいセルの一番左のセルのタグに対して、「colspan="数字"」を指定する。
(数字)には結合したいセルの数(一番左のセルもその数に含める)を入れる。
「colspan="数字"」を指定したタグ以外の結合させたタグは削除。
Q:テキストを右寄せにするには?
A:そのセルのタグに対して「align="right"」を指定する。
Q:テキストを中央寄せにするには?
A:そのセルのタグに対して「align="center"」を指定する。
Q:セルの幅を指定するには?
A:そのセルのタグに対して「width="数字px"」を指定する。
Q:セルに対して色をつけるには?
A:
そのセルのタグに対して「bgcolor="色"」を指定する。
(色)には「#」から始まるRGB値(16進数)で指定するか、色の名称(blackとかredとかgreenなどなど)で指定する。
横一列に対して色付けするには、<tr>タグに対して「bgcolor="色"」を指定する。