ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

枠線の太さ、色、種類を指定する

table{border:太さ 線の種類 線の色;}でテーブルの枠線の太さ、線の種類、線の色を一括に指定する ことができます。 線の色は記述しなくても枠線は表示されます。

table,td{}、 td,th{}でテーブルとセルの両方もしくはセルだけに 枠線を指定できます。
枠線の太さ、線の種類、線の色の細かな個別の指定方法はボックスの
枠線の太さを指定する 枠線の種類を指定する 枠線の色を指定するの項目を参照してください。

■ 枠線の種類

線の種類は以下の通り。

線の種類 説明
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線

【ブラウザ表示】

テーブル テーブル

テーブル テーブル

テーブル テーブル

テーブル テーブル

テーブル テーブル

テーブル テーブル

テーブル テーブル

テーブル テーブル

ソース

<table class="sen1">
<tr>
<td class="sen1">テーブル</td>
<td class="sen1">テーブル</td>
</tr>
</table>
以下同様に。ソースが多いため以下省略

外部ファイル

table.sen1,td.sen1{border:4px solid green;}
table.sen2,td.sen2{border:4px double silver;}
table.sen3,td.sen3{border:4px ridge red;}
table.sen4,td.sen4{border:4px groove blue;}
table.sen5,td.sen5{border:4px dotted navy;}
table.sen6,td.sen6{border:4px dashed purple;}
table.sen7,td.sen7{border:4px inset lime;}
table.sen8,td.sen8{border:4px outset maroon;}


<body>〜</body>に直接記入する場合

<table style="border:4px solid green;">
<tr>
<td style="border:4px solid green;">テーブル</td>
<td style="border:4px solid green;">テーブル</td>
</tr>
</table>
以下同様に。ソースが多いため以下省略

■ その他の項目

枠線を重ねて表示する
テーブルやセルの幅、高さを指定する
外側、内側の余白を指定する
セルの文字の位置を指定する
テーブルに文字を回り込ませる
テーブルやセルに背景色を指定する
テーブルやセルに画像を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.