-2

I have the following:

enter image description here

I've implemented this via a list. This required lots of CSS. I'd like to add headings ("Operating System", "Percentage"), which will require even more CSS tricks

Using a table may be simpler.

In general, what is the preferred method: a table or a ul/list?

Chad Johnson
  • 21,215
  • 34
  • 109
  • 207

4 Answers4

2

I would use tables. There is no reason to shy away from tables when you have a tablular data format like you do. You're using them for what they were created for.

Samuel
  • 16,923
  • 6
  • 62
  • 75
  • This isn't data. The visual style here is a table, but that's just the choice of representation in this case. A different designer might choose to display the form elements one below the other. The content here is a list, and should be coded as a list. – Rajesh J Advani Aug 17 '12 at 18:52
  • If you're using tables to implement layout, you're NOT using them what they were created for. – Rajesh J Advani Aug 17 '12 at 19:24
  • @RajeshJAdvani Yes, that might be correct, this is not what they were made for. And? **Edit:** I take back my question -- I'm sure the discussion then would be very similar to the many ones here: [Link-y](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – Chris Aug 17 '12 at 19:28
  • @RajeshJAdvani Apology accepted. – Chris Aug 17 '12 at 19:31
  • I agree (+1) This is definitely a table, especially when the headings are added and accessibility tools can refer to the headings when the inputs are given focus. I would also suggest the "Operating Systems" text should be the table caption. – Alohci Aug 17 '12 at 21:08
1

The answer is really a matter of opinion/experience rather than an ultimate decision/fact (I know I'll get downvoted a lot for saying this, but I think it's true). Tables are not originally intended to be used for layout, even though using them might make stuff a lot easier. Using a ul with a lot of styling is 'okay' standards-speaking. Now this comes down to what you think;

  • tables work technically, even though that isn't what they're made for, and some people will make fun of your site's HTML.
  • Good CSS (when it's really good and doesn't break all positioning on window resize) is nice, although harder to use/write.

You make the decision!

Chris
  • 26,544
  • 5
  • 58
  • 71
  • 1
    It has nothing to do with opinion. It has everything to do with semantically representing the content on your page. A table does not semantically represent this content. It's that simple. – animuson Aug 17 '12 at 18:59
  • @animuson I really tried to make it clear that I'm not looking for controversy. – Chris Aug 17 '12 at 19:00
  • @animuson And that is exactly why I asked this question. – Chad Johnson Aug 17 '12 at 19:38
0

It's a table, as ul doesn't have columns.

To fix the columns in an ul can be a bit tricky, whereas it is automatically done in a table.

Robin Manoli
  • 2,162
  • 2
  • 25
  • 30
0

The preference is always to have the HTML semantically match the content. Since what you have is a "list" of operating systems, you should implement them using an unordered list (UL/LI). If the content being rendered was data which would make sense, say, in a spreadsheet, then it would have been better to implement it as a table.

Rajesh J Advani
  • 5,585
  • 2
  • 23
  • 35
  • 1
    This looks like a two-column table to me-- OS Title and Percentage. Why would a list be better suited here? – Ivy Aug 17 '12 at 19:09
  • Exactly - It *looks* like a table. That's just the presentation side. From the perspective of content definition, it's a list of operating systems. Each item in the list is a field, with a label. The input field itself may additionally have an icon associated with it, but that's again just visual representation. – Rajesh J Advani Aug 17 '12 at 19:13
  • So how would a spreadsheet not just be a list of fields? Does it matter whether the 'label' is editable or not? Would you say it becomes a table if there was a second editable field? – Ivy Aug 17 '12 at 19:19
  • You're still mixing up presentation vs content. It would depend on exactly WHAT you are representing. If it's the population of different countries in the world, then you have data which is tabular with rows and columns. You wouldn't take 4 countries and put them in two sets of columns with two countries each. But four operating system selections could be ordered any which way depending on the designer. – Rajesh J Advani Aug 17 '12 at 19:23
  • I don't think your example is any different from this. The table I'm imagining is not two countries in two tables. I'm not sure where you got that idea from. It a column of 'countries' and a column of 'populations' just like you said. But instead of country you have OS TITLE and instead of population you have a percentage. – Ivy Aug 17 '12 at 19:27
  • My point is, that you could decide whether your data is a list or a table depending on the different variations it could be *sensibly* displayed in, without confusing the user. – Rajesh J Advani Aug 17 '12 at 19:32