初心者の為のHTML③ ~理屈よりやってみよう~
次に、簡単な表を作ってみます。
page1.htmlをメモ帳等のテキストエディタで開いてください。
赤字部分を付けたして上書き保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="shift-jis" />
<title>初心者の為のHTML①</title>
</head>
<body>
ここに書いた内容がWEBサイトに表示されます。
<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>=1行の開始 <td>=枠の開始 </td>=枠の終了 </tr>=1行の終了 </table>=表の終了
言葉で説明すると少し分かりにくいですが、下図のようなイメージです。
<table> ↓ |
|||||||||||||||||||||||
<tr>→ |
|
←</tr> | |||||||||||||||||||||
<tr>→ |
|
←</tr> | |||||||||||||||||||||
↑ </table> |
表を作る時は今回登場したタグを組み合わせて使う事になります。
線を引いたり、色を付けたり、セルを結合したり、幅や高さを整えたり。
慣れればかなり複雑な表を作る事も出来るようになります★
今はここまで出来ればOKです☆