Is there a semantically correct way of showing a tooltip in a table header cell that explains something about the column's data?
My table looks like this:
---------------------
| URL | Pageviews |
---------------------
| url/1 | 5 / 20 |
---------------------
| url/2 | 2 / 14 |
---------------------
I want the "Pageviews" text to have a tooltip that says "Week / Total" (explaining why the data looks like that).
Is abbr the right element for me to use? (it would look like this: <th><abbr title="Week / Total">Pageviews</abbr></th> I can't seem to find a better one. The definition says it's supposed to be used for abbreviations, which is not my case.
HTML5 allows you to use the "title" attribute on any element.
http://dev.w3.org/html5/alt-techniques/ is a good summary of such techniques.
<th title="Week"> Pageviews </th>
I'd highly recommend adding a <caption/> under the table with such data for usability and UX purposes !
Related
I'm building a Jekyll site and I believe it uses kramdown. My problem is that I'm having issues sizing an image in a table cell.
In the markdown file I'm trying to include an image, either a check mark or an X in the 3rd column. I can get the image to appear, but it doesn't scale down. It just appears really big.
| : 1st Column : | : 2nd Column : | : 3rd Column : |
| Sec A : | Para | {: width="10"}|
| Sec B : | Para | X |
Any thoughts on how to do this? Or is there a better way to include a check and X?
I ended up using task list which gives a handy progress indicator of work which shown as a checkbox.
Is it possible to have a layout in sublime text 2 with two rows at the top and one collumn at the bottom:
--------------------
| | |
| | |
| | |
--------------------
| |
| |
--------------------
thank you.
One way to do that is to install Origami via PackageControl.
Origami is a new way of thinking about panes in Sublime Text 2 and 3:
you tell Sublime Text where you want a new pane, and it makes one for
you. It works seamlessly alongside the built-in layout commands.
Ordinarily one uses the commands under View>Layout, or if one is quite
intrepid a custom keyboard shortcut can be made to give a specific
layout, but both of these solutions were unsatisfactory to me. Perhaps
they were to you too! That's what this plugin is for.
Background
I am presenting data using a HTML frameset. The left-side frame is a navigation tree-table constructed as an HTML table. Only minimal data is shown in this frame because I want to use the right-side "details" frame to give the user more details when he selects one of the navigation table rows.
+----------------------------+
| | |
| tree | "details" |
| table | pertaining to |
| nav. | selected |
| | row |
|=selected=| |
| | |
| | |
| | |
+----------------------------+
Think of this like a directory browser where you can see filesize, type, modification date, etc. on the right when you select an item in the left-hand tree.
Obtaining item details server-side is a sequential task, i.e. to get details on the nth item, the server has to work through all n-1 preceding items. For this reason, I think the most straightforward way to present the detailed data to the user is to have the server embed all detailed information within the navigation table rows and have a script generate the details page in a right-hand frame.
Question
How should I represent the detailed data within the navigation table HTML? Should I make up my own element tagnames? Should I use extra columns that are not displayed? Or something else? The data is typically name-value pairs - both name and value can be text. Each element may have a different set of data pairs. Is there a standard way to represent user data within an (X)HTML document?
NEVER, EVER EVER EVER EVER EVER EVER mix data and display. I also think you can easily get around the iterating over n elements to get the data you require. Here is how you do it.
Create a model (your data storage) in the javascript.
var data = [
{
title: "item 1",
foo: "bar",
baz: 10
},
{
title: "item 2",
foo: "bazbar",
baz: 20
}
];
Then, using Javascript, you could use the above data to create the following table on the left
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
</table>
So then you would have your show details function
function showDetails(index){
var currentData = data[index];
/* Do something with data */
}
I have created a working example here. There is an error in that code that says showDetails is not defined, but that is due to a jsfiddle issue, the code will work if put into a HTML page. ALSO, be sure to use the strict doctype at the top (to avoid cross browser quirsk).
Might I also suggest, that you look at YUI 2's layout manager instead of using a frameset. Framesets require multiple pages with javascript snaked throughout and can be a maintenance nightmare down the road.
I need to do this trick while printing huge HTML tables:
+-----+---------+-----+
| ID | Title | Qty | ⇐ descriptive header that shouldn't repeat
+-----+---------+-----+
| 1 | 2 | 3 | ⇐ column number that **SHOULD** repeat
+-----+---------+-----+
| aaa | bbb | 0 | ⇐ data; rows upon rows of data
... ... ...
+-----+---------+-----+
| 1 | 2 | 3 | ⇐ page 2
+-----+---------+-----+
| xxx | yyy | 999 |
... ... ...
Is it possible to implement without resorting to "2 tables with fixed layout" solution (I really don't want to use fixed values)? Oh, and I can only use HTML and CSS.
If it helps, I only target IE (6 and up).
More info
So far, I've tried these different hacks, but to no avail:
no thead, second row gets th instead of td
1.1. even with style="display:table-header-group" on that tr
in thead, using td instead of th for the first row
2.1. using style="display:table-row-group" on thead and style="display:table-header-group" on the second row in it
variations of inserting thead in the middle of tbody (as per one of the answers that disappeared)
I'm starting to accept that it isn't possible and that I'll have to resort to that fixed layout setup (but I pray that leaving only one flexible-width column will be enough) :-(
Support is still rare, but you can do this with the right renderer:
Dcoumentation:
http://www.w3.org/TR/css3-page/
and
http://dev.w3.org/csswg/css-gcpm/
Popular Engines with support:
http://weasyprint.org/docs/features/
and
http://www.princexml.com/doc/9.0/page-headers-footers/
I'm also working to get support included in WKHTMLTOPDF
Based on the idea that you want this table to flow nicely on to separate "pages" on a device's screen (I still don't follow exactly what you mean by that), I would go with paginating your single table with javascript.
For your 2nd header in the first page of your table, I would use javascript to insert an extra row at the beginning of the table, give the a class and add in the column numbers programatically. I can expand on this if you need me to.
As it turns out, you can't do this kind of thing.
The closest solution depending on your requirement will be to use two fixed-layout tables upon each other OR to hard-break the table in parts guaranteed to be fitting on one page.
This is an odd question, and I think it belongs on Stack Overflow since it has to do with HTML/Javascript - if it doesn't belong, let me know and I'll ask it elsewhere.
I am trying to implement a component in my web application, but I do not know what it is called, so I don't know how to search for help on it!
It is where you have a list of things in a combo box on the left side, some arrows in the middle to send list items between combo boxes, and a combo box on the right side that shows the items you have selected.
Here is a "picture" of what I mean:
+-------+ +-------+
| item1 | ---> | item2 |
| item3 | | |
| item4 | <--- | |
+-------+ +-------+
I'm sure there is a JQuery plugin for this too, so if anyone has any recommendations, I'd appreciate it. Thanks in advance!
There is no 'component' that will do this. This thread should help:
Moving items in Dual Listboxes
You have both a jQuery and native javascript example.
There isn't an HTML tag for this, it has to be implemented in JavaScript. It wouldn't be all that hard even without jQuery.
There is also a jQuery plugin here. The examples aren't very flashy, but they do the job.