【PowerAutomate】自動作成したOneNoteページにて罫線が表示されない（HTML）

先日、OneNoteからHTMLを取得する方法についての記事を書きました。

しかし、実行してみると、罫線が表示されない？！

表内にカーソルを移動させた状態で、上の「表」タブ＞罫線を表示しない。

これによって罫線の表示・非表示を切り替えることができます。

・・・そういう問題ではない！

自動作成がメインの話なので、１か月分変更していられませんね。

HTMLのほうを確認していきます。

PowerAutomateで取得したHTML
HTMLの修正点①罫線
HTMLの修正点②改行
修正後のHTML

PowerAutomateで取得したHTML

<html lang="ja-JP">
	<head>
		<title>1日（土）</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="created" content="2023-04-01T12:00:00.0000000" />
	</head>
	<body data-absolute-enabled="true" style="font-family:Yu Gothic;font-size:11pt">
		<div style="position:absolute;left:48px;top:115px;width:223px">
			<p style="font-family:Calibri;margin-top:0pt;margin-bottom:0pt"><span style="color:red;text-decoration:underline">※入力は朝礼までに行うこと</span></p>
			<br />
			<table style="border:1px solid;border-collapse:collapse">
				<tr>
					<td style="background-color:#d8d8d8;border:1px solid;font-family:Calibri"><span style="font-weight:bold">記入者</span></td>
					<td style="background-color:#d8d8d8;border:1px solid;font-family:Calibri"><span style="font-weight:bold">連絡事項</span></td>
				</tr>
				<tr>
					<td style="border:1px solid"><br />
					</td>
					<td style="border:1px solid"><br />
					</td>
				</tr>
				<tr>
					<td style="border:1px solid"><br />
					</td>
					<td style="border:1px solid"><br />
					</td>
				</tr>
				<tr>
					<td style="border:1px solid"><br />
					</td>
					<td style="border:1px solid"><br />
					</td>
				</tr>
			</table>
			<br />
		</div>
	</body>
</html>

PowerAutomateで取得したHTMLにはクセがあるようです。

これをそのまま自動作成に使用すると、罫線が表示されません。

左側が原型、右側が取得したHTMLから作成したもの（罫線は表示済み）です。

しかも、改行が２倍されていて間延びしてますね。

この罫線と改行を修正していきたいと思います。

HTMLの修正点①罫線

「style="border:1px solid;border-collapse:collapse"」
↓
「border="1"」

わかりにくいですが「style=…」の部分を丸ごと「border=”1″」に変更します。

HTMLの修正点②改行

改行の基本的なコード をすべて削除していきます。

すると今度は逆に行間がほしいところまでつめられてしまいます。

しかし を使うとなぜか２行分の改行になってしまいます。

での改行ならどうだろうか。

以下まとめ

<br />：２行分の改行となった
<br>：２行分の改行となった
<p> </p>：半角の空白を入れる→改行されなかった
<p>　</p>：全角の空白を入れる→デフォルトのサイズで改行された
<p style="font-family:Calibri;margin-top:0pt;margin-bottom:0pt">　</p>：直前の<p></p>コピーして、全角の空白を入れた→同じサイズで改行された

それぞれ の本来の使い方ではありませんが、自動作成のためには以上の結果となりました。

修正後のHTML

<html lang="ja-JP">
	<head>
		<title>1日（土）</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="created" content="2023-04-01T12:00:00.0000000" />
	</head>
	<body data-absolute-enabled="true" style="font-family:Yu Gothic;font-size:11pt">
		<div style="position:absolute;left:48px;top:115px;width:223px">
			<p style="font-family:Calibri;margin-top:0pt;margin-bottom:0pt"><span style="color:red;text-decoration:underline">※入力は朝礼までに行うこと</span></p>
			<p style="font-family:Calibri;margin-top:0pt;margin-bottom:0pt">　</p>
			<table border="1">
				<tr>
					<td style="background-color:#d8d8d8;border:1px solid;font-family:Calibri"><span style="font-weight:bold">記入者</span></td>
					<td style="background-color:#d8d8d8;border:1px solid;font-family:Calibri"><span style="font-weight:bold">連絡事項</span></td>
				</tr>
				<tr>
					<td style="border:1px solid">
					</td>
					<td style="border:1px solid">
					</td>
				</tr>
				<tr>
					<td style="border:1px solid">
					</td>
					<td style="border:1px solid">
					</td>
				</tr>
				<tr>
					<td style="border:1px solid">
					</td>
					<td style="border:1px solid">
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>