Table vs Div. (Shorter code with table?)

[angelinbnv]

When creating a tableless layout I bumped into one small issue. I had to create a tableless table with two columns and ten rows... no big deal... but soon after starting creating it I realized that I was using more code than a simple html table. Here is one example:


<div class="myTable">
<div class="tr">
<div class="td first"></td>
<div class="td"></td>
</div>
</div>


instead of


<table class="myTable">
<tr>
<td class="first"></td>
<td></td>
</tr>
</table>


I know the benefits of tableless layouts. I don't do table layouts. One of the benefits is the use of less html code. But in this case it's the opposite. My question is: what would be the benefit (only in this case) of using a tableless table instead of a html table?

Thanks

[rangana]

First, What you've created is a perfect example of divitis (http://csscreator.com/?q=divitis).

Secondly, what you created using divs is different from what you code on tables. In your table layout, the data is horizontally aligned since its in a <td>. In your div layout, the data is vertically aligned since div is (by default) block element.

I wonder why you need those (unnecessary) divs. If I were to modify the tabled layout, I would do it like this instead:

<div class="myTable">
td td
</div>


It was just my thought, I could be at mistake (nothing new).

[VIPStephan]

Yeah, you’ve got something wrong here. At first: When replacing tables you don’t just replicate them with divs to have the same appearance/functionality as a table. That’s totally counterproductive as you limit yourself to a static table like structure again.

Secondly: You don’t create tableless layouts using divs to recreate a table, you have to replace tables with semantic code (http://boagworld.com/technology/semantic_code_what_why_how/). That means divisions are only used if you are logically dividing the document into sections (e. g. header, content, footer – main content, additional info (sidebar), …). Generally you only use an element if you actually need it, and this requires a completely different thinking as if you were creating websites from tables.

Study the CSS Zen Garden (http://csszengarden.com) for a good example of semantic code usage and separation of content and styling. It’s just a page with plain text that is marked up semantically (http://brainstormsandraves.com/articles/semantics/structure/), and then styled with CSS to look totally different each time. And a page is marked up semantically if it makes sense even if it’s viewed without styles. Look at your page without styles and tell me if it makes sense what you see.

I hope that clarifies some things.

[bazz]

Maybe I am misunderstanding but if you need to create a table-less table, (whatever that is), with two columns and ten rows, isn't that still a table?

If it is a tbale, then there is nothing wrong with using


<table>
<tr>
<td></td>
</tr>
</table>


Tables are fine, for tabular data and you can mke it not look like a table with CSS.

bazz

[angelinbnv]

Thank you all so much for your responses. I have studied a little bit the divitis article and it seems that I am using more than enough divs in layouts. But my tableless table is not for the main layout. I'm planing to use it for product descriptions like in the example below:


<div class="myClass">

<div>Category 1</div><!-- Column 1 -->
<div>Value 1<br />Value 2<br />Value 3</div><!-- Column 2 -->

<div>Category 2</div><!-- Column 1 -->
<div>Value 1<br />Value 2</div><!-- Column 2 -->

</div>


So you see, the height of the second column is greater than the height of the first column. How can I make the bottom border of the first column fit with the bottom border of the second column?

[gnomeontherun]

http://www.ejeliot.com/blog/61

Here is some information about that.

By the way, you still have more <div>s than needed. You can do it with one <div> or each column, using other elements to help describe your content (like <p>, <h3>, etc) will make your markup more meaningful.

<div class="myClass">

<div><h2>Category 1</h2>
<p>Value 1<br />Value 2<br />Value 3</p></div>

<div><h2>Category 2</h2>
<p>Value 1<br />Value 2</p></div>

</div>

[_Aerospace_Eng_]

Tables might be better to use since you are listing data for something.

[angelinbnv]

Thank you all a lot for your responses. I have found the solution I was looking for (http://www.ejeliot.com/blog/61).