表の組み方のサンプル

(4)  
最終更新日時:

通常の表を作成する

通常の表を作成するには以下のように、Wiki編集画面に入力してみましょう。

|ヘッダー1|ヘッダー2|ヘッダー3|h
|セル1|セル2|セル3|
|セル1|セル2|セル3|

すると次のように表が組まれます。

ヘッダー1ヘッダー2ヘッダー3
セル1セル2セル3
セル1セル2セル3

なお、表のヘッダーの行は次のように指定することも可能です。

|~ヘッダー1|ヘッダー2|ヘッダー3|



表のセルの横幅を指定する

表の横幅を指定するには「 c 」という一文字を末尾に追加した新しい行を用意します。

この行を「初期設定行」といいます。初期設定行にてセルの横幅を指定できます。
なお、単位はピクセル単位になります。%での指定も可能です。

|100|200|50%|c
|ヘッダー1|ヘッダー2|ヘッダー3|h
|セル1|セル2|セル3|
|セル1|セル2|セル3|

ヘッダー1ヘッダー2ヘッダー3
セル1セル2セル3
セル1セル2セル3

テーブル全体の横幅を指定する

テーブルの横幅を指定するには「T:数字」というマークアップを初期設定行に追加します。

|T:500|||c
|ヘッダー1|ヘッダー2|ヘッダー3|h
|セル1|セル2|セル3|

ヘッダー1ヘッダー2ヘッダー3
セル1セル2セル3

このマークアップはセルの横幅指定と同時に利用できます。
セルの横幅指定のマークアップがテーブルの横幅指定のマークアップの数字とつながらないように設定してください。

例:テーブルの横幅:300px
セルの横幅:100pxと200px

・悪い例
|T:300100|200|c
|ヘッダー1|ヘッダー2|h
|セル1|セル2|

・良い例
|100T:300|200|c
|ヘッダー1|ヘッダー2|h
|セル1|セル2|

ヘッダー1ヘッダー2
セル1セル2

テーブルに横スクロールバーを表示する(スマホのみ)
テーブルに横スクロールバーを表示するには「TS:数字」というマークアップを初期設定行に追加します。
数字が300以上且つ、スマホで閲覧した場合のみ表示されます。

|TS:500|||c
|ヘッダー1|ヘッダー2|ヘッダー3|h
|セル1|セル2|セル3|

ヘッダー1ヘッダー2ヘッダー3
セル1セル2セル3

このマークアップはセルの横幅指定と同時に利用できます。
セルの横幅指定のマークアップがテーブルの横幅指定のマークアップの数字とつながらないように設定してください。

例:テーブルの横幅:300px
セルの横幅:100pxと200px

・悪い例
|TS:300100|200|c
|ヘッダー1|ヘッダー2|h
|セル1|セル2|

・良い例
|100TS:300|200|c
|ヘッダー1|ヘッダー2|h
|セル1|セル2|

ヘッダー1ヘッダー2
セル1セル2

各列のセルの横幅以外の初期設定を行なう

各列のセルの文字の色や背景の色、文字の大きさや文字の揃えなどを予め決めておくことが出来ます。
各列のセルの初期設定を行う場合には下記のマークアップを初期設定行に追加します。

利用できる構文は以下のとおりです。
size(文字サイズ):
color(色指定):
bgcolor(色指定):
right:
left:
center:

|bgcolor(blue):color(white):|right:size(20):|c
|ヘッダー1|ヘッダー2|h
|セル1|セル2|

ヘッダー1ヘッダー2
セル1セル2


セルを連結する

表の中のセルは連結することが出来ます。
縦に連結したい場合は「^」、横に連結したい場合には「>」を利用します。
(例)縦に連結する場合

|縦に結合したい文字|表8|表9|
|^|表10|表11|
|^|表12|表13|


縦に結合したい文字表8表9
表10表11
表12表13

(例)横に連結する場合

|>|表14|
|表15|表16|


表14
|表15|表16|"

cを使った応用

表の途中から「 c 」を挿入することで、連結した表でも設定し直すことができます

|TS:100%CENTER: bgcolor(green):color(white):|CENTER: bgcolor(green):color(white):|c
|表サンプルサンプル|表サンプルサンプル|
|表サンプル|表サンプル|
|LEFT: bgcolor(brown):color(white):|LEFT: bgcolor(brown):color(white):|c
|表サンプルサンプル|表サンプルサンプル|
|表サンプル|表サンプル|
|RIGHT: bgcolor(red):color(white):|RIGHT: bgcolor(red):color(white):|c
|表サンプルサンプル|表サンプルサンプル|
|表サンプル|表サンプル|

(例)文字列中央/緑→左寄せ/茶→右寄せ/赤
表サンプルサンプル表サンプルサンプル
表サンプル表サンプル
表サンプルサンプル表サンプルサンプル
表サンプル表サンプル
表サンプルサンプル表サンプルサンプル
表サンプル表サンプル
コメント(4)
Twitter

コメント

  • ななし No.98955632 2016/12/16 (金) 12:41 通報
    表の一部の行だけセルの色を変えたい場合、すべてのセルで背景色のマークアップを入れなければならないのでしょうか?
    返信数 (1)
    0
    • × Gamerchサポート◆rfiYrD9mT6 No.98956666 2016/12/16 (金) 15:10 通報
      こんにちわ!書き込みありがとうございます!
      一度に複数の表の色を変更する場合は「c」で再設定した方が簡単ですが、表のある一部分だけとなるとそこだけ色指定するしかありません。
      上記のサンプルに「cを使った応用」という項目を追加しました。ご参考になるかわかりませんがよろしくお願いします。mOm
      0
  • ミラ No.96346778 2016/05/28 (土) 21:47 通報
    いわゆる入れ子とかネストとか言われる
    表の中に表をつくる場合はどのようにすればいいのでしょうか?
    現時点ではそういう入れ子表は作れないんでしょうか?
    例)表1のセル1に表2が入っているようなテーブル
    返信数 (1)
    1
    • × Gamerchサポート◆rfiYrD9mT6 No.96369039 2016/05/30 (月) 08:21 通報
      貴重なご意見ありがとうございます。
      現状は実装されておりませんので
      開発と協議いたしまして、機能を検討させていただきます。
      0

削除すると元に戻すことは出来ません。
よろしいですか?

今後表示しない

名前
コメント(必須)
(300文字まで)

必ず「Gamerch ガイドライン」をご覧の上、書き込みをお願いします。
画像
sage機能

対象コメント

選択項目

詳細

※上記の内容はWiki管理者へ通報されます。

通報完了

通報内容を送信しました

エラー

エラーが発生しました

削除しました。
 このWikiに関するツイート  閉じる
1件の新しいツイートがあります
  • 関連するツイートはありません
 古いTweetをもっと見る   閉じる

このページをシェアしよう!

最近の更新

14時間まえ

2017/01/18 (水) 16:57

2017/01/16 (月) 10:29

2017/01/15 (日) 02:32

2017/01/14 (土) 17:42

2017/01/12 (木) 10:56

2017/01/11 (水) 18:49

2017/01/11 (水) 18:04

2017/01/11 (水) 13:20

2017/01/11 (水) 11:41

2017/01/10 (火) 18:35

2017/01/10 (火) 12:30

2017/01/10 (火) 12:25

2017/01/09 (月) 17:29

2017/01/05 (木) 16:40

2017/01/05 (木) 16:24

2017/01/04 (水) 00:56

2017/01/02 (月) 17:18

2017/01/01 (日) 21:42

2016/12/26 (月) 17:53

新規作成

2016/10/13 (木) 17:08

2016/10/13 (木) 15:35

2016/10/11 (火) 18:46

2016/10/05 (水) 09:32

2016/06/09 (木) 11:34

2016/03/31 (木) 17:20

2016/03/18 (金) 17:01

2016/03/18 (金) 12:01

2016/03/15 (火) 15:53

2016/03/15 (火) 11:48

Wikiランキング
白猫プロジェクトwiki【白猫攻略wiki】
チェインクロニクル攻略・交流Wiki チェンクロ3
アイマス デレステ攻略まとめwiki【アイドルマスター シンデレラガールズ スターライトステージ】
4 ドラクエモンスターズ スーパーライト非公式wiki【DQMSL攻略】
5 ジョジョの奇妙な冒険 スターダストシューターズ攻略Wiki【ジョジョSS】
6 消滅都市2 攻略まとめWiki
7 【速報】ミラクルニキ攻略アンテナ
8 Sガンロワ攻略Wikiまとめ【スーパーガンダムロワイヤル】
9 遊戯王 デュエルリンクス攻略Wikiまとめ
10 DBZ ドッカンバトル攻略Wikiまとめ【ドラゴンボールZドカバト】
ページ編集 トップへ