ＣＳＳでテーブルレイアウト

time 2010/02/03

folder CSS

料金表や、会社概要など、テーブルレイアウトをする事があります。

そこで、ストック用にCSSでレイアウトするテーブルを作りました。

とりあえずカスタマイズしやすいように、シンプルな感じです。

ご自由にカスタムしてお使い下さい♪

1 TABLE-A
2 TABLE-B
3 TABLE-C
4 TABLE-D
5 こちらの記事もチェック

TABLE-A

table-a

HTMLソース

<table class="table-a">
<tbody>
<tr>
<th></th>
<th>内容</th>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
</tbody>
</table>

CSS

.table-a {
border-collapse: collapse;
width: 400px;
border: 1px solid #CCC;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-a th	{
border: 1px solid #DDD;
color: #333;
background-color: #D5FAFB;
font-weight: bold;
padding: 10px;
}
.table-a td	{
border: 1px solid #DDD;
padding: 10px;
color: #666;
}

TABLE-B

table-b

HTMLソース

<table class="table-b">
<tbody>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<th>内容</th>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
</tbody>
</table>

CSS


.table-b {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-b th    {
color: #FFF;
background-color: #099;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #CCC;
}
.table-b td    {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}

TABLE-C

table-c

HTMLソース

<table class="table-c">
<tbody>
<tr>
<th>内容</th>
<th>内容</th>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
</tbody>
</table>

CSS

.table-c {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-c th    {
color: #333;
font-weight: bold;
padding: 10px;
border-bottom: 3px solid #0CC;
}
.table-c td    {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}

TABLE-D

table-d

HTMLソース

<table class="table-d">
    	<tr>
       	  <th scope="col">内容</th>
          <th scope="col">内容</th>
          <th scope="col">内容</th>
          <th scope="col">内容</th>
        </tr>
    <tbody>
    	<tr class="color">
        	<td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
        </tr>
        <tr>
        	<td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
        </tr>
        <tr class="color">
        	<td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
        </tr>
        <tr>
        	<td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
            <td>ＴＥＸＴ</td>
        </tr>
    </tbody>
</table>

CSS

.table-d {
font-size: 12px;
margin: 20px;
width: 400px;
text-align: left;
border-collapse: collapse;
border: 1px solid #CCC;
}
.table-d th
{
padding: 10px;
color: #333;
border-bottom: 1px solid #CCC;
}
.table-d td
{
padding: 10px;
color: #666;
}
.table-d .color
{
background-color: #D5FAFB;
}