StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It sounds like you are trying to display tabular data without using an HTML table. The motivation behind this is likely the aversion to tables that ensued in the post-table-based design era. However, it should be noted that there is a time and a place for everything, and there is a good reason that the <code><table></code> element is not deprecated.</p> <p>Once upon a time, there was an element named <code><table></code>. CSS was not even a glimmer in its mother's eye. In order to get elements to appear as you wanted them to, you had to string together a web of nested tables. This was a nightmare. It was a nightmare to read the code, to maintain the code, and to create the code in the first place! Along came CSS and everyone eschewed tables as passe and forbidden. Why? Because people had been using the table tag as it was not intended, cobbling it into places it had no business being. </p> <p>Now, many people cobble <code><ul></code>s of related data into columns to represent tables, for fear of using the forbidden <code><table></code> element. But the fact is, this is as bad as misusing tables. It creates spaghetti code that is difficult for screen readers to make sense of, is difficult to debug, difficult to maintain, and eventually relies on browser hacks or javascript for styling.</p> <p>To execute this hack, however, to line up lists like this you would have to specify a height attribute for the li elements. With a static height, the li positioning becomes predictable and you can actually do this. But, this does not sound like what you are looking for, as it sounds like li3 needs to be of fluid height. The only way to really do this is to use jQuery or an HTML table and determine the height of li3 dynamically and apply that height to the other li3s. To use jQuery to accomplish this may result in a flash of unstyled content, especially on slower connections and older browsers. I strongly advise you reconsider your HTML instead.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload