表の組み方のサンプル

(6コメント)  
最終更新日時:

通常の表を作成する

通常の表を作成するには以下のように、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
|表サンプルサンプル|表サンプルサンプル|
|表サンプル|表サンプル|

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

コメント

  • 774@Gamerch No.101845287 2018/01/02 (火) 09:01 通報
    PCで閲覧中、「テーブル内にカーソルを置くとその行の背景がピンク色に変化する」というページを見つけました。しかし、ソースを見ても特別なことをしているようには見えません。見やすくてうらやましいのですが、このやり方はどこかで解説されていますか?
    返信数 (1)
    0
    • × 774@Gamerch No.101847121 2018/01/02 (火) 15:05 通報
      失礼しました。解説されているページを発見、自分でも同じことができました。コメントはスルーするか、削除してしまってください。
      0
  • ななし 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サポート

左サイドメニューの編集

サイト内ランキング
スマホから編集してみよう!
HTMLマークアップ一覧
運営への要望
4 独自CSS一覧
5 DBを使ってみよう!
6 機能更新一覧
7 編集してみよう!
8 掲示板を使ってみよう!
9 Gamerch会員専用機能!
10 作成してみよう!
最近の更新

2018/12/10 (月) 16:27

2018/12/07 (金) 11:40

2018/12/06 (木) 16:00

2018/11/09 (金) 21:18

2018/11/05 (月) 12:12

2018/11/05 (月) 11:40

2018/09/18 (火) 10:08

2018/09/12 (水) 22:48

2018/09/12 (水) 17:08

2018/09/12 (水) 17:05

2018/09/06 (木) 21:13

2018/09/03 (月) 11:15

2018/09/01 (土) 11:29

2018/08/27 (月) 11:55

2018/08/22 (水) 19:10

2018/08/20 (月) 20:58

2018/08/20 (月) 10:59

2018/08/20 (月) 10:56

2018/08/16 (木) 12:59

2018/08/15 (水) 20:59

新規作成

2017/12/21 (木) 16:52

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

注目記事
【スマブラSP】キャラ解放条件一覧 スマブラSP攻略Wiki【大乱闘スマッシュブラザーズ スペシャル】
【ロマサガRS】リセマラ当たりランキング ロマンシング サガ リ・ユニバース(ロマサガRS)攻略wiki
【グリアド】リセマラ方法&当たりキャラランキング ハンターハンター グリードアドベンチャー攻略まとめWiki
【ジャンパーズ】リセマラ当たりランキング ホップステップジャンパーズ攻略wiki
【白猫】モンストコラボガチャ当たりランキング 白猫プロジェクト攻略wiki
ページ編集 トップへ
コメント 6