Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>表を説明する前に・・・

表を説明する前に・・・

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明
セル セル
セル セル

表ってどんな構成なの?

知ってはいるかと思いますが、右図のように表とは横方向の行と、縦方向の列を枠線で区切られたもので、その中のマス目を「セル」といいます。セルの中に、文字列や画像などを表示します。

基本的な表の構造を知ろう!〜基本要素の簡単な説明〜

はじめに下の記述例を見てください。

記述例
<table>
 <tr>
   <td>セルの内容となる文字や画像1</td><td> セルの内容となる文字や画像2</td>
 </tr>
</table>

表を作るには、青色で表示したタグのように、まず<table></table>で「表をここに作ります!」と宣言します。その中に緑色で表示した行を作成するためのタグ<tr></tr>を入力します。さらに、その中に黄色で表示したセルを作成するためのタグ<td></td>を入力します。そして<td></td>の間に赤色で表示したセルの内容となる文字や画像を入力すれば表の完成です!

では、表示は下の表示例を見てください。(分かりやすいように枠線を表示しています。枠線を表示する場合には、border 属性を使います。)この例では、<table></table>の中に<tr></tr>一組だけで<td></td>が二組なので、表は一行でその中にセルが二つで表示されます。なお、さらに行を増やす場合は<td></td>を含む<tr></tr>を増やしたい行の数だけ入力します。さらに列を増やしたい場合は、すべての<tr></tr>の中に<td></td>を増やしたい数だけ入力します。これらの要素の具体的な説明、表の作成方法は次のページの「表を作成しましょう」で説明しています。

表示例
セルの内容となる文字や画像1 セルの内容となる文字や画像2

表関連の「推奨されない」属性に対応しよう!

表関連の「推奨されない」属性は色々ありますが、当サイトのテーマである「後悔しないホームページ作り」を推進するため、ここによく使われる推奨されない属性と、それに対応できるHTML、CSSを紹介します。
これが表関連の「推奨されない」属性のすべてではありません。

「推奨されない」属性 効果 属性値と「推奨されない」属性の対応できるもの
<table align="属性値">
<caption align="属性値">
表示する位置の指定 align 属性の属性値には「center」(中央揃え)、「left」(左寄せ)、「right」(右寄せ)を指定できます。

- 対応できるもの -
「center」の代わりに表を中央揃えにするには margin-left プロパティ、margin-right プロパティを使い、値を「auto」にします。
「left」、「right」の代わりに、表を右寄せや左寄せにして文章をの回り込ませるには、float プロパティを使いましょう。
<table bgcolor="属性値">
<tr bgcolor="属性値">
<th bgcolor="属性値">
<td bgcolor="属性値">
背景色の指定 bgcolor 属性の属性値には色名カラーコード(16進数)を指定する。

- 対応できるもの -
CSS の background-color プロパティで指定しましょう。
<td width="属性値">
<th width="属性値">
幅の指定 width 属性の属性値にはピクセル数を表す整数を指定する。

- 対応できるもの -
colgroup 要素col 要素の width 属性、もしくは CSS の width プロパティで指定しましょう。
<td height="属性値">
<th height="属性値">
高さの指定 height 属性の属性値にはピクセル数を表す整数を指定する。

- 対応できるもの -
CSS の height プロパティで指定しましょう。

関連情報ページ

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system