PR
コメント新着
Aug , 2026
Jul , 2026
Jul , 2026
Jun , 2026
フリーページ
タグ辞書【A】
タグ辞書【ABBR】
タグ辞書【ACRONYM】
タグ辞書【ADDRESS】
タグ辞書【APPLET】
タグ辞書【AREA】
タグ辞書【B】
タグ辞書【BASE】
タグ辞書【BASEFONT】
タグ辞書【BDO】
タグ辞書【BGSOUND】
タグ辞書【BIG】
タグ辞書【BLINK】
タグ辞書【BLOCKQU…】
タグ辞書【BODY】
タグ辞書【BR】
タグ辞書【BUTTON】
タグ辞書【CENTER】
タグ辞書【CITE】
タグ辞書【CODE】
タグ辞書【COL】
タグ辞書【COLGROUP】
タグ辞書【COMMENT】
タグ辞書【CAPTION】
タグ辞書【DD】
タグ辞書【DEL】
タグ辞書【DFN】
タグ辞書【DIR】
タグ辞書【DIV】
タグ辞書【DL】
タグ辞書【DT】
タグ辞書【EM】
タグ辞書【EMBED】
タグ辞書【FIELDSET】
タグ辞書【FONT】
タグ辞書【FORM】
タグ辞書【FRAME】
タグ辞書【FRAMESET】
タグ辞書【H】
タグ辞書【HEAD】
タグ辞書【HR】
タグ辞書【HTML】
タグ辞書【I】
タグ辞書【IFRAME】
タグ辞書【ILAYER】
タグ辞書【IMG】
タグ辞書【INPUT】
タグ辞書【INS】
タグ辞書【ISINDEX】
タグ辞書【KBD】
タグ辞書【LABEL】
タグ辞書【LAYER】
タグ辞書【LEGEND】
タグ辞書【LI】
タグ辞書【LINK】
タグ辞書【LISTING】
タグ辞書【MAP】
タグ辞書【MARQUEE】
タグ辞書【MENU】
タグ辞書【META】
タグ辞書【MULTICOL】
タグ辞書【NOBR】
タグ辞書【NOEMBED】
タグ辞書【NOFRAMES】
タグ辞書【NOLAYER】
タグ辞書【NOSCRIPT】
タグ辞書【OBJECT】
タグ辞書【OL】
タグ辞書【OPTGROUP】
タグ辞書【OPTION】
タグ辞書【P】
タグ辞書【PARAM】
タグ辞書【PLAINTEXT】
タグ辞書【PRE】
タグ辞書【Q】
タグ辞書【RB】
タグ辞書【RP】
タグ辞書【RT】
タグ辞書【RUBY】
タグ辞書【S】
タグ辞書【SAMP】
タグ辞書【SCRIPT】
タグ辞書【SELECT】
タグ辞書【SMALL】
タグ辞書【SPACER】
タグ辞書【SPAN】
タグ辞書【STRIKE】
タグ辞書【STRONG】
タグ辞書【STYLE】
タグ辞書【SUB】
タグ辞書【SUP】
タグ辞書【TABLE】
タグ辞書【TBODY】
タグ辞書【TD】
タグ辞書【TEXTAREA】
タグ辞書【TFOOT】
タグ辞書【TH】
タグ辞書【THEAD】
タグ辞書【TITLE】
タグ辞書【TR】
タグ辞書【TT】
タグ辞書【U】
タグ辞書【UL】
タグ辞書【VAR】
タグ辞書【WBR】
タグ辞書【XMP】
タグ辞書【コメントアウト】
タグ辞書【!DOCTYPE】
piyo
サンプル
HP作成のためのコラム
スタイルシートをゼロからお勉強
HTMLタグに挑戦
Oct 1, 2004
テーマ： タグに挑戦！(102)
カテゴリ： カテゴリ未分類
今日は久しぶりにテーブルを勉強しましょう(￣▽￣人)
セルの結合ってどうするのか覚えていますか？
これも知っていると意外と便利ですよ(〃⌒▽⌒)
<table border="1">
<tr>
<td colspan=2 >○</td>
<td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
</table>
横方向にセルを結合したい場合は「colspan」にて指定します。
この「colspan」に「2」を指定した場合は、セルがテーブルの列を 2 つ使用することを示します。
<table border="1">
<tr>
<td colspan=3 >○</td>
</tr>
<tr><td>×</td><td>○</td><td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
同様に「colspan」に「3」を指定した場合は、セルがテーブルの列を 3 つ使用することを示します。
気をつけてもらいたいのは、（当たり前なのですが）セルを結合するとセルの数が一つ減ります。
３つのセルを結合した場合には、２つのセルがなくなっているということを忘れないで下さい。
そうしないといびつな形のテーブルができあがってしまいます(´･ω･`)
<table border="1">
<td colspan=3 >○</td>
</tr>
<tr><td>×</td>
<td rowspan=2 >○</td>
<td>×</td></tr>
<tr><td>×</td><td>×</td></tr>
</table>
縦方向にセルを結合したい場合は「rowspan」を使います。
使用方法や注意事項は「colspan」と同様です。
セルが減ったときのつじつまが合うようにだけ気をつけて下さい(￣▽￣人)
<table border="1">
<tr><td>○</td><td>×</td><td>×</td></tr>
<tr><td>×</td>
<td rowspan=2 colspan=2 >○</td>
</tr>
<tr><td>×</td></tr>
</table>
「rowspan」と「colspan」の両方を指定することにより
縦方向と横方向のセルを結合することもできます。
どうでした？
慣れれば簡単なのですがどうも最初はとっつきにくいようです。
この手段もいろいろ応用できますので
いざと言うときにはこちらまでお越し下さい（笑
では、またあしたー(ﾟ▽^*)ﾉ⌒☆
セルの結合ってどうするのか覚えていますか？
これも知っていると意外と便利ですよ(〃⌒▽⌒)
□ 横方向の結合１
<table border="1">
<tr>
<td colspan=2 >○</td>
<td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
</table>
□ 表示サンプル
○
×
×
○
×
○
×
×
横方向にセルを結合したい場合は「colspan」にて指定します。
この「colspan」に「2」を指定した場合は、セルがテーブルの列を 2 つ使用することを示します。
□ 横方向の結合２
<table border="1">
<tr>
<td colspan=3 >○</td>
</tr>
<tr><td>×</td><td>○</td><td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
□ 表示サンプル
○
×
○
×
○
×
×
同様に「colspan」に「3」を指定した場合は、セルがテーブルの列を 3 つ使用することを示します。
気をつけてもらいたいのは、（当たり前なのですが）セルを結合するとセルの数が一つ減ります。
３つのセルを結合した場合には、２つのセルがなくなっているということを忘れないで下さい。
そうしないといびつな形のテーブルができあがってしまいます(´･ω･`)
□ 縦方向の結合
<table border="1">
<td colspan=3 >○</td>
</tr>
<tr><td>×</td>
<td rowspan=2 >○</td>
<td>×</td></tr>
<tr><td>×</td><td>×</td></tr>
</table>
□ 表示サンプル
○
×
○
×
×
×
縦方向にセルを結合したい場合は「rowspan」を使います。
使用方法や注意事項は「colspan」と同様です。
セルが減ったときのつじつまが合うようにだけ気をつけて下さい(￣▽￣人)
□ 縦と横方向の結合
<table border="1">
<tr><td>○</td><td>×</td><td>×</td></tr>
<tr><td>×</td>
<td rowspan=2 colspan=2 >○</td>
</tr>
<tr><td>×</td></tr>
</table>
□ 表示サンプル
○
×
×
×
○
×
「rowspan」と「colspan」の両方を指定することにより
縦方向と横方向のセルを結合することもできます。
どうでした？
慣れれば簡単なのですがどうも最初はとっつきにくいようです。
この手段もいろいろ応用できますので
いざと言うときにはこちらまでお越し下さい（笑
では、またあしたー(ﾟ▽^*)ﾉ⌒☆
お気に入りの記事を「いいね！」で応援しよう
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
