この章では隣り合うセルのボーダーを重ねたり、離して表示するborder-collapseについて説明します。
では例をみてみましょう。
table要素のCSSに
を指定すると隣接するセルのボーダーを重ねて表示します。
上の例は隣り合うセルを重ねていますが、重なり合う箇所は
の中でいずれかの設定された「幅、スタイル、色」が優先されて表示されることになります。
結果は以下の通りです。
例ではthとtdのボーダーが重なっていますが, 
が3pxで同じなので、ボーダーの種類で決めるのですがthのsolidのほうが優先順位が上なのでthのボーダーが優先されます。
thとtableのボーダーが重なっているところは色だけが違うので優先順位4の法則によりth要素のほうが優先順位は高くなります。
tdとtableのボーダーが重なっているところは太さが同じでスタイルと色が違いますが、solidのほうが優先順位が高いので、tableのスタイルが優先されます。
タグ: table
カテゴリー
cellspacing属性について知ろう
この章ではcellspacing属性について説明します。
cellspacing属性はセル同士の間隔を指定する属性です。
では例をみてみましょう。
セル同士の間隔を設定するためにはtable要素の属性にcellspacingを指定します。
値に”0″を指定するとセル間の間隔は無くなりますが、以下の例のように1以上の数値を入れるとセル同士の間隔が広がります。
の場合には以下の通り、セル同士の間隔は無くなります。
以下の例は
の場合の表示結果です。
セル間に間隔が生まれているのが分かります。
カテゴリー
セル内にvertical-alignの設定しよう
この章ではテーブルのセル内の文字の縦方向の位置を指定するvertical-alignについて説明します。
vertical-alignはすでに学習済みですが、復習してみましょう。
vertical-alignでは行内のテキストの縦方向の位置を指定できます。
セルの場合は以下の3種類の値を使用します。
では例をみてみましょう。
結果は以下の通りです。
この章ではテーブルの中のセルを結合する方法を説明します。
横方向のセルを結合するのか、縦方向のセルを結合するのかで書き方が違います。
=>横方向のセルを結合します。
ダブルクォートの中には結合したいセルの横方向のセルの数を指定します。
例えば横方向の3つのセルを結合したい場合は
と書きます。
=>縦方向のセルを結合します。
ダブルクォートの中には結合したいセルの縦方向のセルの数を指定します。
例えば縦方向の3つのセルを結合したい場合は
と書きます。
まず初めにcolspanの例を見てみましょう。
結果は以下の通りです。
上段の横方向の3つのセルが結合しているのがわかります。
次はrowspanの例を見てみましょう。
rowspanは縦方向のセルを結合します。
結果は以下の通りです。
縦方向の3つのセルを結合しています。
次の例は縦の結合と横の結合が合わさったものです。
結果は以下の通り、縦2個分、横2個分を結合しています。
カテゴリー
テーブル(table,tr,th,td)を作ろう
この章ではテーブルを作成するタグについて説明します。
テーブルとは表組のことを言います。
テーブルはサイトを作成する上で頻繁に使うので
しっかりと覚えてください。
では例をみてみましょう。
結果は以下のような表組みを出力します。
table要素の属性には以下のようにborder属性やwidth属性を入れることが出来ます。
border属性にはボーダーの太さをピクセル数で指定してください。
width属性はテーブルの幅を% やピクセル数で指定してください。
では次の例を見てみましょう。
以下の例は<th>が無い形式ですが、このように<th>を入れなくても問題ありません。
結果は以下の通りです。