4
コンピュータ演習Ⅰ Java クラス 課題5 1 / 4 1.表の作成方法 表を作成するには、テーブル要素を設定します。テーブル要素には、表全体の領域を指定する table 要素、表内の行を作成する tr 要素、行を区切るセルを作成する td 要素を組み合わせて、使用す 行を区切るセルのうち、見出しとして使用するセルには th 要素を使う テーブル要素(table 要素、tr 要素、th 要素、td 要素) table 要素の属性 属性名 概要 border 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定 cellpadding セル内の余白を指定する px(ピクセル)、または%で指定 2.テーブル要素の設定(課題) (1) ブラウザで「company.html」を開き、 サンプルの Web ページを確認する (2) メモ帳で「company.html」を開く テーブル要素 <table border="" cellspacing="" cellpadding=""> <tr> <th>見出し 1</th> <th>見出し 2</th> </tr> <tr> <td>内容 1</td> <td>内容 2</td> </tr> </table> border cellspacing cellpadding

border cellspacing cellpadding 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

  • Upload
    ledung

  • View
    223

  • Download
    0

Embed Size (px)

Citation preview

Page 1: border cellspacing cellpadding 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

コンピュータ演習Ⅰ Java クラス 課題5

1 / 4

1.表の作成方法

表を作成するには、テーブル要素を設定します。テーブル要素には、表全体の領域を指定する table

要素、表内の行を作成する tr 要素、行を区切るセルを作成する td 要素を組み合わせて、使用す

行を区切るセルのうち、見出しとして使用するセルには th 要素を使う

テーブル要素(table 要素、tr 要素、th 要素、td 要素)

table 要素の属性

属性名 概要 値

border 表の枠線の太さを指定する px(ピクセル)で指定

cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

cellpadding セル内の余白を指定する px(ピクセル)、または%で指定

2.テーブル要素の設定(課題)

(1) ブラウザで「company.html」を開き、

サンプルの Web ページを確認する

(2) メモ帳で「company.html」を開く

テーブル要素

<table border="値" cellspacing="値" cellpadding="値">

<tr>

<th>見出し 1</th>

<th>見出し 2</th>

</tr>

<tr>

<td>内容 1</td>

<td>内容 2</td>

</tr>

</table>

border

cellspacing

cellpadding

Page 2: border cellspacing cellpadding 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

コンピュータ演習Ⅰ Java クラス 課題5

2 / 4

(3) table 要素を設定する

border 1px

cellspacing 5px

cellpadding 10px

(4) タグの入力が終わったら、上書き保存をする

(5) ブラウザを更新する

表が作成された

Page 3: border cellspacing cellpadding 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

コンピュータ演習Ⅰ Java クラス 課題5

3 / 4

3.画像要素の記述方法

使用できる画像の種類

ファイルの種類 拡張子 特徴

GIF 形式 .gif 使用できる色数は 256 色まで。単純なイラストや色数の

少ないアイコンなどの画像に向いている。透過 GIF とい

う機能で、画像中の特定の色を透明にして保存できる。

JPEG 形式 .jpeg (.jpg) 使用できる色数は 1677 色。グラデーションのあるイラス

トや写真などに向いている。透明化はできない。

PNG 形式 .png 使用できる色数は 1677 色。単純なイラストから写真まで

さまざまな画像に向いている。透明化もできる。

画像要素 (img 要素)

img 要素の属性

属性名 概要 値

src(必須) 画像ファイルを指定する URI で指定

alt 画像の代替テキストを指定する テキストで指定

height 画像の高さを指定する px(ピクセル)または%で指定

width 画像の幅を指定する px(ピクセル)または%で指定

※画像要素は内容を持たない。終了タグもない

画像要素

<img src="値" alt="値" height="値" width="値">

Page 4: border cellspacing cellpadding 表の枠線の太さを指定する px(ピクセル)で指定 cellspacing セルとセルとの間隔を指定する px(ピクセル)、または%で指定

コンピュータ演習Ⅰ Java クラス 課題5

4 / 4

4.画像の挿入(課題)

(1) メモ帳で「company.html」を開く

(2) img 要素を設定する

画像ファイル名 map.png

代替テキスト 地図

(3) タグの入力が終わったら、

上書き保存をする

(4) ブラウザを更新する

画像が挿入された