TestHTML_table_colspan_rowspan2.html ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>文書の題名</title>
<style>
body {
	margin: 0 auto;              /* body タグをセンタリングする */
	padding: 2em 2em;            /* body の内側の余白の大きさ (上下、左右)。em は文字 1文字分の大きさを表す単位です。*/

	box-sizing: border-box;      /* width を padding や border も含めたサイズにする */
	width: 730px;                /* body タグの幅 */
	border: 1px solid #f00;      /* 領域確認用の赤い枠線。不要になったらコメントアウトする。 */

	background: #fff;            /* 背景色: 白。 */

	font-size: 12pt;             /* 文字の大きさ */
	color: #000;                 /* 文字の色 */
	line-height: 1.8;            /* 行間の大きさ */
}

h1 {
	margin: 1em 0;               /* h1 タグの外側の余白の大きさ (上下、左右)。上下に 1文字分の余白を設定した例。 */
	font-size: 18pt;             /* 文字の大きさ */
	text-align: center;          /* テキストをセンタリングする。 */
	letter-spacing: 0.2em;       /* 文字間隔の調整 */
}

/* id="TITLE1" の 装飾 */
#TITLE1 {
	margin: 1em 0;
	text-align: right;           /* テキストを右寄せにする */
}
#TITLE1 b {
	/* inline-block にすると img タグと同じ感覚で扱えます。
	   幅 width, 高さ height などが指定できます。
	 */
	display: inline-block;
	padding: 0.2em 0.5em;        /* 内側の余白の大きさ (上下, 左右) */
	font-size: 16pt;             /* 文字の大きさ */
	border: 4px double #000;     /* 枠線、double: 2重線 */
}


/* すべての table に共通の装飾
 */
table {
	margin: 0.5em auto;          /* (上下,左右) 左右は auto で中央にセンタリング。 */
	width: 90%;                  /* 左右に余白を持たせる場合は適当に調整する */

	border-collapse: collapse;   /* th, td の周囲の余白をなしにする */
	border: 3px solid #666;      /* 枠線の太さ、線の種類、色 */

	line-height: 1.7;            /* table 内の行間の大きさ */
}

table th,
table td {
	border: 1px solid #000;      /* 枠線。 */
	padding: 0.3em 0.5em;        /* th, td の内側の余白の大きさ (上下, 左右) */
}

table td b {
	font-size: 10pt;
}

table td input[type="checkbox"] {
	margin: 0 0.5em 0 1.5em;             /* チェックマークの周囲の余白の大きさ(上、右、下、左) */
}

/* class="tr1" の装飾 */
.tr1 {  /* 大きなブロック */
	border: 2px solid #000;      /* 枠線。少し太い線にする。 */
}

/* class="td_border1" の装飾 */
.td_border1 {
	border: 2px solid #000;      /* 少し太い線にする。 */
}

.td_justify {
	text-align-last: justify;    /* 均等割り付けにする */
	font-size: 10pt;
	font-weight: bold;
}


/* class="table1" 内の装飾
 */
.table1 th {
	width: 140px;
}
.table1 .td1_2 {
	width: 60px;
}


/*  class="table2" 内の装飾
 */
.table2 th {              /* 1列目の装飾 */
	width: 100px;
}

.table2 td:nth-child(2){  /* 2列目の装飾 */
	width: 180px;
}

.table2 td:nth-child(3){  /* 3列目の装飾 */
	width: 60px;
	font-weight: bold;    /* 文字を太くする */
	font-size: 10.5pt;    /* 文字の大きさ */
}
</style>
</head>
<body>

<div id="TITLE1">
<b>項目名</b>
</div>

<h1>h1タグ：文書の題名</h1>


<table class="table1">
<tbody>

<tr>
<th rowspan="2">見出し1<br/>
<small>〇〇年〇〇月〇〇日</small><br/>
<br/>
〇〇〇〇
</th>
<td rowspan="2" class="td1_2">１の１<br/></td>
<td colspan="2">１の２<br/>〇〇〇〇〇</td>
<td class="td_border1">１の３</td>
</tr>

<tr>
<td colspan="3">１の４：<br/>〇〇〇〇〇〇〇</td>
</tr>

<tr class="tr1">
<td colspan="5">見出し２：
<small>説明文。サンプルテキスト。〇〇〇〇〇〇〇〇</small>
</td>
</tr>

<tr>
<th rowspan="3">見出し３<br/>
<small>〇〇〇〇〇〇</small>
</th>
<td colspan="5">
<b>小見出し</b><br/>
３の１：〇〇〇〇〇〇〇
</td>
</tr>

<tr>
<td colspan="5">
<b>小見出し</b><br/>
３の２：〇〇〇〇〇〇〇
</td>
</tr>

<tr>
<td colspan="3">
<b>小見出し</b><br/>
３の３：〇〇〇〇〇〇〇
</td>
<td class="td_border1">３の４</td>
</tr>

<tr class="tr1">
<th>見出し４</th>
<td colspan="5">４の１<br/>
<input type="checkbox"/>項目1
<input type="checkbox"/>項目2
<input type="checkbox"/>項目3<br/>
<input type="checkbox"/>項目4
<input type="checkbox"/>項目5
<input type="checkbox"/>項目6<br/>
</td>
</tr>

<tr class="tr1">
<th>見出し５</th>
<td colspan="5">５の１<br/>
<b>(ふりがな)</b><br/>
<b>(氏名)</b><br/>
</td>
</tr>

<tr class="tr1">
<th>見出し６</th>
<td colspan="2">６の１</td>
<td colspan="3">６の２</td>
</tr>

<tr>
<th rowspan="2">見出し７</th>
<td class="td_justify">所在地</td>
<td colspan="5">７の１</td>
</tr>

<tr>
<td class="td_justify">名称</td>
<td colspan="5">７の２</td>
</tr>

</tbody>
</table>



<table class="table2">
<tbody>

<tr>
<th>見出し８</th>
<td>８の１</td>
<td>８の２</td>
<td>８の３</td>
</tr>

<tr>
<th>見出し９</th>
<td>９の１</td>
<td>９の２</td>
<td>９の３</td>
</tr>

</tbody>
</table>

</body>
</html>
TestHTML_table_colspan_rowspan2.html のソース
