簡易リンク集の作成方法

以前仕事中によく使われていたので、bak&紹介します
リンク集.htm
<html>
	<head>
		<title>◆□■◇リンク集</title>
		<script language="JavaScript">
		<!--
			function rsz1() {
				alert("ブラウザの最適サイズを自動調整にしようと思ったが、未対応")
				//alert(window.outerWidth);
				//alert(window.outerHeight);
				//window.resizeTo(1226, 714);
				//window.outerWidth=1226;
				//window.outerHeight=714;
			}
		-->
		</script>
	</head>
	<body class="divBody">
		<table style="width:100%;border:0px;margin:0px 0px;padding:0px 0px;">
			<tr>
				<td style="width:12%;font-size:10;">2019/11/01～随時更新中</td>
				<td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="red">最優先</marquee></td>
				<td style="width:28%;font-size:10;color:red;"><marquee behavior="scroll" bgcolor="yellow">優先</marquee></td>
				<td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="green">★★★ 勤務表：毎月10日、20日に注意</marquee></td>
				<td = style="width:4%;text-align:right;">
					<input style="font-size:1;" type="button" value="..." onclick="rsz1();" title="リサイズ"/>
				</td>
			</tr>
		</table>
		<hr>
		<div class="divContents">
			<span class="spanPartTitle">◆□Shareサーバー:ABC</span>
			<table class="tbl">
				<tr>
					<th class="th_doing"> 作業標題1 </th>
					<td class="td1">
						<a href="link1"  target="_blank" title="link1_title">linkComment1</a><br>
						
						<!-- 折り畳み展開ポインタ START -->
						<br>
						<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
							<a style="cursor:pointer;">▼【詳細スケジュール】</a>
						</div>
						<!-- 折り畳み展開ポインタ END -->
						<!-- 折り畳まれ部分 START -->
						<div id="open" style="display:none;clear:both;">
							<pre>
１．
２．
３．
４．
５．
６．
・・・
１００．
							</pre>
						</div>
						<!-- 折り畳まれ部分 END -->
					</td>
					<td class="td2">link備考1</td>
				</tr>
			</table>
			<span class="spanPartTitle">■◇ローカル資料</span>
			<table class="tbl">
				<tr>
					<th class="th"> 標題2 </th>
					<td class="td1">
						<a href="link2" >linkComment2</a><br>
					</td>
					<td class="td2">link備考2</td>
				</tr>
			</table>

			<table class="tbl">
				<tr>
					<th class="th_done"> 標題3 </th>
					<td class="td1">
						<a href="link2" >linkComment2</a><br>
					</td>
					<td class="td2">link備考2</td>
				</tr>
			</table>

		</div>
		<hr>
		<div style="text-align:right;font-size:10;">@個人作業用。効率的に</div>
	</body>
<style>
	.divBody {
	    background-color : #CCCCCC;
	}
	.tbl{
		width:90%;
	}
	.th{
		background-color:#AAAAAA;
		color:white;
		width: 30%;
		text-align: left;
		font-size:13;
		padding: 0.5em 0 0.5em 1em;
	}
	.th_doing{
		background-color:#000000;
		color : #3CB371;
		width: 30%;
		text-align: left;
		valign: middle;
		font-size:13;
		padding: 0.5em 0 0.5em 1em;
	}
	.th_done{
		background-color:#3CB371;
		color : #000000;
		width: 30%;
		text-align: left;
		valign: middle;
		font-size:13;
		padding: 0.5em 0 0.5em 1em;
	}
	.td1{
		background-color:#AAAAAA;
		width: 60%;
		font-size:12;
		padding: 0.5em 0.5em 0.5em 0.5em;
	}
	.td2{
		background-color:#AAAAAA;
		width: 10%;
		font-size:10;
		text-align: left;
		valign: top;
	}
	.divContents{
		background-color:#BBBBBB;
		height:520px;
		overflow-x:hidden;
		overflow-y:scroll;
		padding:5px;
		boder:0px solid #000;
	}
	.spanPartTitle{
		font-size:22;
	}
</style>
</html>
備考

※ブラウザはIEを推薦。
※ブラウザの最適サイズをJsで自動調整にさせようと思ったが、良い方法をまだ