テーブル(table)タグ2｜HTMLタグ・CSS

テーブル(table)タグ2

ここに文字 ここに文字 <table border> <tr> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ 横にセル（文字を書く場所）を増やしました。 文字は<td>の後に書くと表示されます。 <td>の後に文字を書き</td>で閉じます。タグは閉じるのが基本です。 横に増やしたければその後に<td>を増やします。<td>増やしただけ横にセルが増えます。 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ▲上に移動

ここに文字 ここに文字 <table border> <tr> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ 縦にセルを増やしました。 <td>の前に<tr>を書きます。 <tr>増やしてを<td>書くと縦の段が１つ増えます。 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ▲上に移動

ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ 上でやった２つのを組み合わせました。 <tr>で縦の段を作り<td>で横の段を増やします。 </td></tr>とタグを閉じるのを忘れないでください。 ▲上に移動

ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td bgcolor="#ddffee">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ <td>に色を書くとその場所のセルの色が変わります。 <tr>に色を書くと横1列全てがその色になります。 </td></tr>とタグを閉じるのを忘れないでください。 ▲上に移動

ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table border bgcolor="#ffaaaa"> <tr> <td bgcolor="#ddffee">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ <table>に色を書くと全体の色が変わります。 <tr><td>に色を指定していないと<table>の横に書いた色になります。 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table bgcolor="#ffaaaa"> <tr> <td bgcolor="#ddffee">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ borderを消すとこんな感じになります。 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table bgcolor="#ffaaaa" cellspacing=0> <tr> <td bgcolor="#ddffee">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ cellspacing=0を加え0にして枠をなくすとこんな感じになります。 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table cellspacing=5> <tr> <td bgcolor="#ddffee">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に書いてある色を消して枠を透明にします。 cellspacing=5で枠の幅を増やすと透明になった枠の幅が増えるので セルとの間に透明の隙間ができます。 ▲上に移動

ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td bgcolor="#ddffee" rowspan=2>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ rowspan=2を最初のtdの横に書きました。 するとセルの部分が下のセルと１つになりました。 rowspan=2の2は縦の部分２つを結合する効果があります。 数字を増やすとその数だけセルがあれば結合します。 右上の白い部分は結合したのでズレが発生しました。 １段目にtdを増やすと丁度埋まります。 ▲上に移動

ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 <table border> <tr> <td bgcolor="#ddffee" colspan="2">ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr bgcolor="#ddeeff"> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table> 文字で書くと上のようになります↑ ★ colspan="2"を最初のtdの横に書きました。 するとセルの部分が右のセルと１つになりました。 colspan="2"の2は横の部分２つを結合する効果があります。 数字を増やすとその数だけセルがあれば結合します。 右下の白い部分は結合したのでズレが発生しました。 2段目にtdを増やすと丁度埋まります。 ▲上に移動

練習用書き込みフォーム（サンプル表示）