mamohoのＨＰ作成講座

mamohoのＨＰ作成講座

罫線の幅やセル内の余白を指定しよう

●　セルの罫線の幅やセル内の余白を指定しよう！

テーブルの外枠とセルの間隔や　セルとセルの間隔を指定するには
cellspacing="数値"　　で　指定します
見た目には　テーブルの外枠の線の太さが指定されたようになります

セルの外枠とセルの中の内容との間隔（マージン）を指定するにはcellpadding="数値"　で指定します

文字で書くと　何のことだかわかりませんね（笑）というわけで　ひとつひとつ説明していきます

基本となる表はこれにしましょう

テーブル1 テーブル2
テーブル3 テーブル4

HTMLソースは

<table width="300" border="1">
　<tr>
　　<td align="center">テーブル1</td>
　　<td align="center">テーブル2</td>
　</tr>
　<tr>
　　<td align="center">テーブル3</td>
　　<td align="center">テーブル4</td>
　</tr>
</table>

まず　テーブルの枠線を10にしてみますtable border="10"　ですね

<table width="300" border="10">
　<tr>
　　<td align="center">テーブル1</td>
　　<td align="center">テーブル2</td>
　</tr>
　<tr>
　　<td align="center">テーブル3</td>
　　<td align="center">テーブル4</td>
　</tr>
</table>

すると　下のようになります　以前にやりましたねborder　は　外枠が大きくなります

テーブル1 テーブル2
テーブル3 テーブル4

では　テーブルの枠線の幅を大きくしてみます

<table width="300" border="1"cellspacing="10">
　<tr>
　　<td align="center">テーブル1</td>
　　<td align="center">テーブル2</td>
　</tr>
　<tr>
　　<td align="center">テーブル3</td>
　　<td align="center">テーブル4</td>
　</tr>
</table>

すると　下のようになります　セルの枠線の幅が大きくなりましたね

テーブル1 テーブル2
テーブル3 テーブル4

今度は　セルの枠とセル内の内容の間隔を指定します簡単に言えば　セルと中の内容との余白を入れる感じです

<table width="300" border="1"cellpadding ="10">
　<tr>
　　<td align="center">テーブル1</td>
　　<td align="center">テーブル2</td>
　</tr>
　<tr>
　　<td align="center">テーブル3</td>
　　<td align="center">テーブル4</td>
　</tr>
</table>

すると　下のようになりますセル内の文字のまわりがひろがってますね

テーブル1 テーブル2
テーブル3 テーブル4

© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: