サンプル紹介

TOP > サンプル紹介 > HTML > スタイルシートを使った表組みサンプル

スタイルシートを使った表組みサンプル

表１

人気投票	チョコレート	スナック	ガム	アメ	合計
男	5	8	12	15	○
女	10	4	8	10	▼
合　計	15	12	20	25	◇

　
CSSソース

.hyo01{
    width:500px;
    border-collapse:collapse;
    border-spacing:0;
    font-size:120%;
    text-align:center
}
.hyo01 th{
    color:#000000;
    background-color:#cbf5ff;
    padding:4px 8px;
    text-align:center;
}
.hyo01 td{
    padding:5px 16px;
}
.kei-u{
    border-bottom:1px solid #4568ff;
}
.kei-r{
    border-right:1px solid #4568ff;
}

　
HTMLソース

<table class="hyo01">
<col span="1" class="bk-daidai01">
  <tr>
    <th class="kei-r">人気投票</th>
    <th class="kei-r">チョコレート</th>
    <th class="kei-r">スナック</th>
    <th class="kei-r">ガム</th>
    <th class="kei-r">アメ</th>
    <th>合計</th>
  </tr>
  <tr class="kei-u">
    <td class="kei-r">男</td>
    <td class="kei-r">5</td>
    <td class="kei-r">8</td>
    <td class="kei-r">12</td>
    <td class="kei-r">15</td>
    <td>○</td>
  </tr>
  <tr class="kei-u">
    <td class="kei-r">女</td>
    <td class="kei-r">10</td>
    <td class="kei-r">4</td>
    <td class="kei-r">8</td>
    <td class="kei-r">10</td>
    <td>▼</td>
  </tr>
  <tr>
    <td class="kei-r">合　計</td>
    <td class="kei-r">15</td>
    <td class="kei-r">12</td>
    <td class="kei-r">20</td>
    <td class="kei-r">25</td>
    <td>◇</td>
  </tr>
</table>

表２

	50音	所在地	電話番号	ナンバー			合計
	50音	所在地	電話番号	0	1	2	合計
	合計			8	8	8	8
ひらがな	あいうえお	▼▼▼123番地	○○○-○○○○	0	0	0	0
	かきくけこ	▼▼▼123番地	○○○-○○○○	1	1	1	1
	さしすせそ	▼▼▼123番地	○○○-○○○○	2	2	2	2
カタカナ	アイウエオ	▼▼▼123番地	○○○-○○○○	4	4	4	4
	カキクケコ	▼▼▼123番地	○○○-○○○○	5	5	5	5
	サシスセソ	▼▼▼123番地	○○○-○○○○	6	6	6	6

　
CSSソース

.hyo02{
    border-collapse:collapse;
    border:1px solid #996666;
    border-spacing:0;
    font-size:80%;
}
.hyo02 th{
    color:#000000;
    border:1px #996666 solid;
    background-color:#fac38c;
    padding:4px 8px;
    text-align:center;
}
.hyo02 td{
    padding:4px 8px;
    border:1px #996666 solid;
}
.hyo02 tfoot{
	background-color:#a5e1b3;
	text-align:center;
	border:none;
}
.hyo02 tbody{
	text-align:center;
}

　
HTMLソース

<table class="hyo02">
<colgroup span="4"></colgroup>
<colgroup span="1" class="bk-beju"></colgroup>
<colgroup span="6" class="bk-murasaki03">
</colgroup>
<thead>
  <tr>
    <th rowSpan="2　</th>
    <th rowSpan="2">50音</th>
    <th rowSpan="2">所在地</th>
    <th rowSpan="2">電話番号</th>
    <th colSpan="3">ナンバー</th>
    <th rowSpan="2">合計</th>
  </tr>
  <tr>
    <th>0</th>
    <th>1</th>
    <th>2</th>
    </tr>
</thead>
<tfoot>
  <tr>
    <td>　</td>
    <td colSpan="3">合計</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td rowspan="3">ひらがな</td>
    <td>あいうえお</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>かきくけこ</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>さしすせそ</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td rowSpan="3">カタカナ</td>
    <td>アイウエオ</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>カキクケコ</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>サシスセソ</td>
    <td>▼▼▼123番地</td>
    <td>○○○-○○○○</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</tbody>
</table>

表３

1	2	3
4	5	6
7	8	9

　
CSSソース

table.hyo03{
	width:300px;
    border-collapse:collapse;
    border:1px solid #996666;
    border-spacing:0;
    font-size:80%;
	text-align:center;
}
tr.fish {
	background-color:#fbfcd9;
}
.hyo03 td{
	border-bottom:1px #9e5e2a solid;
}
td.mon span {
	background-color:#557766;
	color:#ffffff;
	display:block;
}

　
HTMLソース

<table class="hyo03">
<tbody>
  <tr class="fish">
    <td class="mon"><span>1</span></td>
    <td class="mon">2</td>
    <td class="mon">3</td>
  </tr>
  <tr>
    <td class="mon">4</td>
    <td class="mon"><span>5</span></td>
    <td class="mon">6</td>
  </tr>
  <tr class="fish">
    <td class="mon">7</td>
    <td class="mon">8</td>
    <td class="mon"><span>9</span></td>
</tr>
</tbody>
</table>

↑トップへ

トップ

会社概要

製品紹介

サンプル紹介

サポート

フォトストック

リンク

お問い合わせ

サンプル紹介

スタイルシートを使った表組みサンプル

表１

表２

表３