はじめてのHTML&CSS入門

テーブルタグ(table / tr / th / td )

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
表組みに必要なテーブルタグを記述しましょう。
講師:
05:31

字幕

このレッスンでは、テーブルタグについて学びます。TABLE タグは表組を作るHTML タグです。チャプター2レッスン7のファイルを開いてみます。ファイナルのファイルでは表組が既に完成されています。それでは、未記入のファイルをSubline Text で開いて早速 TABLE タグを打ち込んでいきましょう。TABLE タグは、まず大きいまとまりとしてTABLE というタグを打っていきます。終了タグは1つの表組について1つがいの TABLE タグですので表が終了した後に終了の TABLE タグを打ち込んでいきます。そして、TABLE タグは少し複雑な構造になっていますので落ち着いて打ち込んでいきましょう。それでは、この開始の TABLE タグの下に改行を入れましてTR というタグを打ちます。これはテーブルの row ということで1行1行を TR というタグで作っていきます。左が見出し、右が表の内容と言ったようなテーブルになっていますので1行のまとまりはこの会社名の下までと、なります。ですので、ここで TR を終了しておきます。同様に、設立というところもありますので同様に TR タグでグループを作っていきます。 資本金のところについても同様に TRTR 閉じを作っていきます。そして、テーブル表組はセルが分かれています。ですので、この会社名にしても会社名のトラベルガイダンスにしても1つ1つのセルに分かれています。ですので、1つ1つのセルという意味を持つタグで囲まなければなりません。まずは、この会社名これは見出しとなるセルという意味を持つタグ、THテーブルヘッドという訳のタグで囲んでいきます。THそして、この見出しに対応するセルの方はテーブルデータセルという訳のTD で包んでいきます。終了も TD です。このように TABLE タグは全体をテーブル1行1行を TRデータセルも見出しが THそして見出しではないデータセルをTD で囲んでいきます。同様に設立の方もマークアップをしていきましょう。設立は見出しになるので THTH を閉じます。そして20XX 年は TDそして行末では必ずタグを閉じておきます。資本金にしても、同様ですね。TH が見出しそして X円は TDで、閉じておきます。一見すると、マークアップのタグが非常に多くなっていますけれども1つ1つのセルの意味を考えればおのずとマークアップのタグが分かると思います。 そして、この状態で一旦保存ですね。上書き保存Mac は Command+SWindows では Control+S を押して上書き保存をしておきましょう。そして、Sublime Text 上で右クリックでコンテキストメニューを開きOpen in Brower で確認をしてみます。そうしますと、TH で囲ってある部分が太字としてそして TD で囲んであるところはノーマルな書体で表示がされています。しかし、ファイナルの方と見比べてみると表が罫線で囲まれています。この罫線を表示するための記述をしなければなりません。それでは Sublime Text に戻ります。この TABLE タグこの TABLE タグの内側にボーダーという属性を付けます。border="1" と記述をします。これはボーダー属性と言ってボーダーを付けるための属性です。こちらで上書き保存をしてもう1度Command+TabWindows は Alt+Tab でアプリケーションの切り替えをしてブラウザに戻り、そしてブラウザをCommand+R、Control+R でブラウザを更新すると今、書いた Border1が反映されています。 以上、テーブルで表組を作るレッスンでした。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日
再生時間:3時間35分 (38 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。