Anyone know DIV best practices for aligning text?

[sbmhome]

I have converted some pages over from using tables to using DIV tags so that I can dynamically sort the data.

I'm having trouble aligning text in a DIV...I have no idea how to align the text so that its left justified like a HTML table.

Everything works fine, but I'm using 4 DIV tags for each row of data, which is ok when I'm only showing 300-400 rows of data. Things get slow once it gets to around 1000 rows... 4 DIV for each row = 4 x 1000 = 4000 DIV tags to move around. I'd like to reduce the DIV tags to 1000 (1 per row) to speed things up.

Is it a best practice to use 4 DIV tags to keep the text aligned? Or should I use one DIV tag and align the text some other way?


SAMPLE code for 2 rows...

<DIV id="1_Name" style="top:25px;left:100px">Steve</DIV>
<DIV id="1_Address" style="top:25px;left:200px">Martin</DIV>
<DIV id="1_Phone" style="top:25px;left:300px">908 444 - 5555</DIV>
<DIV id="1_Age" style="top:25px;left:400px">37</DIV>

<DIV id="2_Name" style="top:50px;left:100px">Jon</DIV>
<DIV id="2_Address" style="top:50px;left:200px">Wallace</DIV>
<DIV id="2_Phone" style="top:50px;left:300px">949 444 - 5555</DIV>
<DIV id="2_Age" style="top:50px;left:400px"> 29</DIV>

[mwinter]

I have converted some pages over from using tables to using DIV tags so that I can dynamically sort the data.

Table rows and row groups can be moved within the document tree, just like any other element.



I'm having trouble aligning text in a DIV...I have no idea how to align the text so that its left justified like a HTML table.

Text is left-aligned in most elements by default - exceptions usually include table captions and table headers. The text-align CSS property is used to control this.



Everything works fine, but I'm using 4 DIV tags for each row of data, ...

If there are real rows and columns, where the content of cells has a relationship to both other cells in the same column and row, then why are you using div elements? That would be tabular data and should be marked up using a table.

HTML is about structure and semantics, and it should be able to convey information and meaning on its own. CSS is an optional technology (along with client-side scripting and other things). Have you considered how that document would render if the CSS rules were not applied?



<DIV id="1_Name" style="top:25px;left:100px">Steve</DIV>
<DIV id="1_Address" style="top:25px;left:200px">Martin</DIV>
<DIV id="1_Phone" style="top:25px;left:300px">908 444 - 5555</DIV>
<DIV id="1_Age" style="top:25px;left:400px">37</DIV>

Yes, you most definitely should be using a table. To sort the table, use DOM methods to move the rows. You will find examples and code to do this on the Web.

An id attribute value must not start with a number. It must begin with a letter.

Mike

[sbmhome]

Table rows and row groups can be moved within the document tree, just like any other element.



I didn't see this out on the web, I'll dig deeper.



Text is left-aligned in most elements by default - exceptions usually include table captions and table headers. The text-align CSS property is used to control this.



I think I should have been more clear. I basically made 4 DIV tags replace a row. In other words, each DIV tag represents a table cell. I did this so that the data in each cell, from row to row would be aligned? Make sense?





If there are real rows and columns, where the content of cells has a relationship to both other cells in the same column and row, then why are you using div elements? That would be tabular data and should be marked up using a table.

I got rid of the table and used purely DIV tags and I'm controling the DIV tags by using "style: left:100px, top 200px"



HTML is about structure and semantics, and it should be able to convey information and meaning on its own. CSS is an optional technology (along with client-side scripting and other things). Have you considered how that document would render if the CSS rules were not applied?

Since they are all DIV tags, if the CSS rules were not applied, they would layered on top of each other.



Yes, you most definitely should be using a table. To sort the table, use DOM methods to move the rows. You will find examples and code to do this on the Web.


Again, I'll look deeper into this.



An id attribute value must not start with a number. It must begin with a letter.

Mike

Yes, I found this out when I coded it....unfortunately, I didn't remember when I wrote the example code here :)....but it does prove you know what you are talking about :). Thanks for the help!

[mwinter]

Table rows and row groups can be moved within the document tree, just like any other element.

I didn't see this out on the web, I'll dig deeper.

Googling for the phrase, "table sorter" (http://www.google.co.uk/search?q=%22table+sorter%22) should return plenty of candidate results. The only issue is quality and functionality, and only you know what is desired of the latter.

Mike