standard Xhtml- div vs li.

Question

Hi All, I need ur suggestion in the following scenario. Lets say I have an UI something like

Col1 Col2
A    D
B    E
C    F

Now to get this right now in my HTML I am using ..like

<div class="col1">
  <div>A</div> 
  <div>B</div>
  ..........
</div>
<div class="col2">
  <div>D</div> 
  <div>E</div>
  ..........
</div>

But here I am using too much div..is it OK as per standard XHTML or should I use <li>?

Can somebody suggest with proper explanation, or maybe something else? Note: No use of Table Thanks.

Answer 1

It looks to me like you are trying to display tabular data which the table element works great for and is the intended use.

<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

If you really don't want to use table, I'd use the div element like you did in your example. But in the end you will realize that what you are trying to accomplish is simulating an element that already exists - table.

You should keep in mind that when you are using div as a table it won't look well when you disable CSS or viewing it with an older mobile browser (that don't support floats well).

Answer 2

You could maybe use a definition list, although that is more suited for key / value pair data, though that could be the case in your situation, I can't tell.

If not, like Manticore says, just use tables: http://giveupandusetables.com/

Answer 3

I would second Manticore's statement. Tables should also be used for tabular data (data displayed with rows and columns). Everybody gets up on their high horse about using divs for layout instead of tables, but that doesn't mean that tables should be abandoned. What you are doing is NOT layout; it is structuring a particular segment of content, and thus you should use a table tag. Plus, some advantages:

• You can use around the s that contain tags to create a table header. If the user prints the table and it extends beyond one page, the content in the will be printed at the top of every new page. The same is also true of the tag. One slight difference with the though: Content inside should be in the format of Content of cell 1 - don't use the tag inside of s except for those in the .
• Divs are practically impossible to layout in a table format. They are useful for page design layout, but not necessarily for tabular data. Plus, if you're creating an interactive page in which the user will be adding more data, you will find yourself having a very difficult time figuring out what the placements of the divs are.

Answer 4

The 'semantic standard' would definitely be to use tables. As others have said, this is your basic tabular data. That's what they're for, end of story.

However, if you can't use tables, then I would say the next most semantically meaningful structure would be a list, because it allows you to define relationships between the elements, like so:

<ul>
<li>Col1
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul></li>
<li>Col2
   <ul>
   <li>D</li>
   <li>E</li>
   <li>F</li>
   </ul></li>
</ul>

Then, worst of all would be divs. 'Worst' because they have no semantic meaning. Tag-soup, basically.