忍者ブログ

エエもん商店街

賑やかな商店街のように、「これはいいね!」「これ便利!」「これすごくお得!」っていうようなアイテムや掘り出し物、サービスなどをご紹介して参りたいと思います。ぜひご一読ください。

ホームページに表(テーブル)を描いてみる<HTMLテキスト タグ>

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

ホームページに表(テーブル)を描いてみる<HTMLテキスト タグ>


ホームページって作ったことありますか?
私は、このブログを書くに当たり、ホームページを表現することば、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>タグを横につなげていくことで、横方向にセルを増やしていくことができます。
【ブラウザ表示で表示した場合】

セル1 セル2 セル3


【ソース(実際に書く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行以上のスペースを空けます。
【ブラウザ表示で表示した場合】

セル1
セル2


【ソース(実際に書くHTMLテキスト(言語))】

<table border="1">
<tr>
<td>セル1</td>
</tr>
ここで1行目が終了しセル2は次の行へ段組されます。
<tr>
<td>セル2</td>
</tr>
</table>


■セルに見出しを表示する表(テーブル)

<th>~</th>と書くことで、見出しを表示することができます。
tdとの違いは、セル内の文字がセンタリングされて太字で表示されることです。
【ブラウザ表示で表示した場合】

見出し見出し
セル3 セル4

【ソース(実際に書くHTMLテキスト(言語))】
<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
ホームページ作成専用ソフト(Dreamweaverや、ホームページビルダーなど)を使えば、余程高度なことを表現しなくてもいい場合は、ボタンを押すなどで同様のことを裏側で作ってくれるので、細かいことを覚えなくてもいいのです。
でもブログを書く場合は、HTML言語を使いこなせれば多様な表現も出来そうなので、ぜひ覚えていきたいと思っています。

安価なレンタルサーバー

PR

コメント

ただいまコメントを受けつけておりません。

プロフィール

HN:
賢健と横綱
性別:
非公開

P R