東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

7.2 テーブルの詳細設定

テーブルの詳細設定

7.2 テーブルの詳細設定

続いて、先ほど作成したテーブルの枠線や区切り線、また、セルの内側の余白の幅を太くするなどの細かな設定を追加していきます。

ここでは、色々な形のテーブルを作成していきながら、テーブルの基本構造を学んでいきます。

図 7.2.1

1. テーブルの枠線の幅を変更

まず、先ほど作成したテーブルの枠線の幅を太くします。

先ほど作成したソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table1.css

➢ table1.css

@charset "UTF-8";

table {
    border: 10px solid gray;
}
td {
    border: 1px solid gray;
}
        

4行目のborder: 1px solid gray;を、border: 10px solid gray;に書き換えます。

書き換えたら、上書き保存しましょう。

border: ★pxの「★」は、枠線を表示させるために使用するプロパティです。

★に入る数字は、ピクセル数の指定です。今回、この数字を1から10に変えましたが、この数値が大きくなればなるほど、枠線の幅が太くなります。

保存したら、ブラウザでどのように表示されるかを確認してみましょう。

図 7.2.2

テーブルの枠線が、太く(10ピクセルの太さで)表示されているのがわかります。

2. セルの区切り線(間隔)の幅を変更

続いて、セルとセルを区切る線の幅を広くしてみます。

先ほど作成した[table1.css]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table1.css

➢ table1.css

@charset "UTF-8";

table {
    border: 10px solid gray;
    border-spacing: 10px;
}
td {
    border: 1px solid gray;
}
        

保存したら、ブラウザで表示してみましょう。

図 7.2.3

セルの区切り線が太くなっているのがわかります。「 border-spacing: ★px;」というプロパティを指定することで、セルの区切り線の幅を指定しました。★に入る数字は、ピクセル数の指定です。

◉ピクセルとは

ディスプレイ上の画面を構成する最小単位の点をピクセルと呼びます。デジカメなどに良く使う画素とほぼ同じ意味になります。
パソコンの画面を拡大していくと、将棋盤のようにマス目になっています。このマスのことをピクセルと呼び、1マスであれば1ピクセルと表現します。

3. セルの内側の余白を変更

続いて、セルの内側の余白(パディング)を指定していきます。

<td>タグに「 padding: ★px 」というプロパティを設定すると、表の各セル内の余白を調整することができます。

先ほど作成した[table1.css]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table1.css

➢ table1.css

@charset "UTF-8";

table {
    border: 10px solid gray;
    border-spacing: 10px;
}
td {
    border: 1px solid gray;
padding: 10px;
}
        

保存したら、ブラウザで表示してみましょう。

図 7.2.4

それぞれのセル内の余白が広くなっているのがわかります。「padding: ★px」というプロパティを指定することで、セルの区切り線の幅を指定しました。★に入る数字は、ピクセル数の指定です。

NEXT>> 7.3 複数の行や列にまたがるセル

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.