title: Displaying Order History without using tables
body: <p>i am new to UI devlopment.I use to do coding but i have been asked to get the value from xml and display order history without using tables.I am getting xml from jax-rs and want to display on html.</p>
  
  <p>My Xml is:</p>
  
  <pre><code>&lt;orderHistory&gt;
  
  &lt;orders&gt;
  &lt;description&gt;Electronic order&lt;/description&gt;
  &lt;detail_url&gt;
  http://shop.scholastic.com/webapp/wcs/stores/servlet/MyAcctItemHistoryView?langId=-1&amp;amp;storeId=10751&amp;amp;orderId=7039011
  &lt;/detail_url&gt;
  &lt;lineItemCount&gt;ssolineItemCount&lt;/lineItemCount&gt;
  &lt;order_id&gt;7039012&lt;/order_id&gt;
  &lt;sort_date&gt;1448316&lt;/sort_date&gt;
  &lt;status&gt;Shipped&lt;/status&gt;
  &lt;store_label&gt;SSO Store&lt;/store_label&gt;
  &lt;submitted_date&gt;11/19/2015&lt;/submitted_date&gt;
  &lt;total&gt;11.76&lt;/total&gt;
  &lt;tracking_href&gt;www.abc.com&lt;/tracking_href&gt;
  &lt;tracking_num&gt;1234&lt;/tracking_num&gt;
  &lt;/orders&gt;
  
  &lt;orders&gt;
  &lt;description&gt;Electronic order&lt;/description&gt;
  &lt;detail_url&gt;
  http://shop.scholastic.com/webapp/wcs/stores/servlet/MyAcctItemHistoryView?langId=-1&amp;amp;storeId=10751&amp;amp;orderId=7039009
  &lt;/detail_url&gt;
  &lt;lineItemCount&gt;tsolineItemCount&lt;/lineItemCount&gt;
  &lt;order_id&gt;7039009&lt;/order_id&gt;
  &lt;sort_date&gt;1448316&lt;/sort_date&gt;
  &lt;status&gt;Cancelled&lt;/status&gt;
  &lt;store_label&gt;Teacher Store&lt;/store_label&gt;
  &lt;submitted_date&gt;11/19/2015&lt;/submitted_date&gt;
  &lt;total&gt;15.25&lt;/total&gt;
  &lt;tracking_href&gt;www.abc.com&lt;/tracking_href&gt;
  &lt;tracking_num&gt;1234&lt;/tracking_num&gt;
  &lt;/orders&gt;
  &lt;orderHistory&gt;
  </code></pre>
  
  <p>My Html is like:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;script language="javascript"&gt;
      var xmlhttp;
      function init() {
         // put more code here in case you are concerned about browsers that do not provide XMLHttpRequest object directly
         //xmlhttp = new XMLHttpRequest();
         if (window.XMLHttpRequest)
          { // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          }
          else
          { // code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
  
  
      }
      function getdetails() {
  
                      var empno = document.getElementById("empno");
                          var url = "http://localhost:8080/NewShot/schl-api/myresource/com/";
                          xmlhttp.open('GET', url, false);
                          xmlhttp.send();
  
                          if (xmlhttp.readyState == 4) {
                              if (xmlhttp.status == 200) {
                                  //alert('Inside');
  
                                  var xmlData = xmlhttp.responseXML;
  
                                  if (!xmlData) {
  
                                      xmlData = (new DOMParser())
                                              .parseFromString(
                                                      xmlhttp.responseText,
                                                      'text/xml');
  
                                  }
  
                                  // alert('Content'+xmlData);
                                  var store , O_url ,status,total,description,tracknum,litncount,trackhrf,subdate,sdate,durl,elements;
                                  var conference = xmlData
                                          .getElementsByTagName("orders");
  
                                           for (var i = 0; i&lt; conference.length; i++) {
                                                  // alert('In For');
                                                  store = conference[i].getElementsByTagName("store_label")[0].firstChild.data;
                                                  O_url = conference[i].getElementsByTagName("order_id")[0].firstChild.data;
                                                  status = conference[i].getElementsByTagName("status")[0].firstChild.data;
                                                  total = conference[i].getElementsByTagName("total")[0].firstChild.data;
                                                  description = conference[i].getElementsByTagName("description")[0].firstChild.data;
                                                  tracknum = conference[i].getElementsByTagName("tracking_num")[0].firstChild.data;
                                                  litncount = conference[i].getElementsByTagName("lineItemCount")[0].firstChild.data;
                                                  trackhrf = conference[i].getElementsByTagName("tracking_href")[0].firstChild.data;
                                                  subdate = conference[i].getElementsByTagName("submitted_date")[0].firstChild.data;
                                                  sdate = conference[i].getElementsByTagName("sort_date")[0].firstChild.data;
                                                  durl = conference[i].getElementsByTagName("detail_url")[0].firstChild.data;
  
                                                  //alert(date+" "+name+" "+url);
                                                   elements +="StoreType::"+store+ "&lt;br&gt;" +"OrderUr::"+ O_url + "&lt;br&gt;" + 
                                                  "Status::"+status+"&lt;br&gt;"+"Total Bill::"+total+"&lt;br&gt;"+""+"Item Description::"+description+"&lt;br&gt;"+"Trackinh Number::"+tracknum+"&lt;br&gt;"+
                                                  "LineItemCount::"+litncount+"&lt;br&gt;"+"Tracking Link::"+trackhrf+"&lt;br&gt;"+"Submission Date::"+subdate+"&lt;br&gt;"+"Sort Date::"+sdate+"&lt;br&gt;"+"DetailUrl::"+durl+"&lt;br&gt;&lt;br&gt;";
                                              }
  
                                           document.getElementById("demo").innerHTML= elements;
                                  /* date = conference[0]
                                          .getElementsByTagName("date")[0].firstChild.data;
                                   name = conference[0]
                                          .getElementsByTagName("name")[0].firstChild.data;
                                   url = conference[0]
                                          .getElementsByTagName("url")[0].firstChild.data;
                                      */
                                  // alert('Name'+name+'Date'+date+'url'+url);
  
  
  
                              } else {
                                  name = "";
                                  date = "";
                                  url = ""
                                  alert("Invalid Employee ID");
                              }
                          } else {
                              alert("Error -&gt;" + xmlhttp.responseText);
                          }
  
                      }
                  &lt;/script&gt;
    &lt;/head&gt;
    &lt;body  onload="init()"&gt;
     &lt;h1&gt;Call Scholastic Service &lt;/h1&gt;
  
     &lt;table&gt;
     &lt;tr&gt;
          &lt;input type="button" value="Get Details" onclick="getdetails()"/&gt;
     &lt;/tr&gt;
  
     &lt;/table&gt;
     &lt;p id="demo"&gt;&lt;/p&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to display value without using table in following format:</p>
  
  <pre><code>Store Label:    &lt;Value&gt;                               LineItem Count:&lt;Value&gt;
  
  OrderId:   &lt;Value&gt;                                    LineItem Count:&lt;Value&gt;
  
  Status Times: &lt;Value&gt;                                 Tracking Link:&lt;Value&gt;
  
  Total:   &lt;Value&gt;                                      Submission Date:&lt;Value&gt;
  
  Description:   &lt;Value&gt;                                Date Sorting:&lt;Value&gt;
  
  Tracking Number:&lt;Value&gt;
  
  Detail Url:&lt;Value&gt;
  </code></pre>
  
  <p>I tried using  but it was not proper.</p>
  
  <p>Thanks</p>