日本情報処理検定協会の公式テキスト「表計算模擬問題集３・４級編」のP60にある解答例をHTMLとCSSでどこまで近づけることができるかを授業課題として出しました。
その解答例です。
表示イメージ
表計算で作った表ですので、HTML部分はtableタグが基本となります。
CSSはセルの文字揃えなどにクラス定義を使うことで以下のような見た目を実現しています。
HTML部分：4-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>表計算P60 4級-1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="4-1.css">
</head>
<body>
<table>
<caption>請求金額一覧表</caption>
<tr>
<th>代表者名</th>
<th>1泊料金</th>
<th>人数</th>
<th>宿泊日数</th>
<th>宿泊料金</th>
<th>サービス料</th>
<th>請求金額</th>
</tr>
<tr>
<td class="name">井上 洋子</td>
<td>10,900</td>
<td>1</td>
<td>3</td>
<td>32,700</td>
<td>3,270</td>
<td>35,970</td>
</tr>
<tr>
<td class="name">堀 幸四郎</td>
<td>9,200</td>
<td>5</td>
<td>1</td>
<td>46,000</td>
<td>4,600</td>
<td>50,600</td>
</tr>
<tr>
<td class="name">赤池 久美</td>
<td>7,400</td>
<td>2</td>
<td>4</td>
<td>59,200</td>
<td>5,920</td>
<td>65,120</td>
</tr>
<tr>
<td class="name">小早川 修</td>
<td>11,500</td>
<td>3</td>
<td>2</td>
<td>69,000</td>
<td>6,900</td>
<td>75,900</td>
</tr>
<tr>
<td class="name">加藤 ミサ</td>
<td>6,700</td>
<td>2</td>
<td>3</td>
<td>40,200</td>
<td>4,020</td>
<td>44,220</td>
</tr>
<tr>
<td class="name">石田 信二</td>
<td>13,800</td>
<td>1</td>
<td>4</td>
<td>55,200</td>
<td>5,520</td>
<td>60,720</td>
</tr>
<tr>
<td class="name">原 みどり</td>
<td>12,100</td>
<td>4</td>
<td>1</td>
<td>48,400</td>
<td>4,840</td>
<td>53,240</td>
</tr>
<tr>
<td class="name">森山 正義</td>
<td>8,600</td>
<td>3</td>
<td>2</td>
<td>51,600</td>
<td>5,160</td>
<td>56,760</td>
</tr>
<tr>
<td class="space"></td>
<td class="space"></td>
<td class="space"></td>
<td class="space"></td>
<td class="space"></td>
<td class="space"></td>
<td class="space"></td>
</tr>
<tr>
<td class="center">合計</td>
<td class="space"></td>
<td>21</td>
<td>20</td>
<td>402,300</td>
<td>40,230</td>
<td>442,530</td>
</tr>
<tr>
<td class="center">平均</td>
<td class="space"></td>
<td>3</td>
<td>3</td>
<td>50,288</td>
<td>5,029</td>
<td>55,316</td>
</tr>
</table>
</body>
</html>
CSS部分：4-1.css
@charset "utf-8";
/* 4-1.css */
/*
ページ全体の設定
---------------------
*/
body{
font-size: 14pt; /* フォントサイズ 14pt */
font-family: serif; /* 明朝体 */
}
/*
テーブル
---------------------
*/
/* 外枠 */
table{
border-collapse: collapse; /* 隣接する枠線を重ねて表示 */
border: solid 3px #000000; /* 枠線（実線・3ピクセル）th、tdより太くする */
}
/* タイトル */
caption{
letter-spacing: 1em; /* 文字間を1文字分空ける */
}
/* 見出しセル、データセル */
th, td{
border: solid 1px black; /* 枠線（実線・1ピクセル・黒） */
padding: 0.25em 0.5em; /* セルの内側余白 上下余白：文字サイズの25%分 左右余白：文字サイズの50%分 */
}
/* データセルのみ */
td{
text-align: right; /* 文字を右揃え */
}
/* 「代表者名」のセル */
td.name{
text-align: left; /* 文字を左揃え */
width: 7em; /* セルの幅を7文字分とする */
}
/* 空欄のセル */
td.space{
padding: 1em; /* 内側余白を上下左右1文字分とする */
}
/* 「合計」、「平均」の部分 */
.center{
text-align: center; /* 文字を中央揃え */
letter-spacing: 1em; /* 文字間を1文字分空ける */
}
コメント