![](../gif/space.gif) |
![](../gif/l-leaf_tl.gif) |
![](../gif/space.gif) |
![](../gif/l-leaf_tr.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
☆テーブル(表)を作ってみよう - クイックガイド
![](../gif/space.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
![](../gif/l-donguri.gif) |
腹減り日誌♪ - donguri browser |
![](../gif/space.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
日数 |
目標 |
結果 |
1日目 |
3食 |
6食 |
2日目 |
2食 |
8食 |
|
![](../gif/space.gif) |
![](../gif/space.gif) |
|
|
|
![](../gif/l-leaf_bl.gif) |
![](../gif/space.gif) |
![](../gif/l-leaf_br.gif) |
テーブル(表)なんてデータ集計するわけでもないし
必要ないって思う人もいるかと思うけど
実際多くのホームページで使われてるんだ。
このページでも見えないだけで実は使ってる。
詳しい事はこの後の回で説明していくけど
表の枠線を消して使うことで
レイアウトにも応用できるってことを憶えておいてね。
テーブルの各部の呼び方を説明するね。
人によって呼び方が違ったりするけど
(実際ホームページ作成ソフトなんかだと呼び方もまちまち)
この講座ではこの呼び方で統一するよ。
データ1 |
データ2 |
![](../gif/l-kado_tl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_tr.gif) |
![](../gif/space.gif) |
枠の中の1つ1つをセル (もしくはデータセル)というよ。 |
![](../gif/space.gif) |
![](../gif/l-kado_bl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_br.gif) |
|
|
|
データ1 |
データ2 |
データ3 |
データ4 |
データ5 |
データ6 |
|
![](../gif/space.gif)
![](../gif/l-fukidashi_l.gif) |
![](../gif/l-kado_tl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_tr.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
データ1〜データ3の横列の組みをテーブルの行、
データ3、データ6の縦列の組みをテーブルの列と言うよ。
同じようにデータ4〜6も行、データ1、4、データ2,5も列と言えるね。 |
![](../gif/space.gif) |
![](../gif/l-kado_bl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_br.gif) |
|
テーブルは今までのように1つのタグだけで作るってわけにはいかない。
最低でも3つのタグが必要なんだ。
最初は難しいかもしれないけど
慣れれば簡単になると思うから
何度もやってみることが大切だよ。
ではタグを紹介していこう。
まずはテーブルの土台となるタグが必要だね。
![](../gif/space.gif) |
『ここからがテーブル』という意味のタグは<table>だよ。 |
このタグから終了タグの</table>までがテーブルの範囲になる。
他のテーブル関係のタグはこの間に書き込むんだよ。
続いて<table>の属性を1つ紹介。
![](../gif/space.gif) |
枠線を指定する属性名はborderだよ。 |
borderの属性値は半角数字で指定するんだけど、
0を指定すると枠線が表示されないので
最初のうちはわかりやすいように1以上の数字を指定しておいてね。
![](../gif/l-source.gif) |
|
<html>
<head>
<title>腹減り日誌♪</title>
</head>
<body>
<table border="1">
</table>
</body>
</html> |
![](../gif/space.gif) |
![](../gif/space.gif) |
|
|
表示はされないけどイメージとしてはこんな状態。 |
|
では次はテーブルの行を作るタグを紹介。
![](../gif/space.gif) |
『ここからがテーブルの行』という意味のタグは<tr>だよ。 |
これを<table>〜</table>の間に書き込むよ。
今回は2行のテーブルを作ってみよう。
![](../gif/l-source.gif) |
|
<html>
<head>
<title>腹減り日誌♪</title>
</head>
<body>
<table border="1">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html> |
![](../gif/space.gif) |
![](../gif/l-fukidashi_l.gif) |
![](../gif/l-kado_tl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_tr.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
2行にするので<tr>〜</tr>を2組書き込んだよ。
やっぱりテーブルはまだ表示されないけどね |
![](../gif/space.gif) |
![](../gif/l-kado_bl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_br.gif) |
![](../gif/space.gif) |
|
|
表示はされないけどイメージとしてはこんな感じ。
<tr>で表の行を作った状態だよ。 |
|
最後にセルを作るタグを紹介するね。
![](../gif/space.gif) |
『ここからがセル』という意味のタグは<td>だよ。 |
これを<tr>〜</tr>の間に書き込むよ。
今回は3列のテーブルを作ってみよう。
それと<td>〜</td>の間には
セルに表示させたい文字などを書き込むよ。
![](../gif/l-source.gif) |
|
<html>
<head>
<title>腹減り日誌♪</title>
</head>
<body>
<table border="1">
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</table>
</body>
</html> |
![](../gif/space.gif) |
![](../gif/l-fukidashi_l.gif) |
![](../gif/l-kado_tl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_tr.gif) |
![](../gif/space.gif) |
![](../gif/space.gif) |
各<tr>〜</tr>の間に3つずつセルを作ったよ。 |
![](../gif/space.gif) |
![](../gif/l-kado_bl.gif) |
![](../gif/space.gif) |
![](../gif/l-kado_br.gif) |
![](../gif/space.gif) |
|
|
イメージとしては<td>で各セルに分けた感じだね。 |
|
腹減り日誌♪ - |
![](../gif/l-preview.gif) |
|
|
データ1 |
データ2 |
データ3 |
データ4 |
データ5 |
データ6 |
|
![](../gif/space.gif) |
|
ブラウザでの表示は
こちら(別ウィンドウ)
![](../gif/c-risu-b2.gif) |
次は表の背景色の指定だよ。
|
![](../gif/space.gif) |
前回はリンクの色の指定だったね。
|