MitoRoid -CSS-テーブルのデザイン

テーブル全体の子図のデフォルトは(初期設定)は、セル内に含まれるテキストや画像の表示サイズ(幅と高さ)によって自動的に調整されます。

テーブルやセルのサイズを指定する場合は、widthプロパティで横幅をheightプロパティで高さを設定します。

使用例

/*テーブルサイズ*/

table {
  width:500px;
  height:200px;
}

/*セル*/
th(又はtd) {
  width:200px;
}

borderプロパティを利用することで、外枠やセル枠を設定することができます。

使用例(枠線の線種、幅、色を指定)

table {border:solid 1px #777777;}
th {border:solid 1px #777777;}
td {border:solid 1px #777777;}

使用例(枠線が不要)

table {border:none;}
th {border:none;}
td {border:none;}

デフォルト設定では、各セル枠とテーブルの外枠の間には、隙間ができてしまいます。

この隙間を調整するには、border-collapseプロパティを使用します。

使用例

table { border-collapse:collapse}

paddingプロパティを使用するとセル内のパディングが調整することができ、セル内のテキストと枠線との間隔を広げることで、テーブル内の文字が読みやすくなります。

使用例

td { padding:4px;}

セル内のテキストの行を揃えるには、text-alignプロパティを使用します。

使用例

td { text-align:center;}

値	説明
left	左揃えで配置(日本語ブラウザでは標準)
center	中央揃え配置
right	右揃えで配置
justify	均等に割りつけて配置英文の単語間のスペースで調整。日本語で均等に割りつけるにはtext-justifyプロパティも必要です。

セル内のテキストの縦方向の位置指定を行うには、vertical-alignプロパティを使用します。

使用例

td { vertical-align:top;}

MitoRoid