Struts 2

I support the notion that HTML tables suck! In 2009 when i was working on a project for a web hosting company that was doing something like a data grid table with choices of either HTML TD/TR tags or DIV + CSS, i immediately drove the project into the DIV + CSS direction because i knew HTML tables were a quick quirk and was going nowhere. HTML tables locks you up while your page renders and returns control only after completion, a far feat from how div renders.

If you want to create HTML tables like the one below with pure DIV + CSS, here is a recipe for you.

While this may be an accomplishment for some, seeing hand crafted DIV + CSS work, i urge all of us to quickly get our heads into JSF 2 because it promises rapid view layer development through mature widget providers and a component based approach of managing UI.

HTML

<div class="inbox" style="clear:both;width:940px;">
  <div class="div-inbox-body">
  	<div class="inbox-body-row new unread">
		<div class="inbox-received">23 Mar 2010</div>
		<div class="inbox-company">Kingston Global Pte Ltd</div>
		<div class="inbox-domain">java.sg</div>
		<div class="inbox-delivery">Email</div>
		<div class="inbox-status">Open</div>
		<div class="inbox-user">Ken</div>
		<div class="inbox-download">Complete</div>
		<div class="inbox-id">23453</div>
	</div>
  </div>
</div>

CSS

.inbox{
	background-color:#f7f7f7;
}
.inbox-received{
	width:10%;
	display:inline;
	float:left;
}
.ie .inbox-company{
	width:24%;
	height:15px;
	display:inline;
	float:left;
	overflow:hidden;
}
.inbox-company{
	width:25%;
	height:15px;
	display:inline;
	float:left;
	overflow:hidden;
}
.inbox-domain{
	width:22%;
	height:15px;
	display:inline;
	float:left;
	overflow:hidden;
}
.inbox-delivery{
	width:11%;
	display:inline;
	float:left;
}
.inbox-status{
	width:7%;
	display:inline;
	float:left;
}
.inbox-user{
	width:11%;
	display:inline;
	float:left;
}
.inbox-download{
	width:10%;
	display:inline;
	float:left;
}
.inbox-id{
	width:4%;
	display:inline;
	float:left;
}
.inbox-body-row{
	height:20px;
	border-top:1px solid #dedede;
}

If you are interested, here is actually the actual piece of code that was originally written using Struts 2 tag on a JSP page. It iterates through a list to print out each div row.

<s:div cssClass="inbox" cssStyle="clear:both;width:940px;margin-top:10px;">
  <s:div cssClass="div-inbox-body">
    <% /* iterate throught the list and print out each row */ %>
    <s:iterator value="requestList">
      <% /* if status is new, bold it css */ %>
        <s:a href="%{initViewDomainInvoiceRequest}?q=%{invoiceRequestId}">
          <s:div cssClass="inbox-body-row new unread">
            <s:div cssClass="inbox-received"><s:property value="%{metaRequestReceivedDatetime}"/></s:div>
            <s:div cssClass="inbox-company"><s:property value="%{company}"/></s:div>
            <s:div cssClass="inbox-domain"><s:property value="%{domain}"/></s:div>
            <s:div cssClass="inbox-delivery"><s:property value="%{deliveryMethod}"/></s:div>
            <s:div cssClass="inbox-status"><s:property value="%{status}"/></s:div>
            <s:div cssClass="inbox-user"><s:property value="%{name}"/></s:div>
            <s:div cssClass="inbox-download">&nbsp;</s:div>
            <s:div cssClass="inbox-id"><s:property value="%{invoiceRequestId}"/></s:div>
          </s:div>
        </s:a>
    </s:iterator>
  </s:div>
</s:div>