HTMLでホームページを作る
属性編・・<table>タグの属性、その1

テーブルタグについては、
10.HTMLでホームページを作る。表を作る<table>
11.HTMLでホームページを作る。表の設定<table>
で、説明しています。
「表」を作るタグですね。
このページでは、その「表」をいろいろと設定できる”属性”のお話です。
border、width、height、colspan、rowspanについて。
まず、枠の太さを2とした表を作ってみましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>ページ1</title>
</head>
<body>
<table border="2">
<tr>
<td>あ</td><td>い</td><td>う</td>
</tr>
<tr>
<td>え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>き</td><td>く</td><td>け</td>
</tr>
</table>

</body>
</html>
そうすると、下の様な表になります。

border="2"は、枠の太さが”2”と言うことを表しています。
これをborder="0">とすると、こんなふうになります。
枠線がなくなりました。

表の高さや幅を設定するのは、すでに説明しました。
width=幅、height=高さでしたね。
では、その使用例です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>ページ1</title>
</head>
<body>
<table border="2">
<tr>
<td>あ</td><td>い</td><td>う</td>
</tr>
<tr>
<td>え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>き</td><td>く</td><td>け</td>
</tr>
</table>

<table border="2" width="300" height="200">
<tr>
<td>あ</td><td>い</td><td>う</td>
</tr>
<tr>
<td>え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>き</td><td>く</td><td>け</td>
</tr>
</table>

<table border="2" width="300" height="200">
<tr>
<td width="150" height="100">あ</td><td width="50" height="100">い</td><td height="100">う</td>
</tr>
<tr>
<td width="150">え</td><td width="50">お</td><td>か</td>
</tr>
<tr>
<td width="150">き</td><td width="50">く</td><td>け</td>
</tr>
</table>

</body>
</html>
そして実際にはこんな感じになります。
テーブルタグでは、1枠を”セル”と言います。つまり、<td></td>で囲んだ部分です。
高さや幅は表全体に指定することも出来ますし、セルに(つまり<td>に)指定することも出来ます。

ここまでは、今までお話ししたことの補足です。
さらに、もっと属性が使用できます。
セルを横に結合しちゃうcolspanと、縦に結合しちゃうrowspanがあります。
具体例を見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>ページ1</title>
</head>
<body>
<table border="2">
<tr>
<td>あ</td><td>い</td><td>う</td>
</tr>
<tr>
<td>え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>き</td><td>く</td><td>け</td>
</tr>
</table>

<table border="2">
<tr>
<td>あ</td><td colspan="2">いう</td>
</tr>
<tr>
<td>え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>き</td><td>く</td><td>け</td>
</tr>
</table>

<table border="2">
<tr>
<td>あ</td><td>い</td><td>う</td>
</tr>
<tr>
<td rowspan="2">え</td><td>お</td><td>か</td>
</tr>
<tr>
<td>く</td><td>け</td>
</tr>
</table>

</body>
</html>
実際に表示すると、下のようになります。
いう
rowspan="2"やcolspan="2"の"2"は、結合するセルの数を表します。
3つでも4つでも、セルの数がある分だけ指定できます。
これは、<td>に指定しますが、当然、結合した分だけ<td></td>を減らさなければいけません。
どこで指定して、どこを減らしているか、表とソースをよ〜く見比べてください。


21.HTMLでホームページを作る。属性編・・<table>タグの属性、その2
PC−PARKトップに戻る
心の話サイコロTown!へ






広告 万馬券 無料レンタルサーバー ブログ blog