[SOLVED] Tables

[fenway]

I understood about being able to modify it faster.

 

That's not what I am asking though.

 

I don't care at all which one is easier/takes less time to do.

 

I just want to know which one is BETTER and why.

 

Sorry if I worded my question wrong x_x

It's obvious that you don't care about anything that takes less time or is easier, since you refuse to use any whitespace/indentation....

 

Do you understand why it is necessary to separate layout from content? If yes, maybe there's hope... if not, this is just silly.

[jcombs_31]

I understood about being able to modify it faster.

 

That's not what I am asking though.

 

I don't care at all which one is easier/takes less time to do.

 

I just want to know which one is BETTER and why.

 

Sorry if I worded my question wrong x_x

 

As Semi said, you obviously are pretty clueless as you clearly stated the benefits in your own response.

 

I could probably eat a steak with a spoon and butter knife, but I'm much rather use a fork and steak knife. not sure if that makes much sense, but it sounded good to me as I thought about it ...

[Azu]

Sorry I wasn't trying to ask about which way would be easier for me to make though.

I just want to understand what it is about the divs that can make it better for screen readers and stuff.. and once I understand that, maybe I can find a way to make it work for tables also.. because I don't know how to make it aligned if I use divs..

 

And please stop with the analogies.. they aren't helping me understand at all.. I just want to know exactly what, from a purely  technical/logical standpoint, it is in divs that make a site easier for screen readers and spiders and stuff..

[fenway]

I just want to understand what it is about the divs that can make it better for screen readers and stuff.. and once I understand that, maybe I can find a way to make it work for tables also.. because I don't know how to make it aligned if I use divs..

We also want you to understand... but you don't.  Screen readers don't display anything as layout -- they just need to extract the content.  That's more difficult when tables are used for non-tabular information.  If you have your site laid out with tables (e.g. nav in the left TD, content in the middle, ads on the right), that really isn't a table row, now, is it? It's not like a "typical" table, where you  have different values corresponding to equivalent column headings in each table cell.  If that's not clear enough, I don't know what is.

 

And just because you don't know how to make a tableless page "flow", that doesn't mean anything at all for their utility.

 

And please stop with the analogies.. they aren't helping me understand at all.. I just want to know exactly what, from a purely  technical/logical standpoint, it is in divs that make a site easier for screen readers and spiders and stuff..

There have been 50+ posts describing all of the tech. differences & advantages.  LAYOUT vs. CONTENT -- that's it.  Plain & simple -- no analogies.

[zq29]

To answer your screen reader question. From what I understand, screen readers read left to right - Tables are created left to right. Imagine this layout:

<table cellpadding="4px" cellspacing="0px" border="0px" width="100%">
    <tr>
        <td>This is a news item</td>
        <td rowspan="3">Something completely irrelevant, why not say there's a poll here</td>
    </tr>
    <tr>
        <td>This is another news item</td>
    </tr>
    <tr>
        <td>This is another news item</td>
    </tr>
</table>

The screen reader, would say to the user:

This is a news item' date=' Something completely irrelevant, why not say there's a poll here, This is another news item, This is another news item[/quote']

 

This is a very basic example. As you could probably imagine, with a more complex page layout, the screen reader is going to make less sense by the second.

[Daniel0]

I just want to know exactly what, from a purely  technical/logical standpoint, it is in divs that make a site easier for screen readers and spiders and stuff..

 

No offense, but you do clearly NOT understand it from technical and logical standpoints. That's why people start using analogies.

[Azu]

I just want to understand what it is about the divs that can make it better for screen readers and stuff.. and once I understand that, maybe I can find a way to make it work for tables also.. because I don't know how to make it aligned if I use divs..

We also want you to understand... but you don't.  Screen readers don't display anything as layout -- they just need to extract the content.  That's more difficult when tables are used for non-tabular information.  If you have your site laid out with tables (e.g. nav in the left TD, content in the middle, ads on the right), that really isn't a table row, now, is it? It's not like a "typical" table, where you  have different values corresponding to equivalent column headings in each table cell.  If that's not clear enough, I don't know what is.

 

And just because you don't know how to make a tableless page "flow", that doesn't mean anything at all for their utility.

 

And please stop with the analogies.. they aren't helping me understand at all.. I just want to know exactly what, from a purely  technical/logical standpoint, it is in divs that make a site easier for screen readers and spiders and stuff..

There have been 50+ posts describing all of the tech. differences & advantages.  LAYOUT vs. CONTENT -- that's it.  Plain & simple -- no analogies.

 

So all the stuff about screwdrivers and spoons aren't analogies? And you still haven't really answered my question..

 

 

The way I have my navigation now is like this

 

<table><tr><td>Link 1</td><td>Link 2</td>etc...</tr><tr><td>Link 3</td><td>Link 4</td>etc..</tr></table>

 

I like it like this because it is aligned..

 

 

Now the non-table version would be like this

 

 

<div><ul><li>Link 1</li><li>Link 2</li>etc...</il><il><li>Link 3</li><td>Link 4</li>etc..</il></div>

 

How exactly does this make it easier for screen readers and stuff like you keep saying? I want to understand how/why it does.. because even after all you have said, I still don't get this.. and also how do I make it align if I use divs?

[roopurt18]

Azu, do you understand what semantics are?

[Daniel0]

The way I have my navigation now is like this

 

<table><tr><td>Link 1</td><td>Link 2</td>etc...</tr><tr><td>Link 3</td><td>Link 4</td>etc..</tr></table>

 

I like it like this because it is aligned..

 

 

Now the non-table version would be like this

 

 

<div><ul><li>Link 1</li><li>Link 2</li>etc...</il><il><li>Link 3</li><td>Link 4</li>etc..</il></div>

 

How exactly does this make it easier for screen readers and stuff like you keep saying? I want to understand how/why it does.. because even after all you have said, I still don't get this.. and also how do I make it align if I use divs?

 

THAT wouldn't make it easier for screen readers, but it is more semantically correct to use a list rather than a table. You will benefit from being able to change the way it looks easier though.

 

Also, if we take semantics in linguistics, then consider if you decided to call tables for dogs, planes for grass, computer for car etc. It is just not right!!

[Azu]

The way I have my navigation now is like this

 

<table><tr><td>Link 1</td><td>Link 2</td>etc...</tr><tr><td>Link 3</td><td>Link 4</td>etc..</tr></table>

 

I like it like this because it is aligned..

 

 

Now the non-table version would be like this

 

 

<div><ul><li>Link 1</li><li>Link 2</li>etc...</il><il><li>Link 3</li><td>Link 4</li>etc..</il></div>

 

How exactly does this make it easier for screen readers and stuff like you keep saying? I want to understand how/why it does.. because even after all you have said, I still don't get this.. and also how do I make it align if I use divs?

 

THAT wouldn't make it easier for screen readers, but it is more semantically correct to use a list rather than a table. You will benefit from being able to change the way it looks easier though.

I'm guessing for your emphasis on 'that' that this is not the best way to do it? What is the best way? So that it will make it easier for screen readers? And how can I keep it aligned when I use divs?

[Daniel0]

I'm guessing for your emphasis on 'that' that this is not the best way to do it? What is the best way? So that it will make it easier for screen readers? And how can I keep it aligned when I use divs?

 

The list approach is the best way because (and I repeat myself) it is more semantically correct.

 

Do display it next to each other you could use display:inline;.

[roopurt18]

Azu, you didn't answer the question:

 

Do you know what semantics are?

[zq29]

I'm guessing for your emphasis on 'that' that this is not the best way to do it? What is the best way? So that it will make it easier for screen readers? And how can I keep it aligned when I use divs?

Your two examples would be read in the same way by a screen reader. What do you mean, 'keep it aligned'? Aligned to what? I can only assume you mean horizontally aligned as opposed to vertically, which is the default orientation for lists?

//HTML
<div id="container">
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

//CSS
#nav li {
    display        : inline;
    list-style-type: none;
    padding-right  : 20px;
}

[effigy]

"When the only tool you have is a hammer, every problem looks like a nail."

[Azu]

I'm guessing for your emphasis on 'that' that this is not the best way to do it? What is the best way? So that it will make it easier for screen readers? And how can I keep it aligned when I use divs?

Your two examples would be read in the same way by a screen reader. What do you mean, 'keep it aligned'? Aligned to what? I can only assume you mean horizontally aligned as opposed to vertically, which is the default orientation for lists?

I want to use the divs if they are better but I want to keep my navigation aligned like how it is now.. here is an example..

http://freethepenguins.com/example

[fenway]

OK, that's quite enough... this thread is going no-where.  Take a look at the 100s of CSS tutorials out there... if they can't explain it to you  -- because we obviously can't -- then just pick one by flipping a coin. They can teach you how to "align" a div, too.

 

THREAD LOCKED -- and don't start another one.

[~n[EO]n~]

OPENED Again.... LOL

 

Now, Table and DIV is like Takendo and Karate, both are good in their place and both can be used for self-protection. 

[roopurt18]

I'll try for a third time:  Azu, do you understand what semantics are?  The answer to this question has a lot of bearing on this discussion.

 

 

[Azu]

Not really, sorry. >_>

[roopurt18]

Perhaps this can help explain the difference to you then.  When dealing with language, whether a computer language or a spoken language, we have two concepts: syntax & semantics.

 

Syntax

Syntax defines the structure of language.  Basically, syntax is the set of rules we must follow to use a language correctly.  An example of a syntax rule when speaking English is that adjectives come before nouns.

Example:

The brown fox jumped high.

The above sentence is syntactically correct because the adjective brown comes before the noun fox.

 

Semantics

Semantics are slightly more difficult to explain.  I guess you can think of semantics as the implied meaning behind language elements.  The best way to explain is with an extension of our example above.

The microscopic fox jumped high.

Again, the sentence is syntactically correct because the adjective microscopic comes before the noun fox.  However, a fox can not be microscopic, so even though the sentence is syntactically correct, it is not semantically correct.

 

Here is a programming example of semantics, taken from wikipedia:

  $x += $y;
  $x = $x + $y;

Both of the above statements use a different syntax, however they both have the same meaning (semantics): add $x and $y and store the result in $x.

 

Now I will try and tie it back to your original question:

How is

<table><tr><td>Link 1</td><td>Link 2</td><td>Link 3</td></tr><tr><td>Link 4</td><td>Link 5</td><td>Link 6</td></tr></table>

Worse then

<div><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li></ul><ul><li>Link 4</li><li>Link 5</li><li>Link 6</li></ul></div>

 

I think where you're getting confused is you are looking at this only from a syntactical standpoint.  In your mind, you are doing this:

Let A = table = div
Let B = tr = ul
Let C = td = li

Then you are doing a direct substitution and coming up with this:

<A><B><C>Link 1</C><C>Link 2</C></B></A>

In that regard, both statements are syntactically exact.  Also, it is no more difficult for a screen-reader or robot to read one than the other.  Screen-readers and robots are just computer programs that parse text; it is no more or less difficult to parse a table tag than a div tag, a tr tag than a ul tag, and a td tag than a li tag.  So again, in that regard, both methods are the same.

 

To really understand how they are different and one is better than the other (for layouts), you have to examine the semantics.

 

A table tag has a semantic meaning that tabular data is about to follow.  Although you can use tables to make a layout, a layout is not tabular data.  Therefore, using a table to create a layout is syntactically correct but semantically incorrect.

 

Now if you understand everything to this point, you're thinking, "Big whoop.  So what?"

 

The importance comes into play with programs (like screen readers and robots) that examine the source markup of your website.  These programs look at the tags you use and apply a semantic meaning to them.  This meaning varies from program to program.  A screen reader may attempt to apply a semantic meaning that makes a text-to-speech conversion more convenient for a blind person.  A robot might attach a semantic meaning that affects page rank within a search engine.

 

Take the following HTML:

<div>
  <ul>
    <li>
      <a href="home.php">Home</a>
    </li>
    <li>
      <a href="about.php">About</a>
    </li>
  </ul>
</div>

It is pretty obvious to you and me that is a navigation menu.  A robot could also examine that and determine that it is a navigation menu, simply because the author of the robot decided to make it capable of doing so.  This robot may index or rate your page higher (or better) than one that places a navigation menu within a table tag.  Again, this is at the whim of the person that wrote the robot.

 

Does that help any?

[Azu]

Thank you, I think I understand it right now.

 

Is it okay if I use divs, then, and put display:table in the CSS to make it display like a table? If I do it this way then it will be correct and everything will understand it right but it will still look the way I want it?

[Daniel0]

Thank you, I think I understand it right now.

 

Is it okay if I use divs, then, and put display:table in the CSS to make it display like a table? If I do it this way then it will be correct and everything will understand it right but it will still look the way I want it?

 

You can't do that. At least it doesn't work for me.

 

<style type="text/css">
.table { display: table;        }
.tr    { display: table-row;    }
.td    { display: table-column; }
</style>

<div class='table'>
<div class='tr'>
	<div class='td'>1</td>
	<div class='td'>2</td>
</div>
<div class='tr'>
	<div class='td'>3</td>
	<div class='td'>4</td>
</div>
</div>

does not give the same result as:

<table>
<tr>
	<td>1</td>
	<td>2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

 

Besides, even if it did work then you are essentially still designing in tables and therefore making it more difficult for yourself to maintain.

 

Also, another example of semantics could be the semantic difference between <ul> (unordered/bulleted list) and <ol> (ordered/numbered list). Take for example a list of favorite movies in each list. With an unordered list it will be implied that the movies are in no specific order, i.e. that the first listed movie is not necessarily better than number two. On the contrary with an ordered list the first listed movie is better than the one listed as number two.

 

The reason why it makes sense to use a list for a navigation menu is because that is essentially what it is, a list of links.

[Azu]

o.o how do you choose which way to make the navigation links ordered? I just try to line the ones of simular length so that they are aligned and use less screen width..

[roopurt18]

Shouldn't:

.td    { display: table-column; }

be:

.td    { display: table-cell; }

 

I think I tried doing that once and ran into trouble though.

 

[Daniel0]

Oh, yes, that's correct. Still doesn't work the way a table would though. It does make it display something in Firefox now (before it was all blank) though, but it's just

1

2

3

4

 

instead of

1 2

3 4