I'm making a table with:
days as columns
times as rows
and the table data will be empty, styled anchors (changing between dots, lines and blocks).
When the display gets down to tablet/mobile size I want hide all but one of the days (columns).
As I understand it, as it is very obviously a table, I should probably use the table element. However hiding/styling tables/columns is problematic. I'd like to steer away from applying a column class to each td and I probably need to support ie8 so nth-child is out of the loop and col is too limited for the styling I need to do http://www.quirksmode.org/css/columns.html.
So my question is; should I pursue the applying classes to td's or what is the most semantic alternative?
Edit:
I think I've decided to go with nested ul's. I'm sure semantically it's not correct but in terms maintainability I think using tables would nigh on impossible
Think you are unlucky. Just add a class to all the td's in a column. This is the best backwards compatible solution there is.
Here you can read all about 'ways to hide first column' on Stack Overflow.
Related
I'm building a basic survey creation system, and I want it to look more or less like this. I'm tempted to use a table to align the questions and answer choices horizontally and vertically, but I know tables are for tabular data. Does this qualify as tabular data?
If CSS is preferable, can you give me a rough outline of how to achieve it (just on the alignment, not the alternate shading)? Would I need a series of classes, each with an increasingly wider left margin?
I snipped the image from SurveyMonkey, and I'd follow their example, except they use tables.
I searched for similar questions, but they all concerned vertical alignment, not horizontal.
Yes, this qualifies as tabular data: All values in a row belong "together" as well all entries in a column have the same meaning.
In general tables should not be misued for layouts, but in this case you're really working with tabular data. Especially for disabled people, e.g. people using screen readers, misusing tables cause confusion, but in this case it's correct to use them.
This is indeed a table moment. Table like gifs have their times and places. If you do decided to go the div route, one master div holds 4 rows that are absolute/fixed and then there is a div for each radio button. Div tags in a table thats the ticket!
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.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I can't remember the recommendation on this -- should it be avoided? Is it standards complaint?
I have a table -- with actual tabular data inside of it -- but one of the cells contains a bit more information.
The previous developer embedded a child table inside the cell. I'm contemplating replacing it with a pair of floated divs?
Is that okay?
I can't remember the recommendation on this -- should it be avoided?
It smells of divitus, but depends on the specifics.
Is it standards complaint?
Table cells may contain divs, and divs may contain divs.
I have a table -- with actual tabular data inside of it -- but one of the cells contains a bit more information.
Perhaps a better structure would involve splitting it into more columns.
Not best choice if the child cell can be converted into normal div block element. TABLE IN TABLE is not recommended (until you have no more choice)
subtable can be converted into styled list to achieve 1xN or Nx1 type tabluar structure
It sounds like the previous developer was using HTML tables for layout, which is generally a bad idea. It sounds like you're trying to fix the inner cell via a syntactically-correct but semantically-better-but-vapid change. If the outer table is also used for layout (as opposed to being used for tabular data) then you should fix that as well.
Regarding the "is it legal" part of your question, in the future you may find it easier to try it and then validate your page instead of waiting for the stack overflow community to roughly validate code concepts.
Yes, that's fine.
Tables nested inside tables is not recommended (I don't think it's standard compliant either)
The recommended layout is as you suggested - 2 floating DIVs
I've noticed a variation of convention when it comes to using DIV tags instead of TABLE to separate/organize content on a web-page. In what situation is one more appropriate to use than the other?
Clarification: This question is both general, and specific in that I'm mainly looking for which would be more ideal for page layout.
As a rule of thumb — if every cell in a row has something in common, and every cell in a column has something in common, then you should use a table. If you don't have a thead with some th elements providing column headings, then there is a good chance you are doing something wrong. If you don't have multiple data rows and multiple data columns, then … ditto.
The choice is, however, not between a div and a table. Use the markup that has the semantics that best describes the content. There are plenty of elements in HTML: http://www.w3.org/TR/html4/index/elements.html
Use tables only with semantically tabular data. Is each row other than the header representing the same "type" of "thing"? Does each column header have below it a set of items that are described accurately by the column header? If yes to both, then use a table. Avoid tables for styling whenever possible.
Table should be used to display tabelaric data ( like in excel for example) When Div tag is a container and should be used to organize content.
You can drive a nail with a screwdriver but proper tool is a hammer.
Simple.
Use a table for tabular data.
Use a div to separate content.
IMHO, a table is for the display of tabular data and related things, not for general layout of a page itself.
Some do not hold this purist opinion, and so use tables for laying things out because they seem easy to use.
Use div when you want to make your page more syntactically correct, use less bandwidth, make changes easily,make sites more accessible and more search engine friendly. In all other cases use tables (well except when you want to show some tabular data). Here are more details.
What I see a lot (and my biggest pet peeve), is people using a single column table to separate page elements or lists. Like:
<table>
<tr><td>
List item 1
</td></tr>
<tr><td>
List item 2
</td></tr>
</table>
instead of using
<li>, <p> or <div> (if its more like content)
The moral, its fine to use table where thy make sense- tabular data, etc. Never for lists, blocks. People complain about using it for layout, but sometimes it just works so that is the only place I make an allowance for abusing tables.
i use table only to display database fields and records.
i mainly use div for page layout.
Probably the only scenario where I'd use a table for layout over a div (other than for tabular data) is when creating HTML for an email. Emails clients aren't great at displaying HTML properly, so often using tables is the only way to get pages to display consistently.
It makes me die a little every time I have to do it :(
It does concern me that people are suggesting that table should be used for anything except tabular data, even in IE6. I think the only legitimate use of tables for non tabular data is in html emails, it's not the correct usage but the rendering in email clients is so awful you have little choice.
Semantics on your HTML have always been important, but I think it is only going to get more so especially with the new HTML5 tags that are being proposed... I can see more confusion over the use of article and section
Well, as far as I know, a table is used to organize a group of objects into set places ... say three pictures side by side all separated by some text.
And a is a "section" of a webiste. This can include anything, even tables!
So I guess the answer to your question would be: if you need to set up an organized array of images, text, etc. you might want to use a table (like an excel spreadsheet), but if you simply want to divide your website into sections, use tags.
By the way, as of late, tables are being used less and less and there seems to be a tendency to using different CSS layout techniques instead of tables.
Good luck!