表の組み方のサンプル

(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をもっと見る   閉じる

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

メニュー  
Gamerch会員特典
基本マークアップ
Wikiの基本編集・新規機能
その他
人気Wikiの作り方講座
Gamerchサポート
左サイドメニューの編集

サイト内ランキング
【第3回】人気Wikiはページが見やすい!
HTMLマークアップ一覧
DBを使ってみよう!
4 編集してみよう!
5 編集者交流掲示板
6 Gamerch会員専用機能!
7 運営への要望
8 掲示板を使ってみよう!
9 独自CSS一覧
10 ブログ型を編集してみよう!
最近の更新

3時間まえ

4時間まえ

2017/11/16 (木) 10:49

2017/11/16 (木) 10:47

2017/11/16 (木) 10:45

2017/11/16 (木) 03:00

2017/11/15 (水) 13:15

2017/11/15 (水) 12:41

2017/11/01 (水) 15:21

2017/11/01 (水) 13:28

2017/10/31 (火) 17:47

2017/10/30 (月) 10:27

2017/10/27 (金) 21:00

2017/10/26 (木) 21:49

2017/10/25 (水) 21:36

2017/10/25 (水) 10:40

2017/10/24 (火) 16:29

2017/10/23 (月) 11:31

2017/10/22 (日) 21:17

新規作成

2017/09/12 (火) 16:01

2017/07/28 (金) 17:42

2017/06/05 (月) 18:52

2017/02/06 (月) 16:13

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

Wikiランキング
【速報】ミラクルニキ攻略アンテナ
DBZ ドッカンバトル攻略Wikiまとめ【ドラゴンボールZドカバト】
消滅都市2 攻略まとめWiki
4 白猫プロジェクトwiki【白猫攻略wiki】
5 アイマス デレステ攻略まとめwiki【アイドルマスター シンデレラガールズ スターライトステージ】
6 ブレソル攻略Wikiまとめ【BLEACH Brave Souls】
7 ジョジョの奇妙な冒険 スターダストシューターズ攻略Wiki【ジョジョSS】
8 ポケットモンスターウルトラサン・ムーン攻略Wikiまとめ【ポケモンUSUM】
9 チェインクロニクル攻略・交流Wiki チェンクロ3
10 コトダマ勇者攻略Wiki
注目記事
ドッカンバトル リセマラランキング ドラゴンボールZドッカンバトル
ポケモン ウルトラサンムーン 違い ポケットモンスターウルトラサン/ムーン
白猫 オーバードライブ紅蓮2 白猫プロジェクト
忍ボル リセマラランキング NARUTO X BORUTO 忍者ボルテージ
アズールレーン 明石のお願い 暗号の場所 アズールレーン
ウイコレ フレンドリーマッチ募集掲示板 ウイニングイレブン カードコレクション
オルサガ 魔女の追憶 攻略 オルタンシアサーガ
ミラクルニキ コーデコロッセオ 高得点 ミラクルニキ
FGO おすすめストーリーサーヴァント Fate/Grand Order
モンスト LINE掲示板 モンスト
ページ編集 トップへ