セル内の余白と表示位置を調整する

★paddingで、セル内のパディングを指定できる

例えば、

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

に、　　

　　th { padding : 4px; }

td { padding : 4px; } を指定すると、

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

見やすく変わるのだ

---

★セル内のテキストの行揃え　　text-align

セル内の配置を変えたいとき

右揃え	th { text-align : right ; }
中央揃え	th { text-align : center ; }
左揃え	th { text-align : left ; }
両端揃え	th { text-align : justify ; }

で、指定

---

★セル内のテキストの縦方向の配置　　vertical-align

例えば、

td { vertical-align : top; } でtdセル内は上揃え

上揃え	top
中央揃え	middle
下揃え	bottom

こんなかんじ

---

★テキストの折り返しをなくす

th { white-space : nowrap ; }

テーブルのボーダー(枠線)をデザイン

　　だっ

★枠線の種類・太さ・色

テーブルのボーダーをデザインするには、スタイルシートのborder属性を使う。

例えば、

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

に、

table{ border: solid 2px green ; }
th { border: solid 2px blue ; }
td { border: solid 1px navy ; }

を設定すると、

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

ってなる。

navy みづらいし

---

で、ボーダー間の隙間をなくすのは、

table{ border-collapse : collapse; }

って入れる。

するとこうなる

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

色は揃えてもいいし、変えてもいいし、センスが試されるかんじ

---

セルの隙間を調整するには！

で

例えばセル間に20pxの隙間を入れたいときは、

table { border-collapse : separate ;

border-spacing : 20px ; }

表のテーブル・セルの大きさを指定

テーブルのサイズの初期値：セル内のテキストや画像の大きさにより、自動調整される

で、調整

---

★例えば、テーブル全体の大きさを、幅：200px、高さ：120pxに指定したいときは、

table{ width : 200px;

height : 120px; }

デフォルト　　　　　

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟

調整後

銘柄	産地
土佐鶴	高知
越乃寒梅	新潟