「いろいろなウェブサイトで使える汎用的なテーブルデザイン集」サンプル

1.細い罫線で区切る

heading 1	heading 2	heading 3
data 1-1	data 2-1	data 3-1
data 1-2	data 2-2	data 3-2
data 1-3	data 2-3	data 3-3
data 1-4	data 2-4	data 3-4


// HTML
<table id="table01">
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
  <tr>
    <td>data 1-1</td>
    <td>data 2-1</td>
    <td>data 3-1</td>
  </tr>
  <tr>
    <td>data 1-2</td>
    <td>data 2-2</td>
    <td>data 3-2</td>
  </tr>
  <tr>
    <td>data 1-3</td>
    <td>data 2-3</td>
    <td>data 3-3</td>
  </tr>
  <tr>
    <td>data 1-4</td>
    <td>data 2-4</td>
    <td>data 3-4</td>
 </tr>
</table>
	
// CSS
#table01 th,#table01 td {
  padding: 15px;
  border: solid 1px #B0B0B0;
}

2.行の下線で区切り文字と線にアクセントをつける

heading 1	heading 2	heading 3
data 1-1	data 2-1	data 3-1
data 1-2	data 2-2	data 3-2
data 1-3	data 2-3	data 3-3
data 1-4	data 2-4	data 3-4


// HTML
<table id="table02">
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
  <tr>
    <td>data 1-1</td>
    <td>data 2-1</td>
    <td>data 3-1</td>
  </tr>
  <tr>
    <td>data 1-2</td>
    <td>data 2-2</td>
    <td>data 3-2</td>
  </tr>
  <tr>
    <td>data 1-3</td>
    <td>data 2-3</td>
    <td>data 3-3</td>
  </tr>
  <tr>
    <td>data 1-4</td>
    <td>data 2-4</td>
    <td>data 3-4</td>
 </tr>
</table>
	
// CSS
#table02 th,#table02 td {
  padding: 15px;
  color: #1D739A;
}
#table02 th {
  border-bottom: solid 3px #84B0C4;
}
#table02 td {
  border-bottom: solid 1px #84B0C4;
}

3.行に対して交互に背景色のついた帯を入れる

heading 1	heading 2	heading 3
data 1-1	data 2-1	data 3-1
data 1-2	data 2-2	data 3-2
data 1-3	data 2-3	data 3-3
data 1-4	data 2-4	data 3-4


// HTML
<table id="table03">
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
  <tr>
    <td>data 1-1</td>
    <td>data 2-1</td>
    <td>data 3-1</td>
  </tr>
  <tr>
    <td>data 1-2</td>
    <td>data 2-2</td>
    <td>data 3-2</td>
  </tr>
  <tr>
    <td>data 1-3</td>
    <td>data 2-3</td>
    <td>data 3-3</td>
  </tr>
  <tr>
    <td>data 1-4</td>
    <td>data 2-4</td>
    <td>data 3-4</td>
 </tr>
</table>
	
// CSS
#table03 th,#table03 td {
  padding: 15px;
  color: #505050;
}
#table03 tr:nth-child(odd) {
  background: #DDDDDD;
}
#table03 tr:nth-child(even) {
  background: #F6F6F6;
}
#table03 th {
  border-top: solid 1px #858585;
  border-bottom: solid 1px #858585;
}

4.見出しにアクセントをつけて行にも交互に背景色のついた帯を入れる

heading 1	heading 2	heading 3
data 1-1	data 2-1	data 3-1
data 1-2	data 2-2	data 3-2
data 1-3	data 2-3	data 3-3
data 1-4	data 2-4	data 3-4


// HTML
<table id="table04">
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
  </tr>
  <tr>
    <td>data 1-1</td>
    <td>data 2-1</td>
    <td>data 3-1</td>
  </tr>
  <tr>
    <td>data 1-2</td>
    <td>data 2-2</td>
    <td>data 3-2</td>
  </tr>
  <tr>
    <td>data 1-3</td>
    <td>data 2-3</td>
    <td>data 3-3</td>
  </tr>
  <tr>
    <td>data 1-4</td>
    <td>data 2-4</td>
    <td>data 3-4</td>
 </tr>
</table>
	
// CSS
#table04 th,#table04 td {
  padding: 15px;
}
#table04 tr:nth-child(odd) {
  background: #E7EBE9;
}
#table04 tr:nth-child(even) {
  background: #F8F8F8;
}
#table04 tr:first-child {
  background: #8DC4AA;
}
#table04 th {
  color: #fff;
  border-bottom: solid 1px #759786;
}
#table04 td {
  color: #4A6458;
  border-bottom: solid 1px #A7D2BE;
}

5.複数の項目が関係するデータを整理したテーブル

	heading 1	heading 2	heading 3
item 1	data 1-1	data 2-1	data 3-1
item 2	data 1-2	data 2-2	data 3-2
item 3	data 1-3	data 2-3	data 3-3
item 4	data 1-4	data 2-4	data 3-4


// HTML
<table id="table05">
  <thead>
    <tr>
      <th> </th>
      <th>heading 1</th>
      <th>heading 2</th>
      <th>heading 3</th>
    </tr>
</thead>
<tbody>
    <tr>
      <th>item 1</th>
      <td>data 1-1</td>
      <td>data 2-1</td>
      <td>data 3-1</td>
    </tr>
    <tr>
      <th>item 2</th>
      <td>data 1-2</td>
      <td>data 2-2</td>
      <td>data 3-2</td>
    </tr>
    <tr>
      <th>item 3</th>
      <td>data 1-3</td>
      <td>data 2-3</td>
      <td>data 3-3</td>
    </tr>
    <tr>
      <th>item 4</th>
      <td>data 1-4</td>
      <td>data 2-4</td>
      <td>data 3-4</td>
    </tr>
</tbody>
</table>

// CSS
#table05 th,#table05 td {
  padding: 15px;
  border: solid 1px #987777;
}
#table05 thead th {
  background: #D19B9B;
  color: #fff;
}
#table05 tbody th {
  background: #FFF0F0;
  color: #AA5A5A;
  font-weight: 400;
}
#table05 tbody td {
  background: #FBFBFB;
}

6.時系列ごとの関連性を持ったデータが入ったテーブル

Step 1	Step 2	Step 3	Step 4
data 1-1	data 2-1	data 3-1	data 4-1
data 1-2	data 2-2	data 3-2	data 4-2
data 1-3	data 2-3	data 3-3	data 4-3


// HTML
<table id="table06">
  <tr>
    <th>Step 1</th>
    <th>Step 2</th>
    <th>Step 3</th>
    <th>Step 4</th>
  </tr>
  <tr>
    <td>data 1-1</td>
    <td>data 2-1</td>
    <td>data 3-1</td>
    <td>data 4-1</td>
  </tr>
  <tr>
    <td>data 1-2</td>
    <td>data 2-2</td>
    <td>data 3-2</td>
    <td>data 4-2</td>
  </tr>
  <tr>
    <td>data 1-3</td>
    <td>data 2-3</td>
    <td>data 3-3</td>
    <td>data 4-3</td>
  </tr>
</table>
// CSS
#table06 th,#table06 td {
  color: #fefefe;
  border: solid 2px #fefefe;
}
#table06 th {
  padding: 10px 15px;
}
#table06 td {
  padding: 25px 15px;
}
#table06 th:first-child,
#table06 td:first-child {
  background: #6F6F91;
}
#table06 th:nth-child(2),
#table06 td:nth-child(2) {
  background: #7E7D9F;
}
#table06 th:nth-child(3),
#table06 td:nth-child(3) {
  background: #9493AF;
}
#table06 th:last-child,
#table06 td:last-child {
  background: #A6A5C1;
}

7.料金プランをまとめたテーブル

	Value 1	Value 2	Value 3
item 1	$99.8	$199.8	$299.8
item 2	data 1-2	data 2-2	data 3-2
item 3	data 1-3	data 2-3	data 3-3
item 4	data 1-4	data 2-4	data 3-4
	caption	caption	caption


// HTML
<table id="table07">
  <thead>
    <tr>
      <th> </th>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row1">
      <th>item 1</th>
      <td>$99<span>.8</span></td>
      <td>$199<span>.8</span></td>
      <td>$299<span>.8</span></td>
    </tr>
    <tr class="row2">
      <th>item 2</th>
      <td>data 1-2</td>
      <td>data 2-2</td>
      <td>data 3-2</td>
    </tr>
    <tr class="row3">
      <th>item 3</th>
      <td>data 1-3</td>
      <td>data 2-3</td>
      <td>data 3-3</td>
    </tr>
    <tr class="row4">
      <th>item 4</th>
      <td>data 1-4</td>
      <td>data 2-4</td>
      <td>data 3-4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td> </td>
      <td>caption</td>
      <td>caption</td>
      <td>caption</td>
    </tr>
  </tfoot>
</table>

// CSS
#table07 thead th {
  padding: 5px 15px;
  text-align: center;
  color: #fff;
  border-radius: 10px 10px 0 0;
}
#table07 thead th:nth-child(2) {
  background: #9DBD6F;
}
#table07 thead th:nth-child(3) {
  background: #6BA3BF;
}
#table07 thead th:nth-child(4) {
  background: #CF738F;
}
#table07 tbody th {
  padding: 15px;
  font-weight: 200;
  background: #D4D4D4;
}
#table07 tbody .row1 th,
#table07 tbody .row2 th,
#table07 tbody .row3 th {
  border-bottom: solid 1px #999;
}
#table07 tbody .row1 td {
  font-size: 50px;
  font-weight: 700;
  padding: 20px 15px;
  color: #fff;
  text-align: center;
}
#table07 tbody .row1 td span {
  font-size: 36px;
}
#table07 tbody .row1 td:nth-child(2) {
  background: #B6CD96;
}
#table07 tbody .row1 td:nth-child(3) {
  background: #9BC7DE;
}
#table07 tbody .row1 td:last-child {
  background: #E9A0B7;
}
#table07 tbody .row2 td,
#table07 tbody .row3 td,
#table07 tbody .row4 td {
  padding: 15px;
}
#table07 tfoot td {
  padding: 5px 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  border-radius: 0 0 10px 10px;
  text-align: center;
}
#table07 tfoot td:nth-child(2) {
  background: #B6CD96;
}
#table07 tfoot td:nth-child(3) {
  background: #9BC7DE;
}
#table07 tfoot td:last-child {
  background: #E9A0B7;
}

＞＞戻る