§07-10…表のサイズ
(01) 表のサイズを指定することができます。今回は15文字分にしましょう。CSSを以下のように追加・更新してからブラウジングしてください。 table{ border:thin solid #000000; border-spacing:0; width:15em; } (02) 表の幅はウィンドウに対する比率で指定することもできます。...
§07-09…行内の上下寄せ{vertical-align}
(01) class属性が「midasi」であるtr内の文字を下に寄せましょう。上下の配置を指定するには「vertical-align」プロパティを指定します。値には「top(上寄せ)」「bottom(下寄せ)」が使えます。「tr.midasi」に関するCSSを以下のように更新してからブラウジングしましょう。 tr.midasi{ height:4em;...
§07-08…高さ{height}
(01) 表内の各行の高さを2文字分にします。高さを変更するのは「height」プロパティです。以下のようなCSSを追加・更新してからブラウジングしましょう。 tr{ height:2em; } (02) 次にclass属性が「midasi」のtrのみ4字分の高さにします。以下のCSSを追加・更新してからブラウジングしましょう。 tr.mi...
§07-07…子孫セレクタ
(01) 2個目の表のtableタグにclass属性「nikome」を付加してください。 <table summary="発売予定の書籍価格表2" class="nikome"> <tr> <th>書籍</th><th>価格</th><th>発売日</th>...
§07-06…見出しセルの使用＜th＞
(01) 同じような書式の表を、class属性を使わずに作成します。「table」「tr」タグに関しては同じですので、body内部を以下のように更新しておきましょう。「th」タグ内の文字は太字・中央揃えで表示されます。 <body> <h1>表の練習</h1> <table summary="発売予定の書籍価格...
§07-05…セル内の色を変更する
(01) 次に1行目のフォントの色を青にしてみましょう。これまでの技術の復習になります。1行目だけ特殊な設定をするので、1行目にclass属性を付加します。「midasi」というクラスを付加してから更新してください。 <table summary="発売予定の書籍価格表"> <tr class="midasi"> <td&...
§07-04…罫線間の空白
(01) 表内における罫線間の空間は「border-spacing」プロパティで設定します。CSSファイルを以下のように更新してから、Webページをブラウジングしてください。 table{ border:thin solid #000000; border-spacing:0; } (02) 完成しました。
§07-03…表とセルの罫線
(01) まずは表の外枠罫線を引きます。罫線の処理はその他の要素と同様、「border」プロパティで設定します。CSSファイルに以下のような書式情報を追加・更新してから、Webページをブラウジングしてください。 table{ border:thin solid #000000; } (02) 続けて、表内にも罫線を設定します(赤)。セルに対して「...
§07-02…表の作成の基本＜table＞＜tr＞＜td＞
以下のような表を作成する予定です。 書籍 価格 発売日 ゴルフ入門 630 3/24 経済ガイド 840 3/23 少年野球 735 3/26 (01) 表をあらわすHTMLタグは「table」タグです。tableタグで表の開始から終わりまでを指定します。Webページのbody部を以下...
§07-01…表1・準備
(01) 次のようなソースのWebページ「re06.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" x...