255931

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Oct , 2026
Sep , 2026

Aug , 2026

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 28, 2004

今日も復習がてらテーブルのおさらいをしてみましょう(〃⌒▽⌒)
初めて読む方向けに書きますので・・・
２回目な方はさらーっと読み飛ばしてください。
今回はあまり余分な機能の説明は省いて、テーブルの基本について勉強しましょう(￣▽￣人)
まずはテーブルって何か知ってますか？
英語では「 Table」のように記述します。
おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。
テーブルにはもう一つ意味があり、「表
まずは例を見てもらいましょう。

例）

○	×	○
×	○	×
○	×	×

上記の例では「○×ゲーム」っぽく表（ひょう）を使いましたが、
これを テーブルと呼んでいます。
これから紹介します テーブルタグを使用することによって、
Ｗｅｂページ上でいろいろな表（ひょう）を描画することができるというわけです。
ただ、テーブルには表を描画する以外に、もう一つとてもよく使う使い道があります。
もう一度例を見てください。

例）

○	×	○
×	○	×
○	×	×

テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。

さてテーブルを作る方法ですが、これは少し複雑な記述となっています。
基本的に３つのタグを組み合わせることにより、一つのテーブルを表現します。
逆を言えば、テーブルを構成するタグは３つそろって１セットです。
一つ一つでは意味をなさないことに注意してください。

例）
<table border="1">
<tr><td>名前</td><td>住所</td></tr>
<tr><td>七鍵</td><td>www.7key.jp</td></tr>
</table>

表示結果）

名前	住所
七鍵	www.7key.jp

３つのタグを使っていることは分かってもらえましたか？
順番に解説していきましょう。

<table border="1">～ </table>
で囲まれた範囲は テーブルであることを表しています。
「今からテーブルを記述します」「ここまでがテーブルでした」と宣言を行っているわけですね(￣▽￣人)

<tr>～ </tr>
で囲まれた範囲は一行であることを表しています。
「今から行が始まります」「ここまでで１行は終わりです」と宣言していることになります(〃⌒▽⌒)
ですから、行を増やしたい場合は次のように記述します。

例）
<table border="1">

<tr><td>名前</td><td>住所</td></tr>

<tr><td>七鍵</td><td>www.7key.jp</td></tr>

<tr><td>○○</td><td>××</td></tr>

</table>

表示結果）

名前	住所
七鍵	www.7key.jp
○○	××

そして最後に
<td>～ </td>
で囲まれた範囲は 一ますであることを宣言しています。
ちなみに余談ではありますが、この一ますのことをセルと呼びますので
覚えておくとよいかもしれません(〃⌒▽⌒)
上記例では行を増やしましたので、列を増やす例も紹介しておきましょう。

例）
<table border="1">

<tr><td>名前</td><td>住所</td><td>○○</td></tr>

<tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr>

</table>

表示結果）

名前	住所	○○
七鍵	www.7key.jp	××

見てもらえば分かる通りなのですが「<tr>～</tr>」と「<td>～</td>」を増やすことにより
行や列を増やしたり減らしたりできるというわけです(〃⌒▽⌒)

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Sep 28, 2004 12:13:23 AM
コメント(4) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

Re:タグを覚えよう【第４４回目】　-　テーブルの基礎(09/28)

もとsun さん

七鍵さん、なんてタイムリーな・・・
ここのところページを何とかテンプレでまとめようと四苦八苦しているのです。
どうしても画像が入らないんですよね。
またやってみます！
ありがとうございましたｍ（）ｍ (Sep 28, 2004 06:15:58 PM)

返事を書く

Re[1]:タグを覚えよう【第４４回目】　-　テーブルの基礎(09/28)

＃七鍵さん

もとsunさん

いらっしゃーい(〃⌒▽⌒)

テーブルで細かいデザインをされるのでしたら・・・

<td style="width:99px">
<tr style="height:99px">
<td align="right">
<td valign="bottom">

などを駆使して・・・
後は根性と根気で何とかなると思います（笑
がんばってくださいね(￣▽￣人)

(Sep 28, 2004 06:54:48 PM)

返事を書く

Re:タグを覚えよう【第４４回目】　-　テーブルの基礎(09/28)

な～～るさん

テーブルって以外に一番使いますよね？
重要ですよね？
これ、自由に配置できるようになったら
凄いですよね・・
バランスが整わなくて、四苦八苦・・
思ったとおりに作るのって難しいですね。（*‥*）
(Sep 29, 2004 12:12:35 AM)

返事を書く

Re[1]:タグを覚えよう【第４４回目】　-　テーブルの基礎(09/28)

＃七鍵さん

な～～るさん

いらっしゃーい(〃⌒▽⌒)

>テーブルって以外に一番使いますよね？
私の経験ですが・・・
初心者の頃は何がなんだか分からず作っていました。
自称中級者の頃はテーブルを使いまくって複雑なデザインにこっていました。
自称上級者になると・・・
http://www.7key.jp/hp/_link/5.html
のような感じでどんどんシンプルな作りに（笑
いえいえ、まだまだ自称上級者なだけで
これからが伸び盛りですのでまだ進化するはずです(￣▽￣人)

ただ、テーブルを使ってのデザインって本当に難しいですよね(´･ω･`)
HTMLを書いてるうちにわけわからなくなるし（笑

(Sep 30, 2004 12:19:22 AM)

返事を書く

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧