初心者の為のHTML③ ～理屈よりやってみよう～
次に、簡単な表を作ってみます。
page1.htmlをメモ帳等のテキストエディタで開いてください。
赤字部分を付けたして上書き保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="shift-jis" />
<title>初心者の為のHTML①</title>
</head>
<body>
ここに書いた内容がＷＥＢサイトに表示されます。
<br>
名前
<input type="text" />
<input type="submit" value="更新" />
<table>
<tr>
<td>7/16</td>
<td>7/17</td>
<td>7/18</td>
<td>7/19</td>
<td>7/20</td>
<td>7/21</td>
<td>7/22</td>
</tr>
<tr>
<td>(月)</td>
<td>(火)</td>
<td>(水)</td>
<td>(木)</td>
<td>(金)</td>
<td>(土)</td>
<td>(日)</td>
</tr>
</table>
</body>
</html>
今までより少し長くなりましたが、同じ事を繰り返しているだけで、新しく登場したタグの意味は以下の通りです。
<table>＝表の開始 <tr>＝１行の開始 <td>＝枠の開始 </td>＝枠の終了 </tr>＝１行の終了 </table>＝表の終了
言葉で説明すると少し分かりにくいですが、下図のようなイメージです。
| <table> ↓ |
|||||||||||||||||||||||
| <tr>→ |
|
←</tr> | |||||||||||||||||||||
| <tr>→ |
|
←</tr> | |||||||||||||||||||||
| ↑ </table> |
|||||||||||||||||||||||
表を作る時は今回登場したタグを組み合わせて使う事になります。
線を引いたり、色を付けたり、セルを結合したり、幅や高さを整えたり。
慣れればかなり複雑な表を作る事も出来るようになります★
今はここまで出来ればＯＫです☆
