Aligning Table Cells to Top.

Working on script that will dynamically generate tables from an array, below I have provided a portion of it.
I've tried everything but can't seem to get the data in the cells to align to the top.  I've tried valign = top, style.valign = top in the TR, TD tags.  Even trying to put the data in the cell into a <span> tag with valigns into that.  Nothing seems to align it top.
Though strangly most will work fine to align it left/right or center.


<HTML>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<STYLE></STYLE>



<SCRIPT language="JavaScript">

var nh = Array(
{"key": "1234", "ticket1": "PM7654321", "status": "Open", "date": "Nov 14, 2003", "text": "Text Line 1", "alert": "0", "modified": "0"},
{"key": "1235", "ticket1": "PM7654322", "status":"Open", "date": "Nov 13, 2003", "text": "Text Line 2", "alert": "0", "modified": "0"},
{"key": "1236", "ticket1": "PM7654323", "status": "Open", "date": "Nov 15, 2003", "text": "Text Line 3", "alert": "1", "modified": "0"},
{"key": "1237", "ticket1": "PM7654324", "status": "Open", "date": "Nov 14, 2003", "text": "Text Line 4", "alert": "0", "modified": "0"}
);



function nhWrite(id)
{
var data_array = eval(id);
  var newTR, tdTICKET, tdSTATUS, tdOPENDATE, tdANALYST1, tdANALYST2, tdANALYST3, tdANALYST4;
  var inptTICKET1, inptTICKET2, inptTICKET3, inptTICKET4, newBR;
  var tdTEXT, tdACTIONTEAM, tdACTIONLOG;
  var newTR, newTD, newTD1, newTD2, newTD3, newINPUT;

  var newTable = document.createElement("table");  
  newTable.setAttribute("border", "1");

  var newTBody = document.createElement("tbody");
    newTBody.setAttribute("VALIGN", "TOP");
    newTBody.setAttribute("ALIGN", "LEFT");
    newTBody.style.valign = "TOP";

  for(var i = 0; i < data_array.length; i++)
  {
    newTR = document.createElement("tr");
    newTR.style.textalign = "TOP";

    if ( data_array[i].alert == "1") { newTR.style.backgroundColor = "#FFB6C1"; };
 
    tdTICKET = document.createElement("td");
    //tdTICKET.style.textalign = "TOP";
    //tdTICKET.setAttribute("VALIGN", "TOP");
    //tdTICKET.setAttribute("ALIGN", "LEFT");
    tdTICKET.setAttribute("width", "200");
    tdTICKET.setAttribute("height", "200");
    inptTICKET1 = document.createElement("input");
    inptTICKET1.setAttribute("type", "text");
    inptTICKET1.setAttribute("value", data_array[i]["ticket1"]);
    inptTICKET1.arrIdx = i;
        inptTICKET1.onchange = function(){ updateArray("nh", this.arrIdx, "ticket1", this.value) };
    tdTICKET.appendChild(inptTICKET1);
    newBR = document.createElement("br");


   
    tdSTATUS = document.createElement("td");
    tdSTATUS.setAttribute("VALIGN", "TOP");
    tdSTATUS.appendChild( document.createTextNode(data_array[i].status)  );
   
    tdOPENDATE = document.createElement("td");
    tdOPENDATE.appendChild( document.createTextNode(data_array[i].date)  );
   
    tdTEXT = document.createElement("td");
    newINPUT3 = document.createElement("textarea");
    newINPUT3.setAttribute("name", "textarea" + i);
    newINPUT3.appendChild ( document.createTextNode( data_array[i]["text"] + " - " + newINPUT3.name) );
    tdTEXT.appendChild(newINPUT3);

    newTR.appendChild(tdTICKET);
    newTR.appendChild(tdSTATUS);
    newTR.appendChild(tdOPENDATE);
    newTR.appendChild(tdTEXT);

    newTBody.appendChild(newTR);
  }
newTable.appendChild(newTBody);

var divlayer = document.getElementById(id);

divlayer.appendChild(newTable);

}

function updateArray (arrayName, arrayNumber, arrayHash, newValue)
{
    var array = eval(arrayName);
    array[arrayNumber][arrayHash] = newValue;
    array[arrayNumber]["modified"] = "1";
}

</SCRIPT>


</HEAD>
<BODY onLoad="nhWrite('nh');">

      <div ID='nh'>
      </div>

</BODY>
</HTML>


Thanks
-=[ Felix ]=-
LVL 3
Felix2000Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

monvelasquezCommented:
try this..


...
tdTICKET.style.verticalAlign = "TOP";
...
tdSTATUS.style.verticalAlign = "TOP";
...
tdOPENDATE.style.verticalAlign = "TOP";
...
tdTEXT.style.verticalAlign = "TOP";
...

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Felix2000Author Commented:
Genius! Worked Perfectly... too bad the million references I checked made no mention of verticalalign...


Thanks
-=[ Felix ]=-
0
monvelasquezCommented:
next time you may want to search for CSS atributes...
attributes that have a dash ( "-" ) in their names are
usually converted to javascript by removing the dash
and capitalizing the next letter.

ex. CSS attribute for VALIGN is vertical-align. and if you want to use it in javascript
you use style.verticalAlign...

works great most of the time..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.