「Wikiのwiki(仮)」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
 
1行目: 1行目:
<div id="manual">
<div id="manual">
==テーブルの作り方==
==テーブルの作り方==
====<テーブル例>====
<table class="wikitable">
<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>
<tr>
<th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
<th>行見出し1</th>
<td>セル1A</td>
<td align="right">セル1B(右寄せ)</td>
<td rowspan="2">セル1C(縦のセルと結合)</td>
</tr>
</tr>
<tr>
<tr>
<th>行見出し1</th><td>セル1A</td><td>セル1B</td><td rowspan="2">セル1C(縦のセルと結合)</td>
<th>行見出し2</th>
<td colspan="2" bgcolor="#F0F0F0">セル2A(横のセルと結合)</td>
</tr>
</tr>
<tr>
<tr>
<th>行見出し2</th><td colspan="2">セル2A(横のセルと結合)</td>
<th>行見出し3</th>
<td>セル3A</td>
<td>セル3B</td>
<td>セル3C</td>
</tr>
</tr>
</table>
</table>


<div class="sorceview">
<div class="sorceview">
====マークアップ例 その1====
====<マークアップ例>====
<pre>
<pre>
<table class="wikitable">
<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>
     <tr>
         <th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
         <th>行見出し1</th>
        <td>セル1A</td>
        <td align="right">セル1B(右寄せ)</td>
        <td rowspan="2">セル1C(縦のセルと結合)</td>
     </tr>
     </tr>
     <tr>
     <tr>
         <th>行見出し1</th><td>セル1A</td><td>セル1B</td><td rowspan="2">セル1C(縦のセルと結合)</td>
         <th>行見出し2</th>
        <td colspan="2" bgcolor="#F0F0F0">セル2A(横のセルと結合)</td>
     </tr>
     </tr>
     <tr>
     <tr>
         <th>行見出し2</th><td colspan="2">セル2A(横のセルと結合)</td>
         <th>行見出し3</th>
        <td>セル3A</td>
        <td>セル3B</td>
        <td>セル3C</td>
     </tr>
     </tr>
</table>
</table>
30行目: 57行目:
</div>
</div>


{| class="wikitable" style="margin-top:10px;"
====<マークアップの注意点(デフォルトのテーブルスタイル)>====
|-
※デフォルトのテーブルスタイルを使う場合の注意点は以下の通りです。<br>
! || 列1 || 列2 || 列3
・&lt;table&gt;タグに対して、「class="wikitable"」をつけてください。<br>
|-
・見出しのセルに使うタグは<div style="display:inline;">&lt;th&gt;&lt;/th&gt;</div>がおすすめです。フォントが強調されテキストが中央表示になります。<br>
| '''行 1'''
<br>
| rowspan="2" | A
<hr>
| colspan="2" | B
====<テーブル Q and A>====
|-
<dl>
| '''行 2'''
<dt>Q:セルを結合するには?</dt>
| C <!-- 列 1 はセル A に塞がれている -->
<dd>A:<br>
| D
・縦のセルを結合させたい場合<br>
|-
結合させたいセルの一番上のセルのタグに対して、「rowspan="数字"」を指定する。<br>
| '''行 3'''
(数字)には結合したいセルの数(一番上のセルもその数に含める)を入れる。<br>
| E
「rowspan="数字"」を指定したタグ以外の結合させたタグは削除。<br><br>
| rowspan="2" colspan="2" | F
・横のセルを結合させたい場合<br>
|-
結合させたいセルの一番左のセルのタグに対して、「colspan="数字"」を指定する。<br>
| '''行 4'''
(数字)には結合したいセルの数(一番左のセルもその数に含める)を入れる。<br>
| G <!-- 列 2 と 3 はセル F に塞がれている -->
「colspan="数字"」を指定したタグ以外の結合させたタグは削除。
|-
</dd>
| '''行 5'''
</dl>
| colspan="3" | H
<dl>
|}
<dt>Q:テキストを右寄せにするには?</dt>
 
<dd>A:そのセルのタグに対して「align="right"」を指定する。</dd>
<div class="sorceview">
</dl>
====マークアップ例 その2====
<dl>
<pre>
<dt>Q:テキストを中央寄せにするには?</dt>
{| class="wikitable"
<dd>A:そのセルのタグに対して「align="center"」を指定する。</dd>
|-
</dl>
! || 列1 || 列2 || 列3
<dl>
|-
<dt>Q:セルの幅を指定するには?</dt>
| '''行 1'''
<dd>A:そのセルのタグに対して「width="数字px"」を指定する。</dd>
| rowspan="2" | A
</dl>
| colspan="2" | B
<dl>
|-
<dt>Q:セルに対して色をつけるには?</dt>
| '''行 2'''
<dd>A:<br>
| C <!-- 列 1 はセル A に塞がれている -->
そのセルのタグに対して「bgcolor=""」を指定する。<br>
| D
(色)には「#」から始まるRGB値(16進数)で指定するか、色の名称(blackとかredとかgreenなどなど)で指定する。<br>
|-
横一列に対して色付けするには、&lt;tr&gt;タグに対して「bgcolor=""」を指定する。
| '''行 3'''
</dd>
| E
</dl>
| rowspan="2" colspan="2" | F
|-
| '''行 4'''
| G <!-- 列 2 と 3 はセル F に塞がれている -->
|-
| '''行 5'''
| colspan="3" | H
|}
</pre>
</div>
 
 
 
</div>
</div>

2009年6月2日 (火) 12:21時点における最新版

テーブルの作り方

<テーブル例>

見出し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="色"」を指定する。