HTML-Table

HTML-Table

triceratops

「htmlって、何？」

そこから僕のHP作りは始まりました。
htmlを勉強しながら、覚えたhtmlの表を作ってみることにしました。
自分がhtmlを忘れないよう祈りながら．．．
僕が実際に使用しているものを中心に表にしてあります。
表内の順番はおおよその覚えた順です。
誤りなどは遠慮無く掲示板かメールにてnamifuku@geocities.co.jpへご連絡ください。

より速く軽いHPを目指すべく、各項目に自分なりのコメントを付けました。
様々なブラウザーのバージョンに対応するために、なるべく少数の共通タグの使用を目標にしております。
参考にしていただければ幸いです。
皆様からのご意見、反論、更なるアイデア、等々お待ちしております。

HTML注意事項

htmlとはhyper text markup languageの略。
htmlは半角英数文字で書く。
htmlのタグ自体に使われる記号<や>等は別のコードで置き換える。
エディタ上での改行をブラウザーは無視する。
半角スペースは何個入れても１文字分になる。
タグの半角英数に大文字と小文字の区別はない。
ファイル名は半角英数にしスペースは用いない。
ファイル名には定められた拡張子をつける。

基礎編

<html>...</html>	挟まれた部分はhtmlで書かれている
<head>...</head>	このページのヘッダ（頭書き）
	基本的にHPに表示されない
<title>...</title>	このページのタイトル（表題）
	通常タイトルバーに表示される
	ブックマークに入る名称
<body>...</body>	このページのボディ（本体）
	<body bgcolor="#...">...</body>	#000000～#ffffffで背景色の指定
	<body background="...">...</body>	...の画像ファイルが壁紙
	<body text="#...">...</body>	#000000～#ffffffで通常の文字色の指定
	<body link="#...">...</body>	#000000～#ffffffで未訪問リンク文字色の指定
	<body vlink="#...">...</body>	#000000～#ffffffで訪問済みリンク文字色 (visited link)の指定
	<body alink="#...">...</body>	#000000～#ffffffでクリックした瞬間の文字色 (active link)の指定

背景色や壁紙（背景画像）、文字色等を指定する場合、文字が見にくくならないように注意が必要です。より見易く読みやすいページを目指しましょう。
背景や文字の色合いは機械（Mac系、Win系など）やモニター（個々の違い、液晶など）によりかなり異なります。多少の色の違いを予想して色指定をしましょう。
色指定における"#......"は16進数で6桁の数字です。この6桁は2桁ずつの3セットから成り、最初の2桁はred; R、中央2桁はgreen; G、下2桁はblue; B、あわせてRGBと成ります。#00が無発色で#ffがその色を最も発色します。
従って、#ff0000：赤色、#00ff00：緑色、#0000ff：青色、と成ります。ちなみに、#000000は無発色で黒色、#ffffffは全発色で白色になります。
ブラウザやユーザーによりデフォルトの文字色指定は異なる場合があります。全く指定しないか、或いは、背景色や文字色なども指定する方が無難でしょう。それには、<body bgcolor="#......" text="#......" link="#......" vlink="#......" alink="#......">、としましょう。

基本編

<!--...-->	ブラウザーは無視する自分のための注釈文や補足に使える
<br>	改行
<p>...</p>	改段落、段落指定 (paragraph)
	<p align=left>...</p>	この段落は左寄せ
	<p align=center>...</p>	この段落は中央寄せ
	<p align=right>...</p>	この段落は右寄せ
<a href="...">...</a>	...をクリックで...ファイルへ飛ぶ、リンクする
<a href="mailto:...">...</a>	...をクリックで...メールアドレスへメールを送る

ブラウザによってはmailタグに対応していないため、<a href="mailto:...">...</a>で挟まれて表示される文には「ここ」等ではなく、メールアドレスを用いる方が良い。
- 悪い例：<a href="mailto:namifuku@geocities.co.jp">ここ</a>にメールしてね
- 良い例：<a href="mailto:namifuku@geocities.co.jp">namifuku@geocities.co.jp</a>にメールしてね

<img src="...">	...という画像image sourceを表示
	<img src="..." alt="...">	画像表示しない場合の代わりの表示文字
	<img src="..." width=... height=...>	表示画像の幅widthと高さheightをそれぞれ...ピクセル数で指定

画像表示タグは<img src="..." alt="..." width=... height=...>と用いるのが望ましい。
ブラウザの設定で画像表示をオフにしている人はalt="..."を見ることが出来る。
width=... height=... 指定がないと、ブラウザが情報を読み込まないとそれ以降の表示をしない場合があり、結果としてHPの表示は遅くなる。
より速いHPのためにはwidth=... height=... を指定する方が無難である。
幅・高さのピクセル数は対象画像ファイルをブラウザなどで開けばわかると思います。

ちょっとだけ応用編

挟まれた範囲は	<left>...</left>	左寄せ
	<center>...</center>	中央寄せ
	<right>...</right>	右寄せ
文字の修飾	<b>...</b>	強調文字 (bold)
	<i>...</i>	斜体文字 (italic)
	<u>...</u>	下線文字 (underline)
特殊文字の代替コード	&	&
	<	<
	>	>
	"	"
<hr>	横線を引く (horizontal rule)

文字修飾には点滅文字もありますが、非常に読みにくく、HPの表示に負荷がかかりますので、使用しない方がよいでしょう。更に、ブラウザーにより対応していなかったり、点滅文字の次の文字が隠れて見えなくなることも問題です。点滅文字は読みやすいですか？それとも読みにくいですか？こんな感じになります。「こんな感じ」の「こ」の字が隠れてませんか？

表の作り方 (table)

<table>...</table>	挟まれた領域は表（境界線無し）
	<table border>...</table>	境界線が有る表(border)
<caption>...</caption>	挟まれた部分が表のタイトル
<td>...</td>	挟まれた部分が１つのセル（横に連なる）
	<td colspan=...>...</td>	このセルが横...個分のセルにまたがる
	<td rowspan=...>...</td>	このセルが縦...個分のセルにまたがる
<th>...</th>	見出し（td同様に用い太字で中央に表示）
<tr>...</tr>	挟まれた領域が横１行（改行）

tableタグは非常に便利であります。
しかし大きな表はHPを非常に重く遅くします。
一つの表の全ての情報を読み込まなくては表示開始できませんし、表示のためにはコンピューターが時間をかけて表の形を計算して決定しなくてはなりません。
小さくてセルが少なく単純な表は良いですが、大きい表の場合は、表を複数に分割するか、箇条書き(list)タグを用いましょう。
陥りがちな失敗はリンクのページです。
多数のHPの紹介やリンクが一つの巨大なtableにならないように注意しましょう。
このページの文章ソースを参照してください。

入力フォーム (form) アンケートやメッセージの送信（受信）が可能です。

<form>...</form>	挟まれた領域がフォームです
<form action="mailto:..." method=post>...</form>	メールアドレス...に情報をメール送信するフォーム
<input type="radio" name="..." value="...">	１つの選択ボタン	nameの...に質問、valueの...に選択肢で、質問＝選択肢、というメールを送信
<input type="checkbox" name="..." value="...">	複数の選択ボタン
<input type="text" name="...">	１行分の文字入力フィールド	nameの...＝入力内容、というメールを送信
<textarea name="..." rows=... cols=...>...</textarea>	rowの...行、colsの...文字の大きさのスクロールできる文字入力フィールドで、フィールド内にタグ間の...を表示
<input type="submit" value="...">	...という表示の、送信ボタン
<input type="reset" value="...">	...という表示の、リセットボタン

ブラウザーの設定が出来ていないと送信できないので、フォーム送信をしたつもりで送られていないケースがあります。送る側も受け取る側も気を付けましょう。
メール形式で送られてくるフォーム送信内容はURL形式のため、全角文字が文字化けするでしょう。その場合は変換ソフトが必要です。フリーソフトもありますよ。
恐竜育成コーナーの文章ソースを参照してください。

箇条書き (list)

<ol>...</ol>	挟まれた範囲は番号有りのリスト (ordered list)
<ul>...</ul>	挟まれた範囲は番号無しのリスト (unordered list)
<lh>...	このタグ以降がリストのヘッダ (list header)
<li>...	このタグ以降がリストの項目 (list item)

listタグはリストの中にリストを入れることが可能です。
このページとリンクのページの文章ソースを参照してください。

HPの表紙に戻る

このホームページは

の善意により提供されています。
あなたも自分自身のホームページを無料で作ってみませんか。