ansaurus

Question

How to judge what should be more accessible markup <table> ,<div> and <ul><li> if design has table like data?

Answer 1

+1 A:

That looks to me like an unordered list. Using div's like that is no better than using tables. Using an unordered list makes a lot more sense from a markup standpoint.

Tyler Smith 2010-01-20 18:11:58

then how we will make gap between Title and Download PPT in a <li>

metal-gear-solid 2010-01-20 18:14:10

There a a few different routes. You can float <a> tags in the <li>, you can put the title in a <p> and set it to a uniform width, etc.I would probably do something like this:<ul><li><p>Title</p><a href="#">Download Link</a></li></ul>Then style it accordingly.

Tyler Smith 2010-01-20 18:21:55

@jitendra - you can add other markup hooks in the `li`, such as `div` and `span`

Jason 2010-01-20 18:22:15

Answer 2

+8 A:

IMO any of the 3 ways is fine. I could argue any one of them to be better then the other 2.

Myself would go with the list just because its less code when I'm looking at it.

<ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

[EDIT] Adding the additional download ppt can still be done by just adding another span to each li. I am assuming that to get the pdf download your floating the span to the right and giving it a width. This way adding another column is not any more css code. Hell you could even remove the span and add that style to the a tag. assuming no links are in that first column.

However if you want to change it to a table (which may be a better choice with more columns) you can just do something like this: you can already see how much more code there is to look through though.

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

corymathews 2010-01-20 18:20:30

+1 I completely agree. The function that you are performing can be done by all of them, personally I would go for an unordered list as well just because of how much easier it will be to update in addition to the fact that it is ordered and much easier to read. Also, I hate using excessive divs. If anything change the internal divs to spans instead (on the OPs code)

David 2010-01-20 18:29:11

but what about <Table> and what would be better if we add one more column for download PDF like "donload PPT?

metal-gear-solid 2010-01-20 18:31:32

@corymathews - I changed example image.

metal-gear-solid 2010-01-20 19:06:20

@Jitendra ok added more info to match.

corymathews 2010-01-20 20:40:17

Answer 3

+3 A:

That screen shot looks like a perfect candidate for a <table>. It will be easier to style, x-browser compatible, and with some headers completely accessible. It will also render pretty much the same if the css styling is removed.

Lance McNearney 2010-01-20 18:45:22

Answer 4

+1 A:

One thing that would be more accessible (or at least more in line with the W3C’s guidelines) is download links that make sense out of context.

So, instead of just:

<a target="_blank" href="2009.ppt">Download PPT </a>

You could have:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>

Paul D. Waite 2010-02-10 09:42:59

ansaurus

tags:

views:

answers:

How to judge what should be more accessible markup <table> ,<div> and <ul><li> if design has table like data?

related questions