エクセルでのHTMLの表の切替(行・列切替も)

質問

こんにちは。
お世話になります。

ショッピングサイトで表示中のサイズ表を新たなデザインに変えることにしました。
具体的には下記に記載の通りです。

元は横に伸びる表記だったものをこのタイミングで縦に伸びる表記に変えます。
また、デザインもよりシンプルなものになります。

このアイテム１点であればこれにて作業完了なのですが、
1000点ともなると、仕組みを作った方がはるかに早いのですが、
手法が頭に浮かびません。

新レイアウトにするのは、エクセル上でひな形の表を作って、それをマクロでボタンを押せば
一気にHTMLのTABLEタグ付きで出力すればイケるかも、と思いました。
ではそのひな形の表を現在のHTMLタグから起こすには…
想像ができませんでした。

それともそもそもまったく違う手法の方が簡易…？難しいです。

よろしければご教示いただけないでしょうか。
ちなみに袖丈があるものもあったり、アイテムによって形状・揃えているサイズ展開が違うため、
テーブルの行や列はアイテムによって変わってきてしまい、○行○列のものです、と
いうことはできません。

--------------------
※現在のサイズ表である↓を

<font color=#000000 size=3><b>サイズ表</b></font><br><table width=300 cellspacing=0 cellpadding=2 bgcolor=#FFFFFF><tr><td bgcolor=#66CC66><table width=100% cellspacing=1 cellpadding=1 bgcolor=#FFFFFF><tr><td bgcolor=#99CC99><table width=100% cellspacing=0 cellpadding=20 bgcolor=#FFFFFF><tr><td bgcolor=#FFFFFF align=left><font color=#000000 size=3><table border=1 width=420><tr><td width=60></td><td width=60>92cm</td><td width=60>98cm</td><td width=60>104cm</td><td width=60>110cm</td><td width=60>116cm</td><td width=60>122cm</td></tr>
<tr><td width=60>総丈</td><td width=60>54cm</td><td width=60>57cm</td><td width=60>60cm</td><td width=60>63cm</td><td width=60>66cm</td><td width=60>69cm</td></tr>
<tr><td width=60>身幅</td><td width=60>26cm</td><td width=60>27cm</td><td width=60>28cm</td><td width=60>29cm</td><td width=60>30cm</td><td width=60>31cm</td></tr></table><br>※平置きでの採寸になるので、若干の誤差はご了承ください。<br></font></td></tr></table></td></tr></table></td></tr></table>

新しい以下のサイズ表表記に切り替えたいです。

【サイズ表】
<table>
<tr>
<th scope="row">年齢・身長</th>
<th scope="row">総丈</th>
<th scope="row">身幅</th>
</tr>
<tr>
<th scope="row">92cm</th>
<td>54cm</td>
<td>26cm</td>
</tr>
<tr>
<th scope="row">98cm</th>
<td>57cm</td>
<td>27cm</td>
</tr>
<tr>
<th scope="row">104cm</th>
<td>60cm</td>
<td>28cm</td>
</tr>
<tr>
<th scope="row">110cm</th>
<td>63cm</td>
<td>29cm</td>
</tr>
<tr>
<th scope="row">116cm</th>
<td>66cm</td>
<td>30cm</td>
</tr>
<tr>
<th scope="row">122cm</th>
<td>69cm</td>
<td>31cm</td>
</tr>
</table>
※平置きでの採寸になるので、若干の誤差はご了承ください。
<br>

ちなみに、新しいサイズ表は、サイズ表以外の他の商品情報とともに
以下のスタイルで定義されています。

<style>
.sc-table-01{width: 320px;font-size: 0.9em;}

.sc-table-01 table{
border-collapse:collapse;
margin: 5px;
width: 100%;
}

.sc-table-01 th{
font-style: normal;
font-size: 0.9em;
color: #000;
background-color: #FFD6C1;
border: 1px solid #999;
padding: 6px;
white-space: nowrap;
line-height: 150%;
}

.sc-table-01 td{
border: 1px solid #999;
font-size: 0.9em;
padding: 10px;
line-height: 150%;
}
</style>

<div class="sc-table-01">

回答No.1

sora1515

やりたいことはCSSで簡易化できます。

CSSやスタイルシート　のキーワードでぐぐって挑戦してみて下さい。
出た疑問はあらためてCSSについて質問した方がいいと思われます。

お礼

ありがとうございます。

CSSやスタイルシートはWEBページを表現する言語ですよね。
レイアウトを定義する塊と認識しています。

検索してみると以下のようなページも見つかりますが
近いものの、求めている内容とは違いました。
http://www.shurey.com/js/works/table_rotation.html

アドバイス頂きました、CSSで簡易化できる、というのは
HTMLファイル→HTMLファイル、についてですかね。
エクセルにCSSやスタイルシートがからむというのは
想像がつきませんでしたが、
とりあえずもう少しぐぐって挑戦してみます。