ＨＴＭＬとＣＳＳを使用したテーブルデザインと配置

Question

こんにちは。
このたびは行き詰まったテーブルのデザインについて、お知恵を拝借したく、ご質問させて頂きました。

社内で使用されているシステムの都合上、CSSはスクリプトとしてしか記載することが出来ません。プラグインやJavaScriptを使用することも不可能です。また、空白などにはシステムが自動的にコードを追加してくるようです。
現在のコードは一番下に記入させて頂いております。

●行いたいことは，

見出し
箇条書き
テーブル
区切り線

という組み合わせをいくつか楯にならべることです。
が、区切り線の上下の余白がどうしても均等になりません。

また上司いわく、見出しとテーブルをオシャレでカラフルなデザインにするようにとのことなのですが、見出しとテーブルに画像を使用する事はしたくないそうです。

作成しているのは、書籍やネットで調べながらなんとかＨＴＭＬとＣＳＳを書いている程度のほとんど初心者です。

どうかご教授頂けますよう、お願い申し上げます。

<div style="margin: 0px 0px 0px 1px; width: 678px; height: 57px; background-color: #ebfaff;"><span style="left: 10px; font-size: 16px; font-family: 'MS 明朝', serif; line-height: 350%; font-weight: bold;">　LIMEX製品価格表</span></div>
<div style="position: relative; padding-left: 30px;">&nbsp;<br /><span style="font-size: 16pt;"><a class="midashi"><strong>名刺</strong></a></span></div>
<div style="padding-left: 30px;"><br /><span style="font-size: 12pt;">・サイズ：91&times;55mm</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・シートの厚み：300&mu;、オンデマンド印刷</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・1箱100枚入りご発注は箱単位で承ります。</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・完全aiデータ入稿納期はご相談ください目安４営業日発送</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・新規デザイン料、送料は別途お見積もりいたします。　</span></div>
<div style="text-align: left; padding-left: 30px;"><span style="font-size: 12pt;">　参考価格：デザイン作成費：3,000円～</span><br /><br /></div>
<div style="padding-left: 30px;">
<table style="border-collapse: collapse; margin-right: auto; margin-left: 30px;" border="3" align="left">
<tbody>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">&nbsp;</span></td>
<td style="width: 70px; text-align: center;" valign="middle"><span style="font-size: 12pt;">片面カラー</span></td>
<td style="width: 70px; text-align: center;" valign="middle"><span style="font-size: 12pt;">両面カラ－</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">100枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;3,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;4,000</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">200枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;4,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;5,000</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">300枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;5,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;6,000</span></td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 30px;"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr /><br /><br /></div>
<div style="padding-left: 30px;"><span style="font-size: 16pt;"><a class="midashi"><strong>中綴じ冊子</strong></a></span></div>
<div style="padding-left: 30px;"><br /><span style="font-size: 12pt;">・仕上がりサイズ：Ａ４、両面カラー</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・製本加工：中綴じ</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・シートの厚み：200&mu;、オフセット印刷100部以下はオンデマンド印刷</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・完全aiデータ入稿納期はご相談ください目安１２営業日発送</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・新規デザイン料は別途お見積もりいたします。 　</span></div>
<div style="text-align: left; padding-left: 30px;"><span style="font-size: 12pt;">　参考価格：デザイン作成費：１頁5,000円～</span><br /><br /></div>
<div style="padding-left: 30px;">
<table style="border-collapse: collapse; margin-right: auto; margin-left: 30px;" border="3" align="left">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">部数</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">8ページ</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">12ページ</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">16ページ</span></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">100部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;80,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@800</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;110,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@1,100</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;125,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@1,250</span></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">500部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;275,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@550</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;365,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@730</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;430,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@860</span></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">1,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;360,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@360</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;460,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@460</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;540,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@540</span></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">2,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;520,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@260</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;660,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@330</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;780,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@390</span></td>
</tr>
<tr style="height: 10px;">
<td style="height: 10px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">3,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;630,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@210</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;810,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@270</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;930,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@310</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

<style type="text/css">
a.midashi {
	display: block;
	position: relative;
	width: 200px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #212d34;
	background: #ffe4e1;
	border:1px solid #fff;
	overflow: hidden;
        font-size: 18px;
        letter-spacing: 0.1em;
}
</style>

追加

使用されているのは「ＣＭＳ　blue Monkey」で、スタイルシートは少なくとも目に見える範囲には存在しません。そのためＣＳＳを記載できるのが、「</>スクリプト埋め込みブロック」というブロックのみとなっております。
初期設定はシステム会社の方が行ったらしく、現在サーバーに繋ぐ為の情報が見つからず直にファイルを開いて編集することは出来ません。

Comments

[kei344]

「CSSはスクリプトとしてしか記載することが出来ません」とはどういう状況でしょうか。提示されているCSSはHTML中に書くためのものに見受けられますが。

[yambejp]

「CSSはスクリプトとしてしか記載することが出来ません」
の意味を説明してください
インラインのHTMLでstyleタグでしか書けないということですか？

[m.ts10806]

CSSはスクリプトではないですよ。スタイルシートです。

[kyo30]

説明がへたで申し訳ありません。
ＣＳＳがスタイルシートに記載する物と言うことはわたっているのですが、社内で使用されている「ＣＭＳ　blue Monkey」というものにはスタイルシートが少なくとも目に見える範囲には存在しません。
そのためＣＳＳを記載できるのが、「</>スクリプト埋め込みブロック」というブロックのみとなります。
ちなみに初期設定はシステム会社の方がされたようなのですが、サポートがきれているためお聞きすることは出来ません。前任者は引き継ぎをせずに退職し、社内には誰も詳しいことを分かる人間が居ない状態です。

[m.ts10806]

質問内容調整いただければと。
CSSもJavaScriptも自分で作ったものは適用できそうですよ。
https://liginc.co.jp/447856
>HTMLとCSSのコーディング対応も可能です。専用のディレクトリ構成にはなっていますが、CSSやJS、固定で使う画像は所定の位置にアップすれば大丈夫です。

Answer 1

<div style="padding-left: 30px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr /> //hr...?
<br />
<br />
</div>

うわ～っ・・・て感じの改行タグが入っていますが、 margin というものはご存知ないのでしょうか？
改行タグで頑張って揃えようとしてもコードは長くなるし揃えるのは大変だし限度があります。
marginを使っても揃いませんか？

Comments

[azuapricot]

position:relative や over-flow:hidden や <br>タグを使って頑張ってなんとかしようとしてるんだなーというのがcodepenで実際に触ってみて感じましたが、自分で自分の首を締めてしまっているような・・・。

[m.ts10806]

インライン入れすぎて全体像が見えないのが難ですね。

[azuapricot]

ちゃんとコーディングすればめちゃめちゃシンプルになりそうなんですけどねぇ・・・

[mutsuki22]

ちょっとした部分は自分もstyleを使ってしまう癖がある自分があまり言えることではないですが、クラス（というかcss）でもう少しシンプルには出来そうですね。
ただ、ほとんど初心者という事ですし、そこは繰り返しで身につけて貰えるよう頑張って貰いたいです。

Answer 2

<br>を使う方法での回答をします。できるならpaddingとmarginを使って実装した方がいいと思います。

• tableタグの align="left が効いているせいでdivタグから要素が浮いています。align="leftを両方のテーブルから取り除いてください。

• 見出しの名刺には <br />が入っていて上に幅をもたせているので中綴じ冊子の方にも持たせる。

• <br/>の数を調整する。

修正後例

<div style="margin: 0px 0px 0px 1px; width: 678px; height: 57px; background-color: #ebfaff;"><span style="left: 10px; font-size: 16px; font-family: 'MS 明朝', serif; line-height: 350%; font-weight: bold;">　LIMEX製品価格表</span></div>
<div style="position: relative; padding-left: 30px;">&nbsp;<br /><span style="font-size: 16pt;"><a class="midashi"><strong>名刺</strong></a></span></div>
<div style="padding-left: 30px;"><br /><span style="font-size: 12pt;">・サイズ：91&times;55mm</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・シートの厚み：300&mu;、オンデマンド印刷</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・1箱100枚入りご発注は箱単位で承ります。</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・完全aiデータ入稿納期はご相談ください目安４営業日発送</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・新規デザイン料、送料は別途お見積もりいたします。　</span></div>
<div style="text-align: left; padding-left: 30px;"><span style="font-size: 12pt;">　参考価格：デザイン作成費：3,000円～</span><br /><br /></div>
<div style="padding-left: 30px;">
<table style="border-collapse: collapse; margin-right: auto; margin-left: 30px;" border="3">
<tbody>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">&nbsp;</span></td>
<td style="width: 70px; text-align: center;" valign="middle"><span style="font-size: 12pt;">片面カラー</span></td>
<td style="width: 70px; text-align: center;" valign="middle"><span style="font-size: 12pt;">両面カラ－</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">100枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;3,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;4,000</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">200枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;4,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;5,000</span></td>
</tr>
<tr>
<td align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">300枚</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;5,500</span></td>
<td style="text-align: right; width: 70px;"><span style="font-size: 12pt;">&yen;6,000</span></td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 30px;"><br /><hr /></div>
<div style="padding-left: 30px;">&nbsp;<br /><span style="font-size: 16pt;"><a class="midashi"><strong>中綴じ冊子</strong></a></span></div>
<div style="padding-left: 30px;"><br /><span style="font-size: 12pt;">・仕上がりサイズ：Ａ４、両面カラー</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・製本加工：中綴じ</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・シートの厚み：200&mu;、オフセット印刷100部以下はオンデマンド印刷</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・完全aiデータ入稿納期はご相談ください目安１２営業日発送</span></div>
<div style="padding-left: 30px;"><span style="font-size: 12pt;">・新規デザイン料は別途お見積もりいたします。 　</span></div>
<div style="text-align: left; padding-left: 30px;"><span style="font-size: 12pt;">　参考価格：デザイン作成費：１頁5,000円～</span><br /><br /></div>
<div style="padding-left: 30px;">
<table style="border-collapse: collapse; margin-right: auto; margin-left: 30px;" border="3">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">部数</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">8ページ</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">12ページ</span></td>
<td style="width: 120px; text-align: center; height: 24px;" colspan="2" valign="middle"><span style="font-size: 12pt;">16ページ</span></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">100部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;80,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@800</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;110,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@1,100</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;125,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@1,250</span></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">500部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;275,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@550</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;365,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@730</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">&yen;430,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 24px;"><span style="font-size: 12pt;">@860</span></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">1,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;360,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@360</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;460,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@460</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;540,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@540</span></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">2,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;520,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@260</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;660,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@330</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">&yen;780,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 48px;"><span style="font-size: 12pt;">@390</span></td>
</tr>
<tr style="height: 10px;">
<td style="height: 10px;" align="center" valign="middle" width="padding-left: 30px;"><span style="font-size: 12pt;">3,000部</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;630,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@210</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;810,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@270</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">&yen;930,000</span></td>
<td style="text-align: right; width: 55px; padding-left: 30px; height: 10px;"><span style="font-size: 12pt;">@310</span></td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 30px;"><br /><hr /></div>

Answer 3

■解決方法

tableを囲っているdivのstyleにoverflow:hidden;を追加して下記のようにしてください。
こうする事でtableを囲っている親要素の高さが保たれるようになります。
あとは、hrの上下に同じだけbrを入れてください。

<div style="padding-left: 30px; overflow: hidden;">

■上下の高さが合わなかった原因

Chromeのデベロッパーツールで見ると
理由はよくわかりませんが、デフォルトでtableにfloatがかかっているため
親要素の高さが保たれなくなっていました。

このため、tableを囲っているdivの高さが無くなり、tableを囲っているdivの要素の次にある、
「中綴じ冊子」を囲っているdivの一番上がtableの下に潜り込んでいる状態になっていました。
下図参照

■見出しとテーブルの装飾

下記サイトなどを参考にされてはどうでしょうか。

・シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
https://www.nxworld.net/tips/50-css-heading-styling.html

・HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点
https://liginc.co.jp/web/html-css/html/86739