ＷＥＢリファレンス/ＣＳＳリファレン - テーブル ‐

名前	解説	サンプル
color:	文字の色	red #FF0000
background-color:	背景色	red #FF0000
border-style:	境界線の種類	solid / dotted / dashed / double / groove / ridge / inset / outset
border-color:	境界線の色	red #FF0000
border-width:	境界線の太さ	px

境界線:border

《sample.html》

共通テーブル HTML（サンプル１～９）
<table border="0" cellspacing="0" class="sampleN" summary="○○○">
<caption>サンプルＮ</caption>
<tbody>
<tr><th abbr="title1">title1</th><td>文字</td></tr>
<tr><th abbr="title2">title2</th><td>サンプル</td></tr>
</tbody>
</table>

サンプル１　実線：solid

《sample.css》

<style type="text/css">
table.sample1
{
　border-left: solid 1px #999999;
　border-bottom: solid 1px #999999;
}
table.sample1 th,
table.sample1 td
{
　border-top: solid 1px #999999;
　border-right: solid 1px #999999;
　width: 200px;
}
</style>

サンプル１　実線：solid
title1	文字
title2	サンプル

サンプル２　点線：dotted

《sample.css》

<style type="text/css">
table.sample2
{
　border-left: dotted 1px #999999;
　border-bottom: dotted 1px #999999;
}
table.sample2 th,
table.sample2 td
{
　border-top: dotted 1px #999999;
　border-right: dotted 1px #999999;
　width: 200px;
}
</style>

サンプル２　点線：dotted
title1	文字
title2	サンプル

サンプル３　破線：dashed

《sample.css》

<style type="text/css">
table.sample3
{
　border-left: dashed 1px #999999;
　border-bottom: dashed 1px #999999;
}
table.sample3 th,
table.sample3 td
{
　border-top: dashed 1px #999999;
　border-right: dashed 1px #999999;
　width: 200px;
}
</style>

サンプル３　破線：dashed
title1	文字
title2	サンプル

サンプル４　二重線：double

《sample.css》

<style type="text/css">
table.sample4
{
　border-left: double 1px #999999;
　border-bottom: double 1px #999999;
}
table.sample4 th,
table.sample4 td
{
　border-top: double 1px #999999;
　border-right: double 1px #999999;
　width: 200px;
}
</style>

サンプル４　二重線：double
title1	文字
title2	サンプル

サンプル５　谷線：groove

《sample.css》

<style type="text/css">
table.sample5
{
　border-left: groove 5px #999999;
　border-bottom: groove 5px #999999;
}
table.sample5 th,
table.sample5 td
{
　border-top: groove 5px #999999;
　border-right: groove 5px #999999;
　width: 200px;
}
table.sample5-2 th,
table.sample5-2 td
{
　border: groove 5px #999999;
　width: 200px;
}
</style>

サンプル５　谷線：groove
title1	文字
title2	サンプル

サンプル５－２　谷線：groove
title1	文字
title2	サンプル

サンプル６　山線：ridge

《sample.css》

<style type="text/css">
table.sample6
{
　border-left: ridge 5px #999999;
　border-bottom: ridge 5px #999999;
}
table.sample6 th,
table.sample6 td
{
　border-top: ridge 5px #999999;
　border-right: ridge 5px #999999;
　width: 200px;
}
table.sample6-2 th,
table.sample6-2 td
{
　border: ridge 5px #999999;
　width: 200px;
}
</style>

サンプル６　山線：ridge
title1	文字
title2	サンプル

サンプル６－２　山線：ridge
title1	文字
title2	サンプル

サンプル７　内線：inset

《sample.css》

<style type="text/css">
table.sample7
{
　border-left: inset 5px #999999;
　border-bottom: inset 5px #999999;
}
table.sample7 th,
table.sample7 td
{
　border-top: inset 5px #999999;
　border-right: inset 5px #999999;
　width: 200px;
}
table.sample7-2 th,
table.sample7-2 td
{
　border: inset 5px #999999;
　width: 200px;
}
table.sample7-3
{
　border: inset 5px #999999;
}
table.sample7-3 th,
table.sample7-3 td
{
　border-top: solid 1px #999999;
　border-left: solid 1px #999999;
　width: 200px;
}
</style>

サンプル７　内線：inset
title1	文字
title2	サンプル

サンプル７－２　内線：inset
title1	文字
title2	サンプル

サンプル７－３　外側内線：inset
title1	文字
title2	サンプル

サンプル８　外線：outset

《sample.css》

<style type="text/css">
table.sample8
{
　border-left: outset 5px #999999;
　border-bottom: outset 5px #999999;
}
table.sample8 th,
table.sample8 td
{
　border-top: outset 5px #999999;
　border-right: outset 5px #999999;
　width: 200px;
}
table.sample8-2 th,
table.sample8-2 td
{
　border: outset 5px #999999;
　width: 200px;
}
table.sample8-3
{
　border: outset 5px #999999;
　width: 200px;
}
table.sample8-3 th,
table.sample8-3 td
{
　border-right: solid 1px #999999;
　border-bottom: solid 1px #999999;
　width: 200px;
}
</style>

サンプル８　外線：outset
title1	文字
title2	サンプル

サンプル８－２　外線：outset
title1	文字
title2	サンプル

サンプル８－３　外側外線：outset
title1	文字
title2	サンプル

サンプル９　点線と内側は実線

《sample.css》

<style type="text/css">
table.sample9
{
　border: dotted 5px #999999;
}
table.sample9 th,
table.sample9 td
{
　border: solid 3px #999999;
　width: 200px;
}
</style>

サンプル９　点線と内側は実線
title1	文字
title2	サンプル

サンプル１０　角丸ブロック（スタイルシート）

《sample.css》

<style type="text/css">
.rtop, .rbottom{display:block; background: #FFFFFF}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background-color: #CCFFFF;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>

《sample.html》

<body>
<div style="background-color: #CCFFFF; width: 250px;">
<span class="rtop"><span class="r1"></span><bspan class="r2"></span>
<span class="r3"></span><span class="r4"></span></span>
<div style="margin: 50px 0 50px 0; width: 100%; text-align: center;">サンプル</div>
<span class="rbottom"><span class="r4"></span><span class="r3"></span>
<span class="r2"></span><span class="r1"></span></span>
</div>
</body>

サンプル１０　角丸ブロック（スタイルシート）

サンプル

サンプル１１　角丸ブロック（画像）

《sample.css》

<style type="text/css">
.radius{
background-repeat: no-repeat; width: 10px; height: 10px;
}
.upper_left{
background-image: url('../../img/upper_left.gif');
}
.upper_right{
background-image: url('../../img/upper_right.gif');
}
.lower_left{
background-image: url('../../img/lower_left.gif');
}
.lower_right{
background-image: url('../../img/lower_right.gif');
}
.noimg{
background-color: #eeeecc;
}
</style>

《sample.html》

<body>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
    <td class="upper_left radius"></td>
    <td class="noimg"></td>
    <td class="upper_right radius"></td>
</tr>
<tr>
    <td class="noimg"></td>
    <td class="noimg" valign="middle" align="center" width="200" height="100">サンプル</td>
    <td class="noimg"></td>
</tr>
<tr>
    <td class="lower_left radius"></td>
    <td class="noimg"></td>
    <td class="lower_right radius"></td>
</tr></tbody>
</table>
</body>

サンプル１１　角丸ブロック（画像）


	サンプル

サンプル１２　個別枠

《sample.css》

<style type="text/css">
.sample12 td{border:1px solid #000000;padding:5px;width:200px;text-align:center}
</style>

サンプル１２　個別枠
A	B	C
D	E	F

背景

サンプル１３　奇数行の背景を濃くする(というか、指定行を濃くする)

《sample.css》

<style type="text/css">
tr.dark th,
tr.dark td
{
    background-color: #CCFFCC;
}
</style>

《sample.html》

<table class="detail" cellspacing="0" summary="力道山の終末">
  <caption>サンプル１３　奇数行の背景を濃くする(というか、指定行を濃くする)</caption>
  <tbody>
  <tr><th abbr="S39" rowspan="2"><a name="S39" id="S39">昭和39年</a></th><th>1964/03/25</th>
  <td>娘・浩美 誕生</td></tr>
  <tr class="dark"><th>1964/10/10</th><td>東京オリンピック開会式<br /><small>
  北朝鮮はボイコットし選手引き揚げ</small></td></tr>
  <tr><th abbr="S40" rowspan="2"><a name="S40" id="S40">昭和40年</a></th><th>1965/06/22</th>
  <td>「日本国と大韓民国との間の基本関係に関する条約<a href="http://ja.wikipedia.org/wiki/"
 rel="external">
   <img src="../../../img/wikipedia.jpg" width="13" height="13" style="border: 1px solid;" alt="ja.wikipedia" /></a>」
  (通称：日韓基本条約)</td></tr>
  <tr class="dark"><th>1965/12/15</th><td><strong>三回忌</strong>、
  東京池上本願寺</td></tr>
  <tr><th abbr="S42"><a name="S42" id="S42">昭和42年</a></th><th>1967/1/18</th><td>
  吉村功の国際プロレス旗揚げ ＴＢＳが中継</td></tr>
  <tr class="dark"><th abbr="S43"><a name="S43" id="S43">昭和43年</a></th><th>
  1968/1/21</th><td><span class="Nation">韓国</span>：青瓦台襲撃未遂事件　<br /><small>
  北朝鮮武装ゲリラ隊31名、ソウル青瓦台襲撃を試み失敗</small></td></tr>
  </tbody></table>

サンプル１３　奇数行の背景を濃くする(というか、指定行を濃くする)
昭和39年	1964/03/25	娘・浩美誕生
昭和39年	1964/10/10	東京オリンピック開会式北朝鮮はボイコットし選手引き揚げ
昭和40年	1965/06/22	「日本国と大韓民国との間の基本関係に関する条約」(通称：日韓基本条約)
昭和40年	1965/12/15	三回忌、東京池上本願寺
昭和42年	1967/1/18	吉村功の国際プロレス旗揚げＴＢＳが中継
昭和43年	1968/1/21	韓国：青瓦台襲撃未遂事件　北朝鮮武装ゲリラ隊31名、ソウル青瓦台襲撃を試み失敗

※現在お使いのブラウザはJavascriptの設定が無効になっているか利用できません。Javascriptの設定を有効にし、ご覧ください。
設定方法がわからない方は『ブラウザの設定・操作』のヘルプページを参照してください。

lastMod：最終更新日を表示

Created by ez-HTML

ＷＥＢリファレンス/ＣＳＳリファレン - テーブル ‐

目次