Help:表の作り方
[Wikipedia|▼Menu]
.mw-parser-output .module-shortcutboxplain{float:right;border:1px solid #aaa;background:#fff;margin:0 0 0 1em;padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%;font-weight:bold}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid #aaa;margin-bottom:0.2em;font-weight:normal}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}ショートカット:

H:TABLE


ようこそ

ガイドブック

チュートリアル

早見表

用語集

FAQ

ヘルプ

利用案内

質問

ウィキペディア日本語版のヘルプページです。

編集用ヘルプ目次
編集の基本
ページの編集
新規ページの作成
記事名チェック
文書の体裁
セクションと目次
箇条書き / 表の作り方
脚注 / ISBNのリンク
特殊文字
HTMLタグの使用
画像の表示
画像などの利用
ファイルページ
数式の書き方
リンクする
リンク / URL
パイプ付きリンク
言語間・ウィキ間リンク
ウィキデータ
カテゴリ
リダイレクトソフト
ページの位置づけ
名前空間
サブページ
ミスなどの修正
新規ページの巡回
以前の版にページを戻す方法
ページの移動
作業の効率化
マジックワード
テンプレート早わかり
テンプレートの制限
条件文 / テンプレートの説明文
ナビゲーションボックス
コミュニケーション
要約欄
細部の編集
ノートページ / 過去ログ
ウィキラブ
ウィキメール / 感謝
その他
編集の競合
ページ名の働き
記事の定義
ページサイズ
音声・動画の作成と利用
棒グラフの書き方
サンドボックス
ウィキポータル

の作り方について解説します。複雑な表の記述法も取り上げます。ウィキペディアではHTMLを使わなくても、#パイプ構文という簡易的な表記法によって表が記述できます。つまり、<table>というタグから始めなくても、{|から始められます。表には様々な#パラメータが使え、他の記事との表の外観の統一性を保つために class="wikitable" という外観の指定が推奨されています。class="wikitable"を使うと、#再整列可能な表のように表に機能を持たせることもできます。

表を使うのがふさわしい場面については、表のスタイルマニュアルを参照してください。

デスクトップ版とモバイルビューでは、表示が異なる場合があります。
簡単な例[ソースを編集]

ごく単純な例を以下に示します。以下のように記述します。{。class="wikitable"|+ 表のタイトル! 見出し0?!! 列見出しA?!! 列見出しB?!! 列見出しC|-! 行見出し1。セル1A |。セル1B |。セル1C|-! 行見出し2。セル2A |。セル2B |。セル2C|}

これは、以下のような表が表示されます。罫線は #a2a9b1(■)、見出し背景は #eaecf0(■)、セル背景は #f8f9fa(■)で表示されます。

表のタイトル見出し0列見出しA列見出しB列見出しC
行見出し1セル1Aセル1Bセル1C
行見出し2セル2Aセル2Bセル2C

Template:Table2を用いて、以下のように書いても全く同じように表示されます。{{Table2 。cols= 4 。caption= 表のタイトル。th1= 見出し0 。th2= 列見出しA 。th3= 列見出しB 。th4= 列見出しC。行見出し1 。セル1A 。セル1B 。セル1C。行見出し2 。セル2A 。セル2B 。セル2C。cell1-1= background:#eaecf0; font-weight:bold;。cell2-1= background:#eaecf0; font-weight:bold;}}

また、以下のように書いても全く同じように表示されます。<table class="wikitable"> <caption>表のタイトル</caption> <tr> <th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th> </tr> <tr> <th>行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td> </tr> <tr> <th>行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td> </tr></table>

前者の {。で始まり、パイプ (|) を多用するものをパイプ構文と呼びます。後者は HTML5 で記述されています。それぞれに利点と欠点がありますが、以降はより簡潔に書けるパイプ構文を中心に解説していきます。
HTML属性[ソースを編集]

テーブルエンド(|})を除く各マークは、オプションで1つ以上の属性を受け付けます。属性はマークと同じ行記述します。

ヘッダーセル(! または !!)、データセル(。または ||)とキャプション(|+)は内容を持つので、

(! scope="row" 。見出し)のように、属性と内容をシングルパイプ(|)で区切って記述します。

表({|)および行(|-)は内容を直接保持しないので、属性の後にパイプ(|)は必要ありません(例:|- style="position:sticky; top:0")。

テーブルによく含まれる属性は以下の通りです。
class
例)class="sortable wikitable"
id
例)id="table-1"
style
CSSのスタイル設定
scope
ヘッダセルによる見出しの対象となるデータセルの範囲を示す
rowspan
セルを行方向に拡張する
colspan
セルを列方向に拡張する
編集ツールバー[ソースを編集]改良型編集ツールバーの2018年版。

編集ツールバーによって表の枠組みの簡易作成ができます。「 > 上級」を展開し、表アイコン を押すことで、表の枠組みのフォーマットが挿入されます。

ただし、複雑な表を作るには以降のパイプ構文に通じている必要があるでしょう。
パイプ構文[ソースを編集]

パイプ構文は、実際にはHTML要素の省略記法に過ぎません。HTMLの知識はそのままパイプ構文にも応用できます。
早見表[ソースを編集]

記号意味備考HTML(参考)
{|表の記述を開始する。<table>
|+表のタイトル。(省略可)<caption>
|-新しい行を開始する。(1行目では省略可)<tr>
|通常のセルの開始。|。で区切って、同じラインに次の列のセルを記述することができる。<td>
!見出しセルの開始。!! または |。で区切って、
同じラインに次の列の見出しセルを記述することができる。(省略可)<th>
|}表の記述を終了する。</table>

解説[ソースを編集]

以下、「行」という語は表の横一列を、「列」という語は縦一列を意味します。構文上の改行記号で区切られる「行」については「ライン」と表記します。混同に気をつけてください。
重要なルール
各種の記号は必ずラインの先頭に書かねばならず、空白などを手前に入れてはいけません。


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:44 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef