本文の開始

無料ホームページ作成 CSS（スタイルシート）入門 y-labo - CSS（スタイルシート）で表を設定

無料ホームページCSS作成情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net（わいらぼ、ワイラボ）

  • ホームページ制作費を安く・格安・激安！
  • ホームページ制作を早く！
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

3-14）CSS（スタイルシート）で表を設定 CSS（スタイルシート）入門

無料ホームページ作成情報 トップ > CSS（スタイルシート）入門 > 3-14）CSS（スタイルシート）で表を設定

 

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

CSS（スタイルシート）で表を設定について

CSS（スタイルシート）を利用して、表の設定します。

このページで最終的に作成するページの見本は、こちらです。

表の大きさを設定 「width」プロパティ / 「height」 プロパティ

表を設定する<table>タグに「．table-chiba」というクラスを作成して、「width」プロパティと「height」プロパティで設定します。

width：横の広さ
height：縦の高さ

ブラウザ別対応表（width/height）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
width ○ △ △ △ ○ ○ △ ○ ○ ○ ○
height ○ △ △ △ ○ ○ × ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
}

<table class="table-chiba">
・・・
</table>

見本画像

このページのTOPへ

表の枠線を設定 「border」プロパティ / 「border-collapse」プロパティ / 「border-spacing:」プロパティ / 「empty-cells」プロパティ

表を設定する<table>タグに「．table-chiba」というクラスを作成して、またセルを設定する<td>タグに「．td-chiba」というクラスを作成して、「border」プロパティで表の枠線を設定します。

「border」プロパティは、表全体の<table>タグ・セル<td>タグに設定します。

目的に応じて使い分ける必要があります。

例）
border-width: 5px;
border-color: #FF9900;
border-style: solid;

<table>タグ・<tr>タグ・<td>タグすべての設定した例

見本 見本
みほん みほん

<table>タグのみに設定した例

見本 見本
みほん みほん

<td>タグのみに設定した例

見本 見本
みほん みほん

枠線の太さを設定 「border-width」プロパティ

「border-width」プロパティで枠線の太さを設定します。

枠線は、「px」で設定する他に、「thin」で細線、「medium」で中太線、「thick」で太線を設定できます。

例）
border-width: 1px;
border-width: 5px;
border-width: thin; - 細線
border-width: medium; - 中太線
border-width: thick; - 太線

見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
ブラウザ別対応表（border-width）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○

枠線の太さを設定 「border-color」プロパティ

「border-color」プロパティで枠線の色を設定します。

例）
border-color: #FF9900;
border-color: pink;

見本 見本
みほん みほん
見本 見本
みほん みほん
ブラウザ別対応表（border-color）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○

枠線の太さを設定 「border-style」プロパティ

「border-style」プロパティで枠線のスタイルを設定します。

枠線は、「px」で設定する他に、「solid」で実線、「double」で二重線など設定できます。

例）
border-style: solid; - 実線
border-style: double; - 二重線
border-style: dotted; - 点線
border-style: dashed; - 点線（破線）
border-style: groove; - 谷型
border-style: ridge; - 山型
border-style: inset; - 凹型
border-style: outset; - 凸型

見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん
ブラウザ別対応表（border-style）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ △ △ ○ ○ △ ○ ○ ○ ○

上下左右をそれぞれ一括して設定する

「border-width」プロパティ・「border-color」プロパティ「border-style」プロパティで枠線を上下左右それぞれ指定します。

例）

「上」「右」「下」「左」をそれぞれ指定する
border-width: 2px 5px 10px 1px;
border-color: lightblue blue darkblue lightskyblue;
border-style: dotted double solid dashed;

「上」「左右」「下」を指定する
border-width: 2px 5px 10px;
border-color: lightblue blue darkblue;
border-style: dotted double solid;

「上下」「左右」を指定する
border-width: 2px10px;
border-color: lightblue darkblue;
border-style: dotted solid;

見本 見本
みほん みほん
見本 見本
みほん みほん
見本 見本
みほん みほん

上下左右の枠線を一括して指定 「border」プロパティ

「border」プロパティは上下左右の枠線を一括して指定します。

それぞれの値は半角のスペースで区切って入力します。また、順序の自由に入力でき、省略することもできます。但し、省略した値は、標準の値に置き換えられますが、枠線のスタイルを省略すると「none」（枠線なし）になってしまいますので、枠線のスタイルは省略できません。

ブラウザ別対応表（border）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
border: 10px solid #FF6600;

10px
枠線の太さ

solid
枠線のスタイル

#FF6600
枠線の色


例）
border: 10px solid #FF6600;

見本 見本
みほん みほん

上下左右の枠線を個別に指定 「border-*-width」/「border-*-color」/「border-*-style」プロパティ

「border-*-width」/「border-*-color」/「border-*-style」は、それぞれ「-top」「-right」「-bottom」「-left」で個別に指定することもできます。

ブラウザ別対応表（border-*-width）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
-right ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
-bottom ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
-left ○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○
ブラウザ別対応表（border-*-color）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
-right ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
-bottom ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
-left ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○
ブラウザ別対応表（border-*-style）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ○ ○ △ △ ○ ○ × ○ ○ ○ ○
-right ○ ○ △ △ ○ ○ × ○ ○ ○ ○
-bottom ○ ○ △ △ ○ ○ × ○ ○ ○ ○
-left ○ ○ △ △ ○ ○ × ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border-top-width: 3px;
border-right-width: 5px;
border-bottom-width: 3px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: double;
border-bottom-style: solid;
border-left-style: double;
border-top-color: #6699FF;
border-right-color: #339966;
border-bottom-color: #6699FF;
border-left-color: #339966;
}
.td-chiba {
border: 1px dotted pink;
}

見本画像

枠線の表示形式を指定 「border-collapse」プロパティ

「border-collapse」プロパティは枠線の表示方式を指定します。

collapse：隣り合う枠線を重ねて表示
separate：隣り合う枠線を間隔をあけて表示（標準）

ブラウザ別対応表（border-collapse）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ × × ○ ○ × ○ ○ ○ ×

例）
border-collapse: separate;

見本 見本
みほん みほん

border-collapse: collapse;

見本 見本
みほん みほん

このページのTOPへ

表の背景を設定 「background-color」プロパティ / 「background-image」プロパティ

表を設定する<table>タグに「．table-chiba」というクラスを作成して、またセルを設定する<td>タグに「．td-chiba」というクラスを作成して「background-color」プロパティで設定します。

色の指定方法は「1-4）ホームページ上の色」を参照してください。

背景を色で設定する 「background-color」プロパティ

「background-color」プロパティで背景を設定します。

ブラウザ別対応表（background-color）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-color: #CCFFFF;
}
.td-chiba {
border: 1px dotted pink;
background-color: #FFCCFF;
}

<table class="table-chiba">
<tr>
<td class="td-chiba"><p>区名</p></td>
・・・
</tr>
・・・
</table>

見本画像

背景を画像で設定する 「background-image」プロパティ

サンプル画像表を設定する<table>タグに「．table-chiba」というクラスを作成して、「background-image」プロパティで設定します。

背景画像は、そのまま使用すると見本のように、タイルのように並べて表示されます。


ブラウザ別対応表（background-image）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ △ ○ △

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-image: url(image/bg_sample1.gif);
}

<table class="table-chiba">
・・・
</table>

見本画像

「background-repeat」プロパティで背景を画像の繰り返し方法を設定

サンプル画像表を設定する<table>タグに「．table-chiba」というクラスを作成して、「background-repeat」プロパティで設定します。

背景画像は、繰り返し表示されますが、その繰り返し方法を指定します。

値には以下の値を入力します。

repeat-x ： 横方向に並べる
repeat-y ： 縦方向に並べる
no-repeat ：1つだけ表示する
repeat ： タイルのように敷き詰める（標準設定）

ブラウザ別対応表（background-repeat）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-image: url(image/bg_sample2.jpg);
background-repeat: repeat-y;
}

<table class="table-chiba">
・・・
</table>

見本画像

「background-position」プロパティで背景を画像の表示位置を設定

サンプル画像表を設定する<table>タグに「．table-chiba」というクラスを作成して、「bbackground-position」プロパティで設定します。

背景画像は、標準では繰り返し表示されますが、1つだけ表示してそれをどこに表示するかを設定します。

値には以下の値を入力します。


ブラウザ別対応表
横方向 left（左） center（中央） right（右）
縦方向 top（上） center（中央） bottom（下）

例）
background-position: center center; - 横位置「中央」、縦位置「中央」
background-position: right bottom; - 横位置「右」、縦位置「下」
background-position: center; - 横位置「中央」、縦「位置「中央」
background-position: left; - 横位置「左」、縦位置「中央」（省略すると中央になる）
background-position: bottom; - 横位置「中央」（省略すると中央になる）、縦位置「下」

また、ピクセルやパーセンテージで数値を入力することもできます。数値を指定する場合は、左上を基準とします。

例）
background-position: 100px 200px; - 横位置左から「100px」、縦位置上から「200px」
background-position: 30% 50%; - 横位置左上から「30%」、縦位置上から「50%」

ブラウザ別対応表（background-position）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ × △ △ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
}

<table class="table-chiba">
・・・
</table>

見本画像

このページのTOPへ

表の回り込みを設定 「float」プロパティ / 「clear」プロパティ

「float」プロパティを使用すると、表の外の文字の回り込みを設定できます。

left：表を左に配置して、文字などを右に回り込ませる
right：表を右に配置して、文字などを左に回りこませる
none：自動（標準）

ブラウザ別対応表（float）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ △ ○ ○ △ ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
float: left;
}

<table class="table-chiba">
・・・
</table>

見本画像

ボックスの回り込みを解除 「clear」プロパティ

「clear」プロパティは、回り込みを解除します。

left：「float」プロパティの「left」のみ解除
right：「float」プロパティの「rifht」のみ解除
both：「float」プロパティを両方解除
none：回り込みを解除しません

ブラウザ別対応表（clear）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

例）
.float-clear {
clear: both;
}

<p class="float-clear">・・・</p>

見本画像

このページのTOPへ

表周りの余白を設定 「margin」プロパティ

<img>タグに余白を設定します。

余白には、「margin」プロパティと「padding」プロパティの2種類ありますが、表の周りの余白を設定する場合は「margin」プロパティを使用します。

例）
margin: 1px; - 上下左右「1px」
margin: 1px 2px; - 上下「1px」、左右「2px」
margin: 1px 2px 3px; - 上「1px」、左右「2px」、下「3px」
margin: 1px 2px 3px 4px; - 上「1px」、右「2px」、下「3px」、左「4px」

ブラウザ別対応表（margin）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ △ △ △ ○ ○ △ ○ ○ ○ ○

例）
.table-chiba {
height: 300px;
width: 300px;
border: 5px double #6699FF;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
float: left;
margin: 30px;
}

<table class="table-chiba">
・・・
</table>

見本画像

このページのTOPへ

セルの大きさを設定 「width」プロパティ / 「height」プロパティ

セルを設定する<td>タグに「．td-chiba2」「．td-chiba3」というクラスを作成して、「width」プロパティと「height」プロパティで設定します。

width：横の広さ
height：縦の高さ

ブラウザ別対応表（width/height）
  Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
width ○ △ △ △ ○ ○ △ ○ ○ ○ ○
height ○ △ △ △ ○ ○ × ○ ○ ○ ○

例）
.td-chiba2 {
border: 1px dotted lightgreen;
width: 150px;
}
.td-chiba3 {
border: 1px dotted navy;
height: 30px;
}

<table class="table-chiba">
<tr>
<td class="td-chiba3"><p>区名</p></td>
<td class="td-chiba3"><p>人口</p></td>
<td class="td-chiba2"><p>世帯数</p></td>
</tr>
・・・
</table>

見本画像

このページのTOPへ

セル内の文字位置を設定 「text-align」プロパティ / 「vertical-align」プロパティ

セルを設定する<td>タグに「．td-chiba2」「．td-chiba3」というクラスを作成して、「text-align」プロパティと「vertical-align」プロパティ文字の配置で設定します。

「text-align」プロパティは横方向の位置、「vertical-align」プロパティは縦方向の位置を設定します。

セル内の横方向の位置を設定 「text-align」プロパティ

「text-align」プロパティで、文字の下線や取り消し線を設定します。
「text-align」プロパティは以下のように設定します。
「両端揃え」とは、文章の両端を揃える機能ですが、日本語にはうまく動作しません。

値 意味 例
left 左揃え

サンプル・sample
center 中央揃え

サンプル・sample
right 右揃え

サンプル・sample
justify 両端揃え
（justifyあり）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
（justifyなし）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
ブラウザ別対応表（text-align）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ △ ○ ○ ○ ○

例）
.td-chiba {
border: 1px dotted pink;
text-align: center;
}

<td class="td-chiba"><p>中央区</p></td>

見本画像

文章の均等割り付けを設定 「text-justify」プロパティ

「text-justify」プロパティは、英語などの欧文以外の言語で両端揃えを設定するための設定です。

現在は、Internet Explorerのみの対応ですが、今後他のブラウザでも対応される予定です。

また、「text-justify」プロパティは、必ず「text-align: justify;」とセットで使用します。

「text-justify」プロパティはは以下のように設定します。

「両端揃え」とは、文章の両端を揃える機能です。英語でも日本語でもうまく動作します。

日本語の文章の場合は、本来の意味からすると「inter-cluster」が最も適しているようですが、実際には両端揃えされません。「distribute」「newspaper」「kashida」の3つの値でを両端揃えされるはずですが、意味からすると「distribute」が最も適しているようです。

値 意味 例
auto 自動（標準と同じ）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
distribute 単語間隔と文字間隔を調整
（最終行含まない）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
distribute-all-lines 単語間隔と文字間隔を調整
（最終行含む）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
inter-word アジアの言語などの単語間隔を持たない言語向け
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
inter-cluster 日本語・中国語・韓国語など表意文字のテキスト向け
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
inter-ideograp 単語間隔のみを調整
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
newspaper 単語間隔と文字間隔を調整
（アルファベット向け）
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
kashida アラビア文字向け
日本語はうまく両端揃えにはできません。これは、ブラウザとスタイルシートの仕様とも言えます。その為、インターネットエクスプローラーには「text-justify」プロパティが用意されています。
text-align property (justify) is for English paragraphs. If you make Japanese websaite, you do not need to use text-align property (justify) .But if you make websaite that target for only Internet Explorer, you should use text-justify property .
ブラウザ別対応表（text-justify）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ × × × × × × × ○

このページのTOPへ

セル内の余白を設定 「padding」プロパティ

セルを設定する<td>タグに「．td-chiba2」というクラスを作成して、余白を設定します。

余白には、「margin」プロパティと「padding」プロパティの2種類あります。セル内の余白を設定する場合は、「padding」プロパティを使用します。

例）
padding: 1px; - 上下左右「1px」
padding: 1px 2px; - 上下「1px」、左右「2px」
padding: 1px 2px 3px; - 上「1px」、左右「2px」、下「3px」
padding: 1px 2px 3px 4px; - 上「1px」、右「2px」、下「3px」、左「4px」

ブラウザ別対応表（padding）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

例）
.td-chiba2 {
border: 1px dotted lightgreen;
width: 150px;
padding: 10px;
}

<td class="td-chiba2"><p>世帯数</p></td>

見本画像

このページのTOPへ

セル内の自動改行を設定 「white-space」プロパティ

「white-space」プロパティは、セル内の自動改行を設定します。

セルを設定する<td>タグに「．td-chiba」というクラスを作成して、自動改行を設定します。

値 意味 例
normal 標準
標準では文章は自動改行されますが改行を禁止します。
nowrap 自動改行禁止
標準では文章は自動改行されますが改行を禁止します。
ブラウザ別対応表（white-space）
Windows Mac
Internet Explorer Fire
Fox		 Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
○ △ × × ○ ○ △ ○ ○ ○ ○

例）
.td-chiba {
border: 1px dotted pink;
text-align: center;
white-space: nowrap;
}

<td class="td-chiba"><p>中央区</p></td>

このページのTOPへ

CSS（スタイルシート）入門メニュー

このページのTOPへ

格安です！ホームページ制作をご依頼ください！！

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。

このページのTOPへ

CSS（スタイルシート）入門

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229（直通）

【対応時間】

平日のみ（土日祝日はお休み）
午前11時〜午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

無料ホームページ作成

Copyright (C) y-labo.net, All rights reserved.

http://www.hp-workshop.com/

無料ホームページ作成情報のy-labo


当サイトでも利用しているホームページテンプレート・素材です。
ご自分でホームページを作成できる方にオススメ。
品質にこだわったホームページ・映像・サウンド素材
ホームページ素材の他、Flashやロゴもあり。
デザイナーが外国人のため、日本人には好みが分かれます。
ホームページテンプレートならテンプレートモンスタージャパン


ビジネス向けレンタルサーバー（請求書払い）
専用お申込フォームはこちら（3000円割引）

個人＆ビジネス向け。必要な標準機能搭載のサーバー。

□オンラインショップを
格安で開店

□独自ドメイン取得
請求書払いも可。

□ホームページアドレスや
メールアドレスに独自ドメイン。
ページの終了