Code here (too long to post in here)
For easy organization of elements I would like to display side by side, I use table rows, like:
<--!I know this isn't very professional but I don't care-->
<table>
<tr>
<td><p>Here's a thing</p></td>
<td><p>Here's another thing</p></td>
</tr>
<tr>
<td><p>More thing</p></td>
<td><p>still more thing</p></td>
</tr>
</table>
this displays as:
Here's a thing | Here's another thing
More thing | Still more thing
However, this gives me odd errors with list items overlapping one another (which you can see at JSBin) when there are lists and their items in a table cell. Is there a way to fix it?
Edit: There are a few other problems (random bullet, item with no bullet (might be the random bullet), single list with different bullet style than all the others, etc.) but this one was bugging me the most
As AndyM said, you can avoid this by removing the dots, or if you still want to maintain the look of a list, you can apply the list-style-property to it:
list-style-property: inside;
That should align them correctly, while still looking like lists.
Related
I have a form which consists of a table. The table is generated with an iterator over a java collection. The elements which are generated on each iteration are:
<tr>
<th>Element name</th>
<td>Element value</td>
</tr>
The table and /table tags are outside the iterator obviously.
The problem is that I need to have the table in two columns, in some cases.
Something like this: http://jsfiddle.net/S32p2/
Is it possible to achieve this without the use of nested tables?
What makes it complicated for me, is that sometimes there are no fields at all, sometimes there should be one column and sometimes there should be two, based on the elements which are iterated over.
Also I am aware of this question: How to have one html table split into two sections, side by side?
The problem is that I don't want the columns to be based on some predetermined length, but the second column should be made based on the values iterated over, as already mentioned earlier.
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
This is the website I'm working on and every other browser displays the table properly, but like always, when it comes to IE (specifically 9) it breaks.
http://lumpiahouserestaurant.com/menu/
I already fixed the <thead> problems because IE didnt interpret display:inline-block well. I cant find a similar problem with the <tbody>.
The main goal of the table is to have the <tr> floated left and the <td> to have display block so they display downwards.
Tables are not designed to be written in this vertical way. While it could be a fun experiment to toy with browsers in this way, it sounds like a recipe for a headache in a production site.
If you insist on coding up your table this way (I'm guessing you want to do this because it's more intuitive to read in the HTML), you can either
Make an outer table with 7 columns and 1 row - one for each day. In each column create a table with n rows and 1 column to hold the data for each day. This is assuming that the table rows aren't supposed to be aligned, as in your example.
Do up your table from left to right rather than from top to bottom, then use javascript to transpose the table.
I have a simple datatable with less than 100 rows. I've currently been displaying the data in a series of nested DIVs. Each row has a container div, with nested divs representing the columns of data within it. (This was in reaction from my earliest coding days when there wasn't anything like a div).
The first column of data is formatted as an image link, while the other two columns are text.
Does it make sense to return to using a table?
Also, as an experiment, I'd thought about using nests ULs. An UL to contain all the rows, and a separate horizontal UL for each row.
As a further note/question, I have another block of data that can result in thousands of rows. Would that amount of data result in a different answer for 'best practice' in this case?
Realistically, you can use any container you'd like. Best practice is to use the elements for what they were meant to be used for. If you are displaying tabular data, by all means use a table! There are great plugins to make the experience for the user better, and it's really easy to read and copy/paste.
The question that I always ask myself is if that data would be best shown in a Word or Excel file. If Excel, then it's a table. If Word, it's div's.
If you're using thousands of rows you'll probably want to give the user control on sorting, filtering, and pulling in more information to aid usability. I'd use a table with some jQuery plugins like tablesorter, hovertable and tableFilter to help make this easy.
In this case a table is fine. Tables are for displaying tabular data, like a row in the db. You should avoid using tables for page layout though....
As for having thousands of rows, you may want to look into pagination. I don't think there is a better "best practice"
Lists are for lists, tables are for tabular data, and divs are for layouts. So if you want to go the best practices route; I think you should be using a table here.
That being said; using divs as opposed to tables isn't all that bad. I wouldn't worry about rewriting if you're already using divs instead of a table. The one caveat being you're clearing your floated column divs. ex:
<div class="row">
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div style="clear:both;"><!-- Leave empty --></div>
</div>
What you should avoid is the opposite (using tables where divs should be used).
Also, even though you may be able to get some kind of table structure using list elements, this is NOT the route you want to go. I've never done it before...to be honest out of the hundreds of examples I've looked at I don't think I've ever seen anyone use them for such a purpose. I guess the best reason here is why would you? Since I've never seen it before I don't have any examples handy which illustrate why you shouldn't do it. But to me this is akin to telling someone not to use a pipe to loosen a bolt when they have a wrench handy. I mean sure....maybe the pipe could get the job done but the wrench is right there...
If I need to show data in a table liked manner I mostly use the <table> element. You should think about user friendliness when showing a 1000 rows or more. The jqGrid plugin is good solution for that and has features like paging, sort, search, etc.
lists are for one dimension data.
tables are for more than one dimension data.
divs are to separate things or include something in others.
if each item of your data has a relation of owner to some others you should use table.
I am working on an django application that will return what historically was a table of information:
ISSUE DESCRIPTION INITIATOR INITIATEDDATE ASSIGNEE FORECASTDATE STATUS REMARKS
That will be the entrance point for users to sort / filter, etc the list of issues.
The columns like ISSUE, DATES, NAMES are of relatively fixed width, but others can be a paragraph or more.
What is the best way to render this in HTML? As HTML Tables, lists or with a lot of CSS spans/divs?
I eventually hope to make the issues list sortable or filterable with javascript as well.
The whole argument made by the CSS purists is that you need to keep your code semantically relevant to the information it contains. What you need to show is tabular data and you use the <table> tag to do that. The only "problem" with tables is when they are used to control the layout, like making your two column layout two <td>s as opposed to two <div>s. In this case, however, tables would be adequate.
If the information you're trying to display is tabular (as it appears to be), then go with tables.
Also, see these questions for even more debate!
Tables instead of DIVs
Why not use tables for layout in HTML?
As both answers say, tabular data should be displayed using a <table> tag.
To put it into perspective, when tables are used to do layout, that is an abuse of the table tag. When div tags are used to do tabular layout, that's abuse in the opposite direction. Don't use one to do the other's job.