ホームページって作ったことありますか?
私は、このブログを書くに当たり、ホームページを表現することば、
HTMLテキストやタグといわれるものを勉強したいと思っています。
今回は、ブログでもよく使うであろう、
表(テーブル)の作り方を学んでいきたいと考えています。
このHTMLテキストは決まったルールで書いていくと、ブラウザ(IEや、Chrome、Firefox、Safariなどのホームページ(ウェブサイト)閲覧ソフト)でちゃんと見ることができる専用の言語(ルール)です。
表(テーブル)を作るには、テーブルタグを使用します。
テーブルタグは、表を作ることができます。
テーブルの中の1つ1つのマス目 である「セル」という部分に、文字や画像などを入れていきます。
テーブルは横方向にセルを増やしていったり、縦方向に段組していく ことができます。
テーブルに border属性を指定しないと枠線は表示されません。
border="0"と指定しても枠線は非表示になります。
■基本的な表(テーブル)の作り方
まず、1マスだけの基本的な
表(テーブル)を作ります。
表(テーブル)を作るには、<table>タグの中に<tr>タグ と<td>タグを記述します。
表(テーブル)の枠線を太くしたい場合はborder="数字"の値を 大きくします。
【ブラウザ表示で表示した場合】
【ソース(実際に書くHTMLテキスト(言語))】
<table border="1"> ………テーブルの枠線の太さ
<tr> ………trはテーブル の行を表します。
<td>セル</td> ………tdはテーブル の列を表し ます。
</tr>
</table>
■横方向にセルを増やしていく表(テーブル)
<td>~</td><td>~</td>のように、<td>タグを横につなげていくことで、横方向にセルを増やしていくことができます。
【ブラウザ表示で表示した場合】
【ソース(実際に書くHTMLテキスト(言語))】
<table border="1">
<tr>
<td>セル1</td><td>セル2</td><td>セル3</td> …横方向にセルが 増えます(1列、2列、3列…)
</tr>
</table>
■縦方向にセルを段組していく表(テーブル)
縦方向にセルを段組していくこともできます。HTMLテキスト(ソース)では、表(テーブル)の1行目の終わりと2行目の初め区切りをわかりやすくするため、
</tr>
<tr>
のように1行以上のスペースを空けます。
【ブラウザ表示で表示した場合】
【ソース(実際に書くHTMLテキスト(言語))】
<table border="1">
<tr>
<td>セル1</td>
</tr>
ここで1行目が終了しセル2は次の行へ段組されます。
<tr>
<td>セル2</td>
</tr>
</table>
■セルに見出しを表示する表(テーブル)
<th>~</th>と書くことで、見出しを表示することができます。
tdとの違いは、セル内の文字がセンタリングされて太字で表示されることです。
【ブラウザ表示で表示した場合】
【ソース(実際に書くHTMLテキスト(言語))】
<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
ホームページ作成専用ソフト(Dreamweaverや、ホームページビルダーなど)を使えば、余程高度なことを表現しなくてもいい場合は、ボタンを押すなどで同様のことを裏側で作ってくれるので、細かいことを覚えなくてもいいのです。
でもブログを書く場合は、HTML言語を使いこなせれば多様な表現も出来そうなので、ぜひ覚えていきたいと思っています。
安価なレンタルサーバー