作ってみよう

 Step.10 テーブルを作ろう

 

   
テーブルを作ろう
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓

<table>
<tr><td>黒色</td><td>白色</td></tr>
<tr><td>アクア</td><td>茶色</td></tr>
<tr><td>赤色</td><td>黄色</td></tr>
<tr><td>青色</td><td>緑色</td></tr>
</table>
<br>

<table border="2">
<tr><td>黒色</td><td>白色</td></tr>
<tr><td>アクア</td><td>茶色</td></tr>
<tr><td>赤色</td><td>黄色</td></tr>
<tr><td>青色</td><td>緑色</td></tr>
</table>
<br>
ここまで ↑

</body>

</html>
 タグの説明

 <table></table>は、これに挟まれた範囲がテーブル
 (表)であることを示す基本タグです。

 <tr></tr> テーブルの横一列(行)

 <td></td> セル

 <table border="○○">border属性をつけると枠線を
  表示できます。
  ○○には1以上数字を記入します。










 
   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように 表示されていると思います。
   
 
黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

   
枠線の色を指定したい
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓

<table border="10" bordercolor="green">
<tr><td>黒色</td><td>白色</td></tr>
<tr><td>アクア</td><td>茶色</td></tr>
<tr><td>赤色</td><td>黄色</td></tr>
<tr><td>青色</td><td>緑色</td></tr>
</table>
<br>

<table border="10" bordercolorlight="blue" bordercolordark="yellow">
<tr><td>黒色</td><td>白色</td></tr>
<tr><td>アクア</td><td>茶色</td></tr>
<tr><td>赤色</td><td>黄色</td></tr>
<tr><td>青色</td><td>緑色</td></tr>
</table>
<br>
ここまで ↑

</body>

</html>
 タグの説明

 <table border="○○" bordercolor="●●">
                         
</table>

 <table borde>
  bordercolor属性を付けるとテーブル枠の全体を一色で
 指定できます。

 <table border="○○" bordercolorlight="●●"
 bordercolordark="●●">
</table>

 bordercolorlight・bordercolordark属性を使うと色を使い分
 けて立体的なテーブルを表現できます。


 どちらも○○は1以上の数字、●●
色の指定で
 色指定値
色名で書き込みます。

 今回は上のテーブルは枠線10ピクセル枠の色は緑
 下のテーブルは枠線10ピクセル枠の色は青と黄色で
 作ってあります。

 

   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように 表示されていると思います。
   
 
黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

黒色 白色
アクア 茶色
赤色 黄色
青色 緑色
   
セルの色を指定
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓


<table bgcolor="
lime">
<tr><td>
黒色</td><td>白色</td></tr>
<tr><td>
アクア</td><td>茶色</td></tr>
<tr><td>
赤色</td><td>黄色</td></tr>
<tr><td>
青色</td><td>緑色</td></tr>
</table>
<br>

<table>
<tr bgcolor="
red"><td>黒色</td><td>白色</td></tr>
<tr bgcolor="
yellow"><td>アクア</td><td>茶色</td></tr>
<tr bgcolor="
blue"><td>赤色</td><td>黄色</td></tr>
<tr bgcolor="
green"><td>青色</td><td>緑色</td></tr>
</table>
<br>

<table>
<tr><td bgcolor="
black">黒色</td>
<td bgcolor="
white">白色</td></tr>
<tr><td bgcolor="
aqua"><td>アクア</td>
<td bgcolor="
maroon">茶色</td></tr>
<tr><td bgcolor="
red"><td>赤色</td>
<td bgcolor="
yellow">黄色</td></tr>
<tr><td bgcolor="
blue">青色</td>
<td bgcolor="
green">緑色</td></tr>
</table>
<br>
ここまで ↑

</body>

</html>
 タグの説明

 <table bgcolor="○○"></tablo>
 bgcolor属性でテーブルの背景色を設定できます。


 <tr bgcolor="○○"></tr>
 bgcolor属性で横一列(行)の背景色を設定できます。


 <td bgcolor="○○"></td>
 bgcolor属性でセル一つ一つの背景色を設定できます。

 ○○は色の指定で色指定値色名で書き込みます。

 

 今回は、上テーブルを背景色ライムに
 真ん中のテーブルは横一列(行)の色指定が、行の
 上から赤・黄・青・緑に
 下のテーブルはセル一つ一つに黒・白・アクア・茶・赤・
 黄・青・緑に色指定してあります。
 

 

 

 

 

 

   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように 表示されていると思います。
   
 
黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

黒色 白色
アクア 茶色
赤色 黄色
青色 緑色

 

   

Home  Step.11