ホーム > HTML > テーブルのデザイン

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;}

    説明
    top 上揃えで配置
    middle 中央揃え配置
    bottom 下揃えで配置