tableを使って表を作りましょう。
tableタグの基本
<table>は<tr>、<th>、<td>を組み合わせて作成します。
<th>は表の見出しを作成することができます。一般的なブラウザでは、文字列は太字、中央揃えで表示されます。
見出しが必要ない場合は、使う必要はありません。
See the Pen Untitled by じんとら (@jintora) on CodePen.
<table>に装飾が何もなければ、枠や罫線がつかず、テキストのみが表示されます。
枠・罫線
border=”1以上の整数”
<table>に整数を設定すると、表の外枠の罫線の太さが表示されます。数値が大きい方が枠が太くなります。
See the Pen Untitled by じんとら (@jintora) on CodePen.
色・間隔
色をつける
bordercolor=”#0000ff”
枠・罫線の色。
bgcolor=”#c0c0c0″
背景の色。
間隔
cellpadding=”○”
セル内の文字と罫線との間隔。px、％で指定します。pxの場合単位の入力は不要。HTML5では、廃止されたため非推奨です。
cellspacing=”○”
セルとセルの間隔。px、％で指定します。pxの場合単位の入力は不要。HTML5では、廃止されたため非推奨です。
See the Pen Untitled by じんとら (@jintora) on CodePen.
<table>に指定すると、表全体に適用されます。行やセルに指定したい場合は、<tr>、<th>、<td>に指定します。
セルの結合
colspan=”結合するセルの数”
<th>、<td>に入れ、セルを右に結合させます。結合させたセルは削除します。
rowspan=”結合するセルの数”
<th>、<td>に入れ、セルを下に結合させます。結合させたセルは削除します。
See the Pen Untitled by じんとら (@jintora) on CodePen.
結合するセルの数を入力します。数の入力を間違えたり、セルの削除を忘れると表の形が崩れるため、気をつけましょう。
CSSで指定
color: #○○○○○○;
文字・線（線の指定があれば）の色。
border: solid ○px #○○○○○○;
一本線。色の指定はなくてもよく、ない場合は、文字色と同色となる。
border: dashed ○px #○○○○○○;
破線。一本線。色の指定はなくてもよく、ない場合は、文字色と同色となる。
border-collapse: collapse;
隣接するボーダーラインを重ねあわせて表示するよう指定します 。
border-collapse: separate;
隣接するボーダーラインを離して表示するよう指定します。(初期値）
background-color: #○○○○○○;
背景色。
padding: ○px ○px;
上下・左右の余白。単位の入力が必須。
text-align: center;
テキストを中央揃え。
See the Pen Untitled by じんとら (@jintora) on CodePen.
まとめ
デザイン等指定する場合は、非推奨のものもあるため、CSSを使用するようにしましょう。
コメント