Here's my current fiddle:
http://jsfiddle.net/UjAQf/79/
My target table design is this:
But I'm having some trouble as you can see getting all the nesting correct. What am I doing wrong?
Don't use nesting, use col-span and row-span to make a cell take multiple columns/rows.
Related
I am kind of a Newbie in nattable, I want change the alignment of first header column in nattable to the left and the rest remain on the right, I know that alignment is generally defined like this:
this.cHeaderHAlign = HorizontalAlignmentEnum.RIGHT;
Is it possible and How can I do it?
From your code snippet it looks like you are referring to theme configurations. But without going into details how this can be done using themes you need to understand how the basics are working.
In general you need to add a custom label to the first column in the column header and then apply a style object with the needed alignment for that label.
Have a look at the NatTable - Getting Started Tutorial to get an idea how this can be achieved.
I'm trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
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 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.