You are here: Home » css関係 » webサイトでのtableのプロパティとか作り方とか

webサイトでのtableのプロパティとか作り方とか

webサイトでのテーブル(表組)の作り方です。

teble

テーブルとは

パソコン スマホ タブレット スマートウォッチ
mac android Sony Apple Watch
光ファイバー docomo au softbank

 

 

 

こんな感じで、必要事項などを並べ見やすいように組み込んだ表をテーブルと言います。

いまでは当たり前ですが、なにか特別なことがない限り、htmlにcssは書かないで別ファイルcssで読み込ませるようにします。

スポンサーリンク

 

セルと行と列

セル、行、列

表のマス目がセル、

セルが横に並んだものを行、

縦に並んだものをと言います。

 

テーブルで使うhtmlのタグとよく使うcssのプロパティ

html

 

<table> 〜 </table>はブラウザにテーブル(表)を作りますよと伝えるタグです。

その中に、<tr> 〜 </tr>タグで横の行はこうしますよと伝えて、

その中に、<th> 〜 </th>(内容が見出しの場合は<th>を使います。なのでブラウザの仕様上見出しの部分は太字になり、テキストも中央に配置される事が多いです。)

<td> 〜 </td>(内容がデータの場合には、<td>を使います。)それらを使いセルを定義します。

 

htmlは簡単です。ややこしいのはいつもcssです。

css

大体いつも使うcssです。

 

border-collapse:

border-collapse:はセルのボーダーを重ねるか、離すかの選択ができます。

border-collapse: collapse=隣り合うボーダーを重ねて表示。

border-collapse: separate=隣り合うボーダー間隔(大体2px)をあけて表示。(なにもしなければ、こっちが採用されることが多いです。)

テーブルの特徴として、border-collapse: collapseを指定しないと、隣り合うボーダーが離れてしまうことがあります。なので、

パソコン スマホ タブレット スマートウォッチ
mac android Sony Gショック
光ファイバー docomo au softbank

重ねて表示する場合は、collapseを指定します。間隔をあけて表示する場合separateを指定します。

個人的に、テーブルのセルボーダーを離すことってあんまりない。

 

border-spacing:

border-spacing は、隣り合うセルの間隔を指定することができます。

border-spacingを指定したいときは、border-collapse: separateを指定すると有効になります。

また、border-spacingに負の値を指定することもできません。

指定方法

border-spacing: 1px; …[上下左右] を指定
border-spacing: 1px 1px; … [左右] と [上下] を指定

個人的にあんまり使わないですね。

 

スポンサーリンク

 

table-layout

table-layouは、テーブルの表示方法を指定できます。テーブルの幅を自動で決めるauto(初期値)、固定にするfixedを選べます。

autoの詳細

テーブル全体を読み込んでから、内容に合わせて表示を開始します。幅が自動できまります。

セルの幅が cssや文字の量などで 自動で決まります

fixedの詳細

固定幅なので、一行目を読み込んだ時点で表示を開始、表示が速くなるメリットがあります。ちょっとseoに良いらしい。

セルの幅が table-layout:fixed;で 固定幅になります。

vertical-align

vertical-alignは、インライン要素の縦方向の位置揃えを指定する時に使いますが、th・tdにも指定することができます。

 

empty-cells

empty-cellsは、空白セルのボーダーを表示するshow(初期値)と表示しないhideを選択できます。
・空白セルのボーダー設定。border-collapse:separateの場合のみ有効


show(初期値)空白セルのボーダーを表示する場合

表示してます 表示してます 表示してます

 

hide 空白セルのボーダーを表示しない場合

empty-cells:hideの場合

表示してます 表示してます

white-space:nowrap

セルに対して文言が長いと、意図しないところで改行してしまう事があります。その場合、white-spaceにnowrapを指定します。

white-spaceは、半角スペース・タブ・改行の表示指定ができます。その中でnowrapで改行をしないようにできます。

設定なしのセル 改行しない様に設定したセル

 

word-break:break-all

逆に改行したい場合は、word-breakを使います。

word-breakは、行の改行方法を指定する時に使います。その中のbreak-allで表示範囲に合わせて改行させます。

設定なしのセル 改行する様に設定したセル

 

ie7以下のテーブル対応が結構面倒

過去のieはどこを見ても面倒なことが多いですが、テーブルも然りです。

 

border-spacing:0 は、IE7以下では対応していません。なので、tableにcellspacing=”0″を指定すれば正く表示されます。一応…

tableでセルのwidthが無視される、固定されない、trのborderが無視される…などなど

 

ie6とie7は対応してたらきりがないし、シェアに比べてら労力が馬鹿にならないので…

この際はie7以下は無視しよう!!!

 

なんつって

スポンサーリンク

コメントを残す