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

文字サイズを指定する方法には、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; }

広告

関連コンテンツ

投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルの大きさを固定

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

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

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

投稿先： テーブル 最終更新日：2011年 4月 15日

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

テーブルのセル間隔とセル余白は、珍しく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ピクセルにしました。

投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルのセンター揃え

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

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

サンプルコード

<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;
}
投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルの背景画像

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

HTMLによる方法

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

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

一行（横一列）の背景画像を指定する例

<tr background="haikei.gif">（一行のセル）</tr>

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

<th background="haikei.gif">（見出しセル）</th>

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

<td background="haikei.gif">（一つのセル）</td>

ＣＳＳによる方法

例です。
テーブル

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

見出しセル

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

一行（横一列）

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

セル一つ

td { background-image: url(haikei.gif); }
投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルの背景色

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

HTMLによる方法

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

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

一行（横一列）の背景色を指定する例

<tr bgcolor="#0000ff">（一行のセル）</tr>

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

<th bgcolor="#0000ff">（見出しセル）</th>

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

<td bgcolor="#0000ff">（一つのセル）</td>

背景を青にする例です。

ＣＳＳによる方法

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

table { background-color: #0000ff; }

一行（横一列）

tr { background-color: #0000ff; }

見出しセル

th { background-color: #0000ff; }

セル一つ

td { background-color: #0000ff; }
投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルの罫線色

テーブルの罫線色を変える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プロパティの色を変える事により罫線の色を変えられます。

投稿先： テーブル 最終更新日：2011年 4月 15日

テーブルを構成するタグ

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

<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で作ったものをいろいろな所にコピペすると楽でしょう。

投稿先： テーブル 最終更新日：2011年 4月 15日