1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. テーブル
枠線の太さ、色、種類 |  枠線の表示・非表示 |  回り込みを指定 |  width、height |  margin |  最大、最小を指定 |  表示方法を指定 |  文字の表示位置 |  自動改行を禁止 | 
テーブル(table、tr、td要素やth要素)
table、td要素やth要素 枠線の太さ、色、種類をひとまとめに指定
table, td, th {
border: 2px red solid;
}
ああああああ
ああああああ
・table要素とtd要素、th要素に指定した場合
table, td, th { border: 2px #808080 solid; }
・table要素に指定した場合
table { border: 2px #808080 solid; }
・td要素とth要素に指定した場合
td, th { border: 2px #808080 solid; }
border-collapse 表の枠線の表示方法を指定
・table要素に適用
table {
border: 2px #000000 solid;
border-collapse: collapse;
}
ああああああ
ああああああ
ああああああ
ああああああ
・border-collapse
collapse (隣の枠線と重ねて表示)
separate (隣の枠線と間隔をあけて表示)デフォルト
border-color 枠線の色を指定
border-color 上下左右をまとめて指定
div {
border-width: thick;
border-color: red;
border-style: solid;
}
border-color: #85b9e9; [上下左右] を指定
border-color: #85b9e9 #bde9ba; [上下] と [左右] を指定
border-color: #85b9e9 #bde9ba #ffd37d; [上] と [左右] と [下] を指定
border-color: #85b9e9 #bde9ba #ffd37d #d1d1d1;[上] と [右] と [下] と [左] を指定
ああああああ
ああああああ
border-top-color 上下左右を個別に指定(top、right、bottom、left)
p {
border-width: thick;
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
border-style: solid;
}
border-spacing セルの枠線の間隔(間隔の大きさ)を指定
・table要素に適用(border-collapse プロパティで separate(間隔をあけて表示)が設定されている場合に有効)
table {
border: 2px #000000 solid;
border-spacing: 10px;
}
ああああああ
ああああああ
border-spacing: 5px; … [上下左右] を指定
border-spacing: 5px 10px; … [左右] と [上下] を指定
border-style 枠線の種類を指定
border-style 上下左右をまとめて指定
div {
border-width: thick;
border-color: red;
border-style: solid;
}
border-○○-style 上下左右を個別に指定します。(top、right、bottom、left)
p {
border-width: medium;
border-color: red;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}
solid(普通の線)
double(二重の線)
groove(谷型の線)
ridge(山型の線)
inset(凹型)
outset(凸型)
dotted(点線)
dashed(大きい点線)
none(線なし他要素優先)
hidden(線なし自要素優先)
border-style: solid; [上下左右] を指定
border-style: dashed double; [上下] と [左右] を指定
border-style: dashed double dotted; [上] と [左右] と [下] を指定
border-style: solid dashed double dotted; [上] と [右] と [下] と [左] を指定

border-○○-style 上下左右を個別に指定
border-top-style 上の枠線を指定
border-right-style 右の枠線を指定
border-bottom-style 下の枠線を指定
border-left-style 左の枠線を指定
border-width 枠線の太さを指定
border-width 上下左右をまとめて指定
div {
border-width: medium thin;
border-color: #000000;
border-style: solid;
}
border-○○-width 上下左右を個別に指定(top、right、bottom、left)
p {
border-top-width: 3px;
border-right-width: 6px;
border-bottom-width: 9px;
border-left-width: 12px;
border-color: #000000;
border-style: solid;
}
・太さの指定 数値+単位(px、他)
thin 細い線
medium 中間の太さ(デフォルト)
thick 太い線

・上下左右をまとめて指定
border-width: 5px; [上下左右] を指定
border-width: 5px 10px; [上下] と [左右] を指定
border-width: 5px 10px 15px; [上] と [左右] と [下] を指定
border-width: 5px 10px 15px 20px; [上] と [右] と [下] と [左] を指定

・上下左右を個別に指定
border-top-width 上の枠線を指定
border-right-width 右の枠線を指定
border-bottom-width 下の枠線を指定
border-left-width 左の枠線を指定
空白セルの枠線の表示・非表示を指定(table、td要素やth要素にこのスタイルを設定)
border-collapse プロパティで separate(間隔をあけて表示)が設定されている場合に有効
table {
empty-cells: hide;
}
あああ
あああ
show (空白セルの枠線を表示します)デフォルト
hide (空白セルの枠線を表示しません)
float 回り込みを指定
#example {
float: left;
}
あああ
いいい
ううう
えええ
おおお
left (表を左に配置・テキストなどを右側に回り込ませる)
right (表を右に配置・テキストなどを左側に回り込ませる)
none (指定なし)デフォルト
clear 回り込みを解除
.example {
clear: both;
}
left (表の右側にある回り込みを解除)
right (表の左側にある回り込みを解除)
both (どちらの回り込みも解除)
none (解除しない)デフォルト
width 横幅、height 高さを指定
table {
width: 300px;
height: 200px;
}
td {
width: 100px;
height: 50px;
}
margin マージン(余白)を指定
数値+単位(px、他)か %(割合)、auto(自動)で指定
table {
margin: 5px;
}
max-height 最大の高さ、min-height 最小の高さを指定
table {
max-height: 350px;
min-height: 250px;
}
max-width 最大幅、min-width 最小幅を指定
table {
max-width: 500px;
min-width: 400px;
}
table-layout 表の表示方法を指定
table {
width: 300px;
table-layout: fixed;
}
auto (自動レイアウトを指定)デフォルト (表全体のデータを読み込んでから表示を開始)
fixed (固定レイアウトを指定 (1行目を読み込んだ時点でレイアウト(各セル幅のサイズ)を決定し、すぐに表示を開始)fixed を指定する場合は、表全体の横幅を指定しておく必要がある
text-align 文字の表示位置(td要素(th要素)に設定)
td {
text-align: center;
vertical-align: top;
}
ああ
あああ
text-align 横方向、 vertical-align は縦方向の位置
td {
text-align: center;
vertical-align: top;
}
text-align(横方向)
left (左側に表示)デフォルト
center (中央に表示)
right (右側に表示)
justify (両端に揃えます)

vertical-align(縦方向)
baseline (先頭行のベースライン揃え)
top (上部に表示)
middle (中央に表示)
bottom (下部に表示)
white-space 改行、半角スペース、タブの扱いを指定
セル内の自動改行を禁止する場合は、td要素やth要素にこのスタイルを設定
#example {
white-space: nowrap;
}
normal (標準)デフォルト
nowrap (自動改行を禁止します)