トーナメント表の作り方

トーナメント表作成の仕方

ＴＡＢＬＥタグを使ってトーナメント表を作る手順を紹介します。
エクセルで作ってＧＩＦ画像で作るのも出来ますが今回はタグで作ります。
テーブルのスタイルを変えてやります。

１、枠なしのテーブルを縦４列横６列作ります。

<TABLE cellspacing="0"> → cellspacing="0"が枠なし

２、縦４列を結合して縦２列に変えます。

<TD rowspan="2"></TD> → rowspan="2"が２つ結合

３、横線と縦線を入れ「￢」を作る。

<TD style="border-top-width : thin;border-right-width : thin;border-top-style : solid;border-right-style : 　　solid;border-top-color : black;border-right-color : black;"></TD>
↓
border-top-width で枠の上の部分だけ線を入れる。
border-top-style :solid は上の線のスタイルは solid （薄めの線）
border-top-color : black は、上の線の色は黒

４、あとは、同じ要領で枠を作っていく。
　　枠の中が何も書かれていない状態だと線が表示されないので、
　　うまく「-」などを背景色入れ、目立たない様にする。。

　分かりやすい様に枠表示して書きます。
　青の塗り潰し部分に空白（もしくは文字を入れる）を入れないと枠が表示されません。
　空白＝スペースキーで対処。
　空白だと分かりづらいので、文字入れます。

対戦１