The requirement is to have a custom CSS, sortable columns, global search.
A few apprehensions related to UI-grid:
The layout of UI-grid is based on divs, while that of Smart table is
like that of a normal table.
Also, if the UI-grid CSS is not used,
then many divs are to be changed to table-row and table-cell.
In my case, the UI-grid extends beyond the width of parent container.
(There is no padding/margin getting exceeded). I resorted to hiding
overflow, but it is more of a hack.
Questions related to Smart Table:
Can we have a structure similar to columnDefs to define column
attributes?
Is it less powerful than UI-grid?
Does it run into issues?
Which of these 2 tables should be used?
Take a look at AngularJS TableView
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
I'm tying to figure out how to use the GridView with different classes for groups. In the GridApp template everything inherits from SampleDataCommon, do you always have to inherit from a common class in the GridView? The documentation seems.. lacking on this mater.
UPDATE:
Specifically the problem I'm trying to solve is to have a GridView with both image tiles and text news articles.
You can bind to any class type. I would suggest that they implement a common interface or class. If they cannot, then grouping them just does not make sense. You can display the items within the group by using a DataTemplateSelector. Here is a very simple example and a more complex sample
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!
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.