Help:表の作り方
不朽の名作から
ケータイ小説(笑)まで

[Wikipedia|▼Menu]
□記事を途中から表示しています
[最初から表示]


折り返しの禁止

日本語を含むいくつかの言語では文中のどこでも折り返しが可能であるため、場合によっては見出しセルの短い語が折り返されて表示され非常に見づらくなります。これを防ぐには、CSS の white-space プロパティを設定します。

ウィキマークアップ{| class="wikitable"|+ 見出しが折り返されてしまうかもしれない表! 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}{| class="wikitable"|+ 見出しの折り返しを禁止した表! style="white-space:nowrap" | 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}

実際の表示

見出しが折り返されてしまうかもしれない表折り返されそうな見出し寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

見出しの折り返しを禁止した表折り返されそうな見出し寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

セルのパラメータに nowrap 属性を使用して同じ効果を得られますが、この属性は非推奨です[2]


セル内の文字の配置

セル内の文字をセンタリングしたり右寄せにしたりするには、CSS の text-align プロパティを設定します。行のパラメータとして設定すると行の中のセル全てに、表全体のパラメータとして設定すると表に含まれるセル全てに適用されます。

ウィキマークアップ{| class="wikitable" style="width:100%"|+ 文字寄せのサンプル| style="text-align:left" | 左寄せのセル| style="text-align:center" | 中央寄せのセル| style="text-align:right" | 右寄せのセル|}{| class="wikitable" style="text-align:right"|+ 全部右寄せの表! × !! 2 !! 3 !! 4 !! 5 <!-- 見出しセルには適用されない -->|-! 2| 4 || 6 || 8 || 10|-! 3| 6 || 9 || 12 || 15|-! 4| 8 || 12 || 16 || 20|-! 5| 10 || 15 || 20 || 25|}

実際の表示

文字寄せのサンプル左寄せのセル中央寄せのセル右寄せのセル

全部右寄せの表×2345
246810
3691215
48121620
510152025

このほかにセルのパラメータに align 属性を使用し、align="right" などとしても同じ効果が得られます[1]が、後述するように表に対する align 属性は非推奨なので混乱を避けるために CSS の text-align プロパティで置き換えた方が無難でしょう。

セル内の文字の垂直方向の配置を指定するには、CSS の vertical-align プロパティを設定します。こちらは text-align プロパティと異なり、行や表全体に指定してもセルには反映されません[4]。セルのパラメータとして使用してください。

ウィキマークアップ{| class="wikitable" style="width:100%; height:3em"|+ 垂直方向の指定のサンプル| style="vertical-align:top" | 上辺で揃えたセル| style="vertical-align:middle" | 中央で揃えたセル| style="vertical-align:bottom" | 下辺で揃えたセル|}

実際の表示

垂直方向の指定のサンプル上辺で揃えたセル中央で揃えたセル下辺で揃えたセル

このほかに、セルのパラメータに valign 属性を使用し、valign="top" などとしても同じ効果が得られます[1]


表の配置

表を中央に表示するには、表全体のパラメータに以下を指定します。これは、「上下に余白を空けず、左右の余白を自動計算する」という意味で、左右それぞれの端から等しい距離、つまり中央に配置されます。{| style="margin:0 auto"

中央に表示した表見出し0列見出しA列見出しB列見出しC
行見出し1セル1Aセル1Bセル1C
行見出し2セル2Aセル2Bセル2C

表を右または左に寄せるには、表全体のパラメータに以下を指定します。後に続くテキストは反対側に回り込み、余白部分に流し込まれる形になります。{| style="float:right" <!-- 右寄せ -->

または{| style="float:left" <!-- 左寄せ -->

ウィキマークアップ'''この段落は表の手前に書かれています''':寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助{| class="wikitable" style="float:right"|+ 右寄せした表! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC|-! 行見出し1| セル1A || セル1B || セル1C|-! 行見出し2| セル2A || セル2B || セル2C|}'''この段落は表の後に書かれています''':寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

実際の表示

この段落は表の手前に書かれています: 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

右寄せした表見出し0列見出しA列見出しB列見出しC
行見出し1セル1Aセル1Bセル1C
行見出し2セル2Aセル2Bセル2C

この段落は表の後に書かれています: 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助


表の配置を指定するのに align 属性が使われることがありますが、表全体に対する align 属性は非推奨です[2]。上記の方法を使ってください。


背景色、文字色

背景色を指定するには、CSS の background-color プロパティを設定します。文字色は color プロパティを設定します。

ウィキマークアップ{| class="wikitable" style="background-color:#fdd" <!-- 表全体の背景色をピンクに -->|+ 表の色を設定する! 見出しセル <!-- wikitable で見出しセルへの指定が上書きされるので、ピンクにならない -->! 見出しセル! style="background-color:#dfd" | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->|-| style="color:#007" | 文字色を変更したセル| セル| セル|-| セル| style="color:#fff; background-color:#700" | 背景色と文字色を変更したセル| セル|- style="background-color:#ddf"| 行全体の || 背景色を || 変更|}

実際の表示

表の色を設定する見出しセル見出しセル背景色を変更した見出し
文字色を変更したセルセルセル
セル背景色と文字色を変更したセルセル
行全体の背景色を変更

背景色の変更は bgcolor 属性でも可能ですが、この属性は非推奨です[2]。また、文字色を変更するためにセル内の文字を <font> タグで囲む方法がありますが、font 要素も同様に非推奨です。

Wikipedia:色の使用は控えめにも参照してください。


再整列可能な表

クラス "sortable wikitable" を使用することによって、表の各列を昇順または降順にソート(整列)できるようになります。

ウィキマークアップ{| class="sortable wikitable"|+ 昇順・降順に並べ替えできるwikitable! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC|-! 行見出し1| 1 || c || ウ|-! 行見出し2| 2 || b || ア|-! 行見出し3| 3 || a || イ|}

実際の表示

昇順・降順に並べ替えできるwikitable見出し0列見出しA列見出しB列見出しC
行見出し11cウ
行見出し22bア
行見出し33aイ


その他の CSS の利用

class="wikitable" を使わずに罫線を表示するには、各セルに罫線を表示する設定を記述しなければなりません(正確には罫線と言うより、各セルの境界線です)。

以下、表全体および各セルで border で始まる記述をしているのが罫線の指定部分です。

ウィキマークアップ{| style="width:20em; margin-left:1em; border-width:2px 3px 3px 2px; border-color:#a77 #733 #733 #a77; border-style:solid; border-collapse:collapse; background-color:white; text-align:center"|+ style="font-weight:bold; font-size:smaller" | 五十音表|-! style="border-bottom:1px solid #733" | ん! style="border-bottom:1px solid #733" | わ! style="border-bottom:1px solid #733" | ら! style="border-bottom:1px solid #733" | や! style="border-bottom:1px solid #733" | ま! style="border-bottom:1px solid #733" | は! style="border-bottom:1px solid #733" | な! style="border-bottom:1px solid #733" | た! style="border-bottom:1px solid #733" | さ! style="border-bottom:1px solid #733" | か! style="border:solid #733; border-width:0 0 1px 1px" | あ|- style="background-color:#edd"| || style="color:#777" | ゐ || り || || み || ひ || に || ち || し || き! style="border-left:1px solid #733" | い|-| || || る || ゆ || む || ふ || ぬ || つ || す || く! style="border-left:1px solid #733" | う|- style="background-color:#edd"| || style="color:#777" | ゑ || れ || || め || へ || ね || て || せ || け! style="border-left:1px solid #733" | え|-| || を || ろ || よ || も || ほ || の || と || そ || こ! style="border-left:1px solid #733" | お|}


完全無料エロボイス♪
「声」は興奮しますよ!

[次ページ]
[オプション/リンク一覧]
[記事の検索]
[おまかせ表示]
[トップページ]
[ニュースをチェック!]
[列車運行情報]
Size:36 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:Mamenoki