サブファイルへ1行毎に属性を設定する方法

Excelで表を作成する際、行を見分けやすくするため一行毎に色を変えることがあります。SmartPad4iのサブファイル(表)でも同じように、一行毎に属性を設定して背景色を変えることが簡単にできますので、本記事にてご紹介します。

サブファイル(表)の行を塗り分ける方法

SP4iでは、HTML側の簡単な設定だけで1行毎に属性を設定することが可能です。

例えば、サブファイルを奇数行、偶数行に塗り分けることで、行ごとに塗り分ける、ストライプ表示ができます。

HTMLの記述方法

まず、HTML側では行を塗り分けるために、HTMLの2行目にtrタグを設定してtdタグを未定義にします。

次に、1行目のclass属性を odd-line 2行目のclass属性を even-lineに設定します。

  <table id="SFL01">
    <thead>
      <tr>
        <th>Field1</th>
        <th>Field2</th>
      </tr>  
    </thead>
    <tbody>
      <tr class="odd-line">
        <td id="LB01" width="120"></td>
        <td ><input type="text" value="" id="INP01" ></td>
      </tr>
      <tr class="even-line"><!-- 空行を追加 -->
      </tr>
    </tbody>
  </table>

cssの記述方法

css側では、odd-line(奇数行のclass属性名)とeven-line(偶数行のclass属性名)の描画設定を定義して奇数行を白、偶数行を薄い青色にします。

  <style>
   .odd-line td { background-color:#FFFFFF; }
   .even-line td{ background-color:#DDDDFF; }
  </style>

終わりに

もちろん、色を塗り分ける以外のcssを設定することも可能です。
行ごとのcss設定はHTML側をカスタマイズするだけで簡単に実現できますので是非ご活用ください。