Спасибо @theblackips за ваш вклад - это очень полезный метод.
Я закончил с подходом jquery, чтобы получить макет, который я хотел.
Я использовал jquery.load, чтобы вставить содержимое внешнего файла в тег таблицы.
Каждый внешний файл имеет правильную компоновку с учетом ширины окна.
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="Homepage_content/jquery.min.js"></script>
<style>
table {
margin: auto;
table-layout: fixed;
width: 100%;
margin-left: 0%;
text-align:center;
}
td {
vertical-align: top;
}
.thumbImg {
margin: auto;
width:100%;
width: 140px;
height: 140px;
background-position: center center;
background-repeat: no repeat;
background-size: cover;
}
.descript {
font-size: 20px;
font-weight: bold;
}
</style>
<script>
function Reloader() {
var vwidth = window.innerWidth;
if (vwidth <= 340){
$('#links').load('Homepage_content/table1.html');
}
else if (vwidth <= 510){
$('#links').load('Homepage_content/table2.html');
}
else if (vwidth <= 680){
$('#links').load('Homepage_content/table3.html');
}
else if (vwidth <= 850){
$('#links').load('Homepage_content/table4.html');
}
else if (vwidth > 1020){
$('#links').load('Homepage_content/table5.html');
}
}
</script>
</head>
<body onLoad="Reloader()" onResize="Reloader()">
<img src="Homepage_content/bbg.jpg" id="fauxbg"/>
<div>
<br/>
<table id="links">
</table>
</div>
</body>
</html>