HOMEPAGEをつくろう!

home paging

HTML編集方法 表編

このページでは、HTML基本構造を製作した後、様々な装飾をつけていくための編集方法をご紹介

HTMLでは、表を作る事が出来ます。縦や横に区切った表を表示します。 セル(ます目)ごとに、大きさを変更したり、表のデザインを設定したりもできます。

【基本HTML】
<table><tr><td>の3つのタグで組まれます。この3つに行や列、などの設定をしていきます。

<table>
<tr>
<td> </td>
</tr>
</table>
【タグの説明】
<table>〜</table> ここに表を作ります。
<tr>〜</tr> 表に行を(横列)を作ります。
<td>〜</td> <tr>〜</tr> の中にセルを作ります。
表の大きさを指定 表の大きさを指定する場合は、<table>の width と、 height を使います。
width 属性で横幅、 height 属性で高さを指定します。 ただし、高さを指定すると後で行を増やすと行の高さが変わってしまうので注意しましょう。
◆HTML
<table width="400"height="200"border="1">
<tr>
<td> </td>
</tr>
</table> 
※ブラウザでみるとこの表です。

【セルの大きさを変更】

セルの場合も同様にwidth="幅" height="高さ" を <td> タグの中に記述します。 ◆HTML
<table border="1">
<tr>
<td width="200" height="100"> </td>
<td width="300" height="100"> </td>
</tr>
</table>
表の枠を指定 表の枠のことをボーダーと呼びます。そのため、<table>タグの中で border="太さ" を指定すると、表の枠の太さが変更できます。
◆HTML
<table border="5">
<tr>
<td> 枠の太さは5に指定しました </td>
</tr>
</table>
枠の太さは5に指定しました 

※ブラウザではこのように表示されます。

【枠のカラーを指定】
枠に色をつける時は半角スペースを空けて bordercolor="色" で色を指定します。

◆HTML
<table border="1" bordercolor="#0000ff">
<tr>
<td> 枠のカラーを青に指定 </td>
</tr>
</table>

◆カラー表

#000000
#808080
#c0c0c0
#ffffff
#0000ff
#008000
#00ffff
#ffff00
#800080
#800000
#ff0000
背景や文字もカラーを指定することが出来ます。

◆背景
<body bgcolor="色の記号">〜</body> ページ背景の色を変えることができます。

◆文字色
<font color="色の記号">〜</font> 文字の色を変えることができます。

pickup

保健科学東日本

2017/8/4 更新

Copyright(c)2014. home paging. All rights reserved.