I should correct some accessibility issues in a ZK application, and I found the following problem: the components Grid and Listbox with headers generates two HTML table tags, one for the content and one for the headers. It seems not to be conform with accessibility guidelines.
What is the advantage of this approach? Is there such a datatable solution in ZK that generates only one HTML table tag, where the connection between header cells and data cells are more clear?
After some googling I've got the answer:
The technique of using separate table for headers is an old solution for scrollable table content with fix (sticky) table headers. At present you can find several pure CSS solution for it and you do not need the two-tables-solution.
I could not find any alternative solution in ZK where a single table is used. They need this solution perhaps for other aims.
For acessibility, we have to use ARIA roles to bind the two tables, like in the example at https://www.paciellogroup.com/blog/2014/10/notes-on-fixing-incorrect-table-structure-using-aria/
Related
I'd like to create a multiple rows + multiple columns view.
I think I can either use table or grid.
Which one should I use over another and why?
Summary
Grid
Using a grid makes content appear to flow more naturally on your page.
Table
A standard table.
from Semantic-UI
Explained
Grids
The CSS Grid Layout specification is one of a few new specifications
that are redefining how we approach layout for the web. Alongside
Flexbox and the Box Alignment Module it will become part of a modern
layout system for websites and web applications.
from Grid by Example
Table
Table is just a layout, and could be complex for complex views. Just think in spreadsheets. You can merge columns and rows to get your layout.
Opinion
You can use the option you want, according to your needs. But if you are looking to organize your web content, use grids; If you need to deploy data use tables.
That all depends on the requirement. for example, If you want them to maximize the use of the page; maybe for a report with multiple columns over the whole webpage and you knew beforehand on what device your page would be rendered then use a table because you can pinpoint each and every column to exact pixels.
But if the rendering device might be any device or the rendering device info is not available then use grid because it would automatically adjust to the available layout space.
I am implementing a schedule application that displays activities as rows and time shifts as columns. It allows users to group activities and days, spanning rows and columns. I posted a mock up at http://www.volunteeryourself.com/sch.htm. Would you do this data table/layout as a CSS or table? I can make either one work, just not sure which is better.
Given some of the features and the need to allow the user to add/manipulate items, I think CSS would work best.
Sorry if this is not the type of question to post here.
I'll say what I said earlier, If you are trying to achieve the image above the tables with the table content then DIV's and CSS will be less hassle.
If you are laying out pure tabular data then use tables, but tables are normally harder to style and get positioning etc right with.
it's tabular data, therefore you should use tables.
CSS can be used for this, (or I should say, a combination of divs/spans etc), but you would be creating unnecessary work for yourself.
By all means use CSS to style the table, but the bulk of the layout should be done using semantic table markup.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
i know that using tables as layout is a big problem..Why don’t professional web designers use tables for layout anymore? and what are the alternatives in CSS that i can use and will be the best alternative to tables??
1) as soon as a browser sees an opening table tag, it will stop rendering until it sees the closing tag, since it has no way of even guessing what the table structure will look like. Because of that, tables will dramatically increase the wait time between when the user starts the request, and when they can actually use your page.
2) tables require 3 nested tags to define a cell, which is a hell of a lot of noise in an already incredibly verbose language (xml)
3) semantically, a table is for tabular data. using it for layout means your html doesn't make sense when you read it.
Discussed here - Why not use tables for layout in HTML?
CSS doesn't provide 'alternatives' to tables. It is used to style HTML elements including tables.
Try to learn using div tag and giving style to it using css..it has more effect in look
I would definitely suggest using CSS and XHTML to layout pages.
I think there are far too many benefits to go into here. Ranging from accessibility, SEO, ease of coding to future proofing. I think blog posts and articles on the subject will be able to provide more information on why and how you should use CSS instead of table to layout pages.
One book I would suggest is Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm This book will tell you everything you need to know about using CSS and HTML in a web standards compliant way.
One thing to keep in mind is that HTML5 is starting to gain widespread usage there are a few differences and added features that differ from XHTML
I was given a website in ASP.NET and I have to change the look of it by adjusting and fixing the div tags etc. What is the easiest way I can learn how to do this efficiently? The previous user was making use of tables to set the images etc
Thanks
You need to redesign the complete website or just change some setting keeping table layout.
table is good for displaying for rows and column data.
but in any case you need to use CSS Cascading Style Sheets www.w3schools.com/css/default.asp
Its easy to work in asp.net, just create masterpage and it will help you manage your design. and give a same look to all pages.
I hope it help you.
Can WinForms and XAML not benefit from the same logic as CSS?
It occurred to me this morning, as I was browsing some of my unanswered questions on Stackoverflow:
If you're not using FlowLayoutPanel or a TableLayoutPanel, to layout controls on your WinForm, you'll be accused of not doing it right.
This is in contrast with the (religious) debate in html world about CSS vs Tables.
It seems to me that the maintainability problems of a UI laid out with a table has been ported to WinForms. And with XAML, which can be thought of of a form of HTML, has embraced table based layouts. You'll have a hard time doing anything in XAML without using tables.
Can WinForms and XAML not benefit from the same logic as CSS? Can the maintenance problems of tables not be done away with? I realize accessibility isn't a problem on a WinForm or WPF form laid out using tables: the reader will not "see" the layout panel - so that's a problem in CSS that doesn't exist in WinForms.
But can't WinForms/XML benefit from non-table based layouts? I know I certainly don't want to have to move that "OK" button 3 dialog units to the left in a table-based approach.
I don't think you can compare HTML and XAML. The implementation of table based layout (Grids) in XAML is far superior to that of HTML tables. There are far easier to work with and don't come with the same baggage that HTML tables do (cross-browser querks).
Also I don't agree with your comment ...
You'll have a hard time doing anything
in XAML without using tables.
There are so many layout options in XAML, that you could produce an entire application without using a grid once. Though it may be easier to use Grids, it doesn't mean that you'd have a hard time using other layout elements. In fact, I use Stackpanels and Canvases as much as I do grids.
It just becomes a question of using the correct element for each scenario. Having come from web applications and been writing HTML and CSS for years, I find that XAML is a wonderful markup, that makes laying out your interface a breeze ... not to mention everything else that comes with XAML.
So to answer your question ... can XAML benefit from CSS logic? Yes and it does, MS has taken great things from CSS, but has also produced a superior markup.
You say:
It seems to me that the
maintainability problems of a UI laid
out with a table has been ported to
WinForms. And with XAML, which can be
thought of of a form of HTML
but you've missed the point of CSS. CSS isn't about avoiding use of table layouts, it's about separation of content from layout.
In HTML, the HTML provides the 'content' (the actual text, and it's structure into logical paragraphs) and the CSS provides the information about how this content should be laid out, (ideally so that you can just switch CSS files for different display methods and the same content will be displayed appropriately)
XAML/WPF provides the same ability (and to a lesser extent so does WinForms). The XAML (or WinForms GUI code) provides the layout and the visual stuff. The code behind (preferably following some nice separation pattern like MVVM for WPF or MVC in WinForms) provides the content. Written properly you should be able to swap out the XAML (or WinForms GUI code) and provide an alternative layout/GUI for different circumstances.
There is nothing wrong with table based layouts, the problem with table based layouts using plain HTML tables is that it mixes content and layout code all in one big jumble. HTML tables should only be used when the content you are providing is tabular in nature, and then they should still be laid out and formatted with CSS rules. HTML tables should not be used for laying out and formatting non tabular content.
So WPF/XAML is already structured like HTML+CSS, it's just you have compared the wrong parts. The XAML provides the layout and is the equivalent of the CSS, and the code behind (or view model / model in mvvm) is the equivalent of the HTML as it provides the content.
One of the key arguments against the use of tables for layout purposes in HTML is that of semantics and accessibility. A <table> tag is intended to contain tabular information, and for users with screen-readers and similar using them for layout purposes can cause real headaches. The layout containers in XAML, though, are meant to contain controls and position them on the user's screen, seperating them from neighbouring controls and grouping them appropriately.
Another issue is that of producing clean code. An HTML document, when marked up correctly, should just contain the document contents, with the styling kept in the seperate CSS file. A XAML file is more equivalent to the CSS, describing the layout of the UI, and isolating it from the actual program which is described by the source files of whatever language you are using.
Just because XAML & HTML are XML-ish doesn't mean they encapsulate the same sort of data. If CSS were an XML format, would you compare XAML to HTML or this (X)CSS?
The problem with the HTML/CSS scheme is that it was designed as a document language, not a user interface language. The whole separation of presentation from content really only benefits documents. It is madness having to develop user interfaces in HTML, which doesn't have grid layouts. Oh well, it keeps us employed.
The direction that HTML 5 is taking looks promising for reducing the pain. For now, though, I'll stick with RIAs like Flex and Silverlight.