テーブルの文字サイズ変更

文字サイズを指定する方法には、HTMLによる方法とCSSによる方法があるのですが、CSSの方が細かく設定できることとメンテナンス性から有利でしょう。

HTMLの方法

font sizeタグで囲う方法

<font size="3">
<table>テーブルの内容</table>
</font>

テーブル全体でも特定のセルだけ囲うのも自由ですが個数が多くなると、メンテナンス性が悪くなりますし、検索エンジン対策上も良くはないです。

CSSによる方法

テーブル全体の文字サイズを16pxとするなら

table{ font-size: 16px; }

特定のセルなら
HTMLファイルで例えばclassをmoji_aとし、文字サイズを16pxとするなら

<td class="moji_a">セルの文字列</td>

CSSは

td.moji_a { font-size: 16px; }

広告

テーブルの大きさを固定

テーブルの大きさを固定する方法について、Dreamweaverの本を読んだり、ネットで探したり、ヘルプで探したりもしたのですが、根本的な解決策は無いようです。

Adobeのフォーラムでは、内包物や見る人の環境によってもテーブルのサイズは変わると書いてありました。
Adobe Forums: テーブルサイズの固定
http://forums.adobe.com/thread/407928?tstart=-1

残念ですが、テーブルを固定しなくてもすむ方法を考えるしかないのかもしれません。

テーブルのセル間隔とセル余白

テーブルのセル間隔とセル余白は、珍しくCSS推奨とはなっていません。HTMLで指定してもよいようです。

セル間隔とセル余白とは

セル間隔とセル余白
テーブルのセル間隔とは、セルの外枠線とその隣り合うセルの外枠線との間の間隔です。tableタグでcellspacing属性として指定します。セル余白とは、例えばセル中の文字のような、コンテンツの占める領域の辺とセルの罫線との間の間隔です。tableタグでcellpadding属性で指定します。

Dreamweaverで設定

テーブル全体を選択することで、プロパティインスペクタから設定することができます。

HTMLで設定

<table cellspacing="1" cellpadding="5">

セル間隔を1ピクセル、セル余白を5ピクセルにしました。

CSSで設定

table {                       /*テーブルタグについて指定*/
    border-spacing:1px;       /*セル間隔を1ピクセル*/
    background-color:#000000; /*背景色を黒にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
    padding:5px;              /*セル余白5ピクセル*/
    border:0px;               /*セルボーダー0ピクセル*/
    background-color:#ffffff; /*セル背景色を白*/
}

こちらもセル間隔を1ピクセル、セル余白を5ピクセルにしました。

テーブルのセンター揃え

テーブルのセンター揃えについてまとめてみました。

テーブル全体を中央配置する方法

サンプルコード

<table align="center">(テーブルの内容)</table>

注意することはテーブルの横に回り込みできないことです。

テーブル中のセルの内容を中寄せする方法

■HTMLによる方法
一行(横一列)

<tr align="center" valign="middle">(一行の内容)</tr>

見出しセル

<th align="center" valign="middle">(見出しセルの内容)</th>

セル一つ

<td align="center" valign="middle">(セル一つの内容)</td>

alignにはleft(左揃え)、center(中央揃え)、right(右揃え)を指定できます。
valignにはtop(上寄せ)、middle(中央揃え)、bottom(下寄せ)、baseline(1行目のベースライン揃え)を指定できます。

■CSSによる方法
一行(横一列)セル

tr {
    text-align: center;
    vertical-align: middle;
}

見出しセル

th {
    text-align: center;
    vertical-align: middle;
}

セル一つ

td {
    text-align: center;
    vertical-align: middle;
}

テーブルの背景画像

テーブルの背景画像は、HTMLではテーブルとセルのbackground属性で変えられます。CSSでの方法が推奨されているので合わせて書いておきます。

HTMLによる方法

テーブル全体の背景画像を指定する例

<table background="haikei.gif">(テーブルの中身)</table>

一行(横一列)の背景画像を指定する例

<tr background="haikei.gif">(一行のセル)</tr>

見出しセルの背景画像を指定する例

<th background="haikei.gif">(見出しセル)</th>

一つのセルの背景画像を指定する例

<td background="haikei.gif">(一つのセル)</td>

CSSによる方法

例です。
テーブル

table { background-image: url(haikei.gif); }

見出しセル

th { background-image: url(haikei.gif); }

一行(横一列)

tr { background-image: url(haikei.gif); }

セル一つ

td { background-image: url(haikei.gif); }

テーブルの背景色

テーブルの背景色はHTMLではテーブルとセルのbgcolor属性で変えられます。CSSでの方法が推奨されているので合わせて書いておきます。

HTMLによる方法

テーブル全体の背景色を指定する例

<table bgcolor="#0000ff">(テーブルの内容)</table>

一行(横一列)の背景色を指定する例

<tr bgcolor="#0000ff">(一行のセル)</tr>

見出しセルの背景色を指定する例

<th bgcolor="#0000ff">(見出しセル)</th>

一つのセルの背景色を指定する例

<td bgcolor="#0000ff">(一つのセル)</td>

背景を青にする例です。

CSSによる方法

CSSによる例です。背景を青にします。
テーブル

table { background-color: #0000ff; }

一行(横一列)

tr { background-color: #0000ff; }

見出しセル

th { background-color: #0000ff; }

セル一つ

td { background-color: #0000ff; }

テーブルの罫線色

テーブルの罫線色を変えるHTMLタグは用意されていますが、ブラウザによっては動作しない場合があります。CSSで変えるオススメの方法をお伝えします。

HTMLで罫線色を指定したときのブラウザによる違い

テーブルの罫線色のブラウザによる違い
ソースコード

/*bordercolorで表全体の罫線の色を指定*/
<table width="100" border="5" bordercolor="#0000FF">
    <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
    </tr>
</table>
<br />
/*bordercolorlightで表全体の罫線のうち左と上の色を指定*/
/*bordercolordarkで表全体の罫線のうち右と下の色を指定*/
<table width="100"  border="5" bordercolorlight="#FF0000" bordercolordark="#0000FF">
    <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
    </tr>
</table>

bordercolorはFirefox以外は正しく表示されるようですが、bordercolorlightとbordercolordarkはIE以外では表示されないようです。

CSSで太さ1pxの罫線を引く方法

テスト テスト
テスト テスト

CSSコードの例

table {                       /*テーブルタグについて指定*/
    border-collapse:separate; /*ボーダーを分離して表示*/
    border:0px;               /*ボーダーを0ピクセル*/
    border-spacing:1px;       /*セル間隔を1ピクセル*/
    background-color:#0000ff; /*背景色を青にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
    padding:5px;              /*セル余白5ピクセル*/
    border:0px;               /*セルボーダー0ピクセル*/
    background-color:#ffffff; /*セル背景色を白*/
}

これで青い1pxの罫線を引くことができます。IEでは少し太めに表示されるかもしれません。

しくみ

テーブルの背景色を青、その上にセルの色を白にして、枠線の部分ではテーブルの背景の色だけ表示しています。テーブルのbackground-colorプロパティの色を変えることにより罫線の色を変えられます。

テーブルを構成するタグ

それでは例としてテーブルを構成するタグを見てみましょう。

<table width="400" border="1" cellspacing="1" cellpadding="5" summary="サマリー">
    <caption>
        キャプション
    </caption>
    <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

Dreamweaverはテーブルでもきれいなタグを作ってくれます。
タグについて簡単に書いておきます。
table テーブル
width 幅
border 外枠線の幅
cellspacing セルの間隔
cellpadding セル内の余白
summary テーブルの概要
caption テーブルのタイトル
tr 行(横一列)
th  行や列の見出し
scope スコープ(適用範囲)
td セル(セル一つ)

&nbsp;はスペースのかわりのようなものです。
colは列
rowは行です
rowとcolがどっちだったか忘れたときは、”row”と”行”の発音が近いことを思い出せれば導けます。

Dreamweaverを手に入れた皆さんは、これから表を作る時、Dreamweaverで作ったものをいろいろな所にコピペすると楽でしょう。