HTMLファイルをExcelブックとして利用する

ご存知の方も多いのではないかと思うのですが、HTMLとして作成したファイルはExcelで開くことができます。

例えば、以下のようなHTMLをテキストエディタで書いたとします。

<head>
  <meta charset=“utf-8”>
</head>
<body>
  <h1>こんにちは</h1>
</body>

これを拡張子を「.html」あるいは「.xls」にしてExcelで開きます。すると… f:id:m0t0k1m0t0k1:20160128200711j:plain

「.xls」だと拡張子と中身が違うので警告が出ますが、Excelとして表示することができています。

このとき、スタイルシートもある程度は汲み取ってくれるようで、text-alignなどで右寄せにしたものでもExcelの書式で右寄せにしてくれたりします。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>excel</title>
  <style>
  table {
    border: 1px solid #ccc;
  }
  th,td {
    padding: 4px;
  }
  table tr.header {
    border-bottom: 1px solid #ccc;
  }
  table tr.header>th {
    background-color: #666;
    color: #eee;
  }
  table tr.summary {
    border-top: 1px solid #ccc;
  }
  table tr.summary>td {
    background-color: #ccc;
    color: #666;
  }
  table tr.detail>td.currency {
    text-align: right;
  }
  </style>
</head>
<body>
<h1>お見積もり</h1>
<p>お見積もりを下記のとおりいたします。</p>
<p>どうぞご査収ください。</p>
<table>
  <tr class="header">
    <th>No.</th>
    <th>摘要</th>
    <th>単価</th>
    <th>数量</th>
    <th>金額</th>
  </tr>
  <tr class="detail">
    <td>1</td>
    <td>基本設計</td>
    <td class="currency">¥5,000</td>
    <td>12時間</td>
    <td class="currency">¥60,000</td>
  </tr>
  <tr class="detail">
    <td>2</td>
    <td>実装</td>
    <td class="currency">¥5,000</td>
    <td>20時間</td>
    <td class="currency">¥100,000</td>
  </tr>
  <tr class="detail">
    <td>3</td>
    <td>テスト</td>
    <td class="currency">¥5,000</td>
    <td>10時間</td>
    <td class="currency">¥50,000</td>
  </tr>
  <tr class="summary">
    <td></td>
    <td>合計</td>
    <td>¥5,000</td>
    <td>42時間</td>
    <td>¥210,000</td>
  </tr>
</body>
</html>

こんな（適当すぎる…）ものをHTMLとして書いてしまいます。ブラウザで開くとこうなります。 f:id:m0t0k1m0t0k1:20160128200734j:plain