ホーム > 素材集 > スタイルシートTIPS > シンプル表組み編Part2
シンプル表組み編Part2
サンプル
| 見出し | 見出し | 見出し |
|---|---|---|
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
borderを使用して、横線のみの表を作成する手法です。縦のラインがない方が見やすいという場合もあるので、よく使用されているのを見かけます。
セル内に文章が入るものというよりは、単語や画像が入れられ、セル間の余白が十分取れそうな表に適しています。
このサンプルではthに対して上下にラインを引き、背景に色を敷いています。見出しと内容を区別するために、thの下線のみちょっと太くしています。
またtdの方には、下線のみを設定しています。
XHTMLソースサンプル
<table width="100%" border="0" summary="sample">
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
CSSソースサンプル
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
table { border-collapse: collapse;
}
th { background:#FFFFCC;
border-bottom:#009933 2px solid;
border-top:#009933 1px solid;
text-align:center;
}
td { background:#FFFFFF;
border-bottom:#009933 1px solid;
text-align:center;
}
}
th { background:#FFFFCC;
border-bottom:#009933 2px solid;
border-top:#009933 1px solid;
text-align:center;
}
td { background:#FFFFFF;
border-bottom:#009933 1px solid;
text-align:center;
}
Copyright(C) TAKIKAWA PLANNING OFFICE. All rights reserved.