特定の条件下において<table>内のセルの背景色を変更したい

Question

前提・実現したいこと

いつもお世話になっております。

日毎の車両の仕事を登録して管理するWebアプリケーションを作っています。
任意登録の箇所であったり、まだその日の仕事が未登録の場合セルの背景色を変えることで視覚的に登録されてないことを示す機能を実装
したくて、コードを書いてみたのですが、色を変えることが出来ていません。
何かアドバイスを頂きたいです･･･。

該当のソースコード

<table class="Truck_table">
         <thead>
            <tr>
               <th class="space1" rowspan="2" colspan="4"></th>
<c:forEach begin="1" end="31" varStatus="stts">
               <th class="date" colspan="4">1月<c:out value="${stts.count}"></c:out>日</th></c:forEach>
               </tr>
               <tr>
               <c:forEach begin="1" end="31">
                  <th class="task_type">宵積卸地</th>
                  <th class="task_type">積地</th>
                  <th class="task_type">卸地</th>
                  <th class="task_type">宵積</th>
                  </c:forEach>
                  </tr>
                  </thead>

                  <c:forEach var="truck" items="${trucks}" varStatus="status">
                  <tbody>
                  <tr>
                  <td class="office_name" rowspan="4"><c:out value="${truck.office_name}"></c:out></td>
                  <td class ="truck_code" colspan="2" rowspan="4"><c:out value="${truck.truck_code}"></c:out></td>
                  <td class ="truck_type" rowspan="4"><c:out value="${truck.truck_type}"></c:out></td>

                  <td class ="time"><c:out value="${truck.mw_time}"></c:out></td>
                  <td class ="time"><c:out value="${truck.sa_time}"></c:out></td>
                  <td class ="time"><c:out value="${truck.wa_time}"></c:out></td>
                  <td class ="time"><c:out value="${truck.es_time}"></c:out></td>
                  </tr>

                  <tr><!--試験的にこの行のみに変更するコードを書いています。-->
                  <c:if test="${!empty truck.m_wholesale_area}" var="flg"/><!--formから内容が入力されて表示されているかを判断-->
                  <c:if test="${flg}" ><!--何かしら内容が入力されていた場合-->
                      <td class ="area" id="1"><c:out value="${truck.m_wholesale_area}"></c:out></td></c:if>
                  <c:if test="${!flg}" ><!--内容がnull、若しくは空文字になっている場合-->
                      <td class ="area" id="2"><c:out value="${truck.m_wholesale_area}"></c:out></td></c:if>
                  <c:if test="${!empty truck.stack_area}" var="flg"/>
                  <c:if test="${flg}" >
                      <td class ="area" id="1"><c:out value="${truck.stack_area}"></c:out></td></c:if>
                  <c:if test="${!flg}" >
                      <td class ="area" id="2"><c:out value="${truck.stack_area}"></c:out></td></c:if>
                  <c:if test="${!empty truck.wholesale_area}" var="flg"/>
                  <c:if test="${flg}" >
                      <td class ="area" id="1"><c:out value="${truck.wholesale_area}"></c:out></td></c:if>
                  <c:if test="${!flg}" >
                      <td class ="area" id="2"><c:out value="${truck.wholesale_area}"></c:out></td></c:if>
                  <c:if test="${!empty truck.e_stack_area}" var="flg"/>
                  <c:if test="${flg}" >
                      <td class ="area" id="1"><c:out value="${truck.e_stack_area}"></c:out></td></c:if>
                  <c:if test="${!flg}" >
                      <td class ="area" id="2"><c:out value="${truck.e_stack_area}"></c:out></td></c:if>
                   </tr>

                   <tr>
                   <td class ="time"></td>
                   <td class ="time"><c:out value="${truck.sa_time2}"></c:out></td>
                   <td class ="time"><c:out value="${truck.wa_time2}"></c:out></td>
                   <td class ="time"></td>
                   </tr>
                   <tr>
                   <td class ="area" id="3"></td>
                   <td class ="area" id="3"><c:out value="${truck.stack_area2}"></c:out></td>
                   <td class ="area" id="3"><c:out value="${truck.wholesale_area2}"></c:out></td>
                   <td class ="area" id="3"> <p><a href="<c:url value='/dispatch/show?id=${truck.id}' />">登録情報変更</a></p></td>
                   </tr>
                  </tbody>
                 </c:forEach>

         </table>

table.Truck_table td.area #1{　/*内容が入っていた場合。*/
	background:#fff;
}
table.Truck_table td.area #2{　/*内容が入っていなかった場合。*/
	background:#ffdead;
}

試したこと

上記コードの通り、<c:if>タグで条件分岐させれば実装できるかと思い書いてみました。
スタイルシートやjspは部分的に切り取って貼り付けていますので必要な情報が抜けているかもしれませんので
ご指摘頂けると幸いです。

補足情報（FW/ツールのバージョンなど）

Eclipse4.6Neon使用、　Tomcat8

追記

問題解決以前の問題が多いため、一度クローズにしておきます。
自己解決した場合回答欄に追記しようと思います。
－－－－－－－－－－－－－－－－
自己解決しました。
解決方法に関しましては自分のためにも別途記載しておきました。

Answer 1

モック作って確認してからにしないとどうにもならないと思います。
※全部見てるわけじゃないですがこの指摘は一度や二度じゃないはず

「そんなことしなくても動的な出力に対してどうなるか頭で完全に把握できるぜ」という自信があるならいいんですけど（私は自信があってもいきなりプログラム書きませんが）

• idは１ページ内に重複してはいけません。一意であることが求められます。

　なので、table.Truck_table td.areaとか前に書く必要なし。一意だから。

• 数値始まりには注意が必要(参考1/参考2)

※というか余程特別な理由がない限り採用すべきではない

Comments

[K_3578]

お世話になっております。

モックについては何度かご指摘頂いた際に中途半端な理解をして理解した物としていましたので、
一度モック自体を組まないといけないんですね。感謝致します。

id属性に関しましてはclass属性との違いを良く理解せずに使ってしまったのですが、
色々制約があるのですね。
どうやら解決以前の問題が多くあるようなので一度、出直させて頂きます。
回答ありがとうございました。

[m.ts10806]

制約というか「書いた通りに動いている」だけです。仕様通り。
仕様を把握できてない状態で思う通りに動くようにはできないし、もともと設計も何もしてない状態でやりたいことができるわけがないということです。
モックも「完成予定図」として設計段階でやること。

[K_3578]

コメントありがとうございます。
まだまだ基礎の勉強、それに開発する上での常識が足りてないようですので精進致します。
お時間を割いて頂きありがとうございました。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
追記:質問の内容については自己解決しました。
改めて回答ありがとうございました。

Answer 2

モック改めて作成。

<tr>
                   <c:if test="${!empty truck.m_wholesale_area}" var="flg"/>
                  <c:if test="${flg}" >
                      <td class ="area" bgcolor="ffffff"><c:out value="${truck.m_wholesale_area}"></c:out></td></c:if>
                  <c:if test="${!flg}" >
                      <td class ="area" bgcolor="ffdead"><c:out value="${truck.m_wholesale_area}"></c:out></td></c:if>

先に**<c:if>で<td>セル内がnot_empty**となる場合の条件分岐文を書き、
not_emptyの結果をvar属性にflgと言う変数に格納する。(1行目)
その後は再び<c:if>を使用し、flgがtrueとなる場合、falseとなる場合それぞれ<td>タグ内に
bgcolor属性を追加し、直接jsp内で背景色を指定する文を書く。
後は必要なセルの分同じ処理をvalueや最初の<c:if test>内を書き換えて書けばOK。

Comments

[K_3578]

思ったこと
このjsp内にbgcolor属性で直接背景色を指定するのは望ましい処理なのか否か。

自分でやってみたところやり方が分からず出来なかったが、スタイルシート内で
同じ事をする指示を書けるのか