このページの短縮URL(リンク用) 第07章:表1 – オンライン無料パソコン講座 | PCセミナー

第07章:表1

第07章:表1」の学習内容です。

§07-01…表1・準備

(01) 次のようなソースのWebページ「re06.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PU...

§07-02…表の作成の基本<table><tr><td>

以下のような表を作成する予定です。 書籍 価格 発売日 ゴルフ入門 630 3/24 経済ガイド 840 3/23 少年野球 735 3/26 (01) 表をあらわすHTMLタグは「table」タグです。tableタグで...

§07-03…表とセルの罫線

(01) まずは表の外枠罫線を引きます。罫線の処理はその他の要素と同様、「border」プロパティで設定します。CSSファイルに以下のような書式情報を追加・更新してから、Webページをブラウジングしてください。 tabl...

§07-04…罫線間の空白

(01) 表内における罫線間の空間は「border-spacing」プロパティで設定します。CSSファイルを以下のように更新してから、Webページをブラウジングしてください。 table{ border:thin sol...

§07-05…セル内の色を変更する

(01) 次に1行目のフォントの色を青にしてみましょう。これまでの技術の復習になります。1行目だけ特殊な設定をするので、1行目にclass属性を付加します。「midasi」というクラスを付加してから更新してください。 &...

§07-06…見出しセルの使用<th>

(01) 同じような書式の表を、class属性を使わずに作成します。「table」「tr」タグに関しては同じですので、body内部を以下のように更新しておきましょう。「th」タグ内の文字は太字・中央揃えで表示されます。 ...

§07-07…子孫セレクタ

(01) 2個目の表のtableタグにclass属性「nikome」を付加してください。 <table summary="発売予定の書籍価格表2" class="nikome"> <tr> <...

§07-08…高さ{height}

(01) 表内の各行の高さを2文字分にします。高さを変更するのは「height」プロパティです。以下のようなCSSを追加・更新してからブラウジングしましょう。 tr{ height:2em; } (02) 次にclass...

§07-09…行内の上下寄せ{vertical-align}

(01) class属性が「midasi」であるtr内の文字を下に寄せましょう。上下の配置を指定するには「vertical-align」プロパティを指定します。値には「top(上寄せ)」「bottom(下寄せ)」が使えま...

§07-10…表のサイズ

(01) 表のサイズを指定することができます。今回は15文字分にしましょう。CSSを以下のように追加・更新してからブラウジングしてください。 table{ border:thin solid #000000; borde...