テーブル

テーブルとは簡単に言うと表のことです。
コツをつかめば簡単なのでぜひ実際に作ってみてください。
枠線を表示しないでレイアウトに使うことも多いです。(参照:[レイアウト>>テーブルを使ったレイアウト]

下の作成例を見てください。
<table></table>で囲んだところがテーブルになります。
<tr></tr>で囲んだところが横一行になり、
<td></td>で囲んだところが1マスになります。
この1マスをセルといいます。
※下の例では分かりやすいように色をつけてます。

テーブルの作り方

<table>
<tr><td></td><td>Aさん</td><td>Bさん</td></tr>
<tr><td>年齢</td><td>20歳</td><td>30歳</td></tr>
<tr><td>血液型</td><td>A型</td><td>B型</td></tr>
<tr><td>誕生日</td><td>4/23</td><td>2/9</td></tr>
</table>
AさんBさん
年齢20歳30歳
血液型A型B型
誕生日4/232/9

これからはテーブルに関する設定についてです。

テーブルの枠線・大きさ・背景色・画像

<table border="2px" bordercolor="blue" width="100px" height="200px" bgcolor="red" background="abc.jpg">
※実際作る時は必要なものだけ書いてください。
border:枠線の太さ。これを「0」にすれば枠線なしになります。
bordercolor:枠線の色
width:テーブルの横幅
height:テーブルの高さ
bgcolor:背景色
background:背景画像

横一行の背景を指定

<tr bgcolor="blue">(色)
<tr background="abc.jpg">(画像)

セルの背景を指定

<td bgcolor="blue">(色)
<td background="abc.jpg">(画像)

セルとセルの間隔を指定

<table cellspacing="10px">
※一番上にあるテーブルと比較してみてください。
AさんBさん
年齢20歳30歳
血液型A型B型
誕生日4/232/9

セル内の余白を指定

<table cellpadding="10px">
※一番上にあるテーブルと比較してみてください。
AさんBさん
年齢20歳30歳
血液型A型B型
誕生日4/232/9

セルの大きさを指定

<td width="100px" height="200px">
width:セルの幅
height:セルの高さ

セルを結合する

<table border=1 width=180>
<tr><td></td><td></td><td>Aさん</td><td>Bさん</td></tr>
<tr><td rowspan="2">視力</td><td>右</td><td>1.5</td><td>0.3</td></tr>
<tr><td>左</td><td>1.0</td><td>0.1</td></tr>
<tr><td colspan="2">体重</td><td>60kg</td><td>63kg</td></tr>
</table>

rowspan:縦方向に結合するセルの数
colspan:横方向に結合するセルの数
AさんBさん
視力1.50.3
1.00.1
体重60kg63kg
タグ辞典 HTML・CSSを網羅!!おすすめ!!↓
★★★★★
HTML(エイチティエムエル)+CSS
HTML(エイチティエムエル)+CSS handbook2nd edit

↓ぜひ感想をお願いします。(管理人が跳んで喜びます!!不満点などでも結構です。)
分かりやすかった 難しかった
メールアドレス:(書かなくてもいいです。)
感想・要望などあればひとことよろしくお願いします。
ぜひ作ったホームページのアドレスを教えてください!!
【特集】おすすめ!接続料金をタダに!
A8.net Click Here!
ホームページ用の広告を配信しているサイトです。わたしはこのサイトを含め2つホームページに広告を貼っていますが、らくらく接続料金ぐらいは報酬をいただいています。これが楽しみのひとつにもなってます!