split one html table into two separate side-by-side blocks - html

I have a form which consists of a table. The table is generated with an iterator over a java collection. The elements which are generated on each iteration are:
<tr>
<th>Element name</th>
<td>Element value</td>
</tr>
The table and /table tags are outside the iterator obviously.
The problem is that I need to have the table in two columns, in some cases.
Something like this: http://jsfiddle.net/S32p2/
Is it possible to achieve this without the use of nested tables?
What makes it complicated for me, is that sometimes there are no fields at all, sometimes there should be one column and sometimes there should be two, based on the elements which are iterated over.
Also I am aware of this question: How to have one html table split into two sections, side by side?
The problem is that I don't want the columns to be based on some predetermined length, but the second column should be made based on the values iterated over, as already mentioned earlier.

Related

HTML Table of multiple blank cells

I'm using REXX on a PC to convert a tab delimited table to HTML. The REXX code identifies rows, cells and columns that vary in location from one table to the next but which require rotation, bold highlighting, and either light blue, light gray or no filler. All of this is working, but the size of the tables could be reduced if there is a way to indicate a count of duplicate <td></td> entries in a given row.
The output has predefined XML code which defines an Excel sheet and is followed by the table. The table is two-dimensional. By this I mean the top row lists attributes and the left column lists entities which may have some, but not necessarily all, of the attributes. At the intersection of an attribute column and entity row the cell may contain one of several values, including a space. Some rows may be 50 or more cells long and contain a value only in the 48th column.
In this example, when I build that row, I have 50 combinations of <td></td>. In the case of empty columns from 2 through 47 I need to repeat that empty <td></td> 46 times to assure the cell with a value is shown under the correct attribute. Some tables may have 10,000 rows.
Does HTML have a repeat counter? Perhaps something like this:
<r c=46><td></td></r>where <r indicates a need to repeat and must contain "c=" for the repeat count of <td></td> and of course a closing </r>.
A repeat counter would reduce load and transmit time as well as the size of the HTML file.
There is no "repeat" counter, however, you could use "colspan" instead of adding 46 <td></td>.
Example:
<tr><td colspan="46"><td></tr>

Lists in Table Cells Overlap one another

Code here (too long to post in here)
For easy organization of elements I would like to display side by side, I use table rows, like:
<--!I know this isn't very professional but I don't care-->
<table>
<tr>
<td><p>Here's a thing</p></td>
<td><p>Here's another thing</p></td>
</tr>
<tr>
<td><p>More thing</p></td>
<td><p>still more thing</p></td>
</tr>
</table>
this displays as:
Here's a thing | Here's another thing
More thing | Still more thing
However, this gives me odd errors with list items overlapping one another (which you can see at JSBin) when there are lists and their items in a table cell. Is there a way to fix it?
Edit: There are a few other problems (random bullet, item with no bullet (might be the random bullet), single list with different bullet style than all the others, etc.) but this one was bugging me the most
As AndyM said, you can avoid this by removing the dots, or if you still want to maintain the look of a list, you can apply the list-style-property to it:
list-style-property: inside;
That should align them correctly, while still looking like lists.

Creating html table without putting empty tds

Sorry to ask this simple question. But I seem not to be able to find some reasonable answer to it.
I want to make a table with 3 columns but all three having different number of data. say, 1st column has only 1 data. 2nd one has 3 and 3rd one has also 3 data. It should look like this:
is there another way than defining empty tds for the first and second tr to create empty slots?
You can use rowspan http://jsfiddle.net/vB2jY/
This will make the td cell occupy the number of rows mentioned.
<table>
<tr><td rowspan="4">1</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
I think a table is best suited only for displaying tabular data, and not complex layouts like what you describe.
Still you can achieve this by using the rowspan attribute for the data in the first column, to extend to 3 rows.

Understanding <table> use semantics [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I recently had a discussion with another developer who was using <table> for data that was not tabular.
<table><tr><td> Server: </td><td> Development </td></tr></table>
I pointed out that tabular data has more than one dimension, and use of tables for styling/presentation is discouraged. He responded that just because the table was one row does not mean that the data is non-tabular.
It seems to me that if "tabular data" has more than one dimension it would require at least two rows and two columns. However, he pointed out that <table><tr><td></td></tr></table> (as well as <table></table>) both validate, and that if he is using <table> incorrectly, the W3C is unclear and they did a poor job with their validator.
I think that <table> is supposed to be used to represent data that is tabular whether or not the resulting structure is tabular as their can be caveats. In the above example, there will only ever be one server, but you can potentially have zero or more rows of multi-column data that is perhaps filtered on a date range.
My question is who is right here? If I am misunderstanding the spec, then how am I misunderstanding? If you have data that is tabular but not enough filtered data to print out multiple rows (i.e. if it is filtered on a small date range) is it incorrect to print only the column headers? Should you print a "no results found" full colspan row as well? If data in <table> must be multi-dimensional, why does a single-column and/or single-row table validate?
I agree with the others, validity of markup is not equivalent to semantics of the markup.
Tabular data should have a column headers to describe the data it holds. So the most minimal table would be, (1 column with 1 row of data, that column should have a heading):
<table>
<thead>
<tr>
<th>My Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>my value</td>
</tr>
</tbody>
</table>
If you want to represent "no results found" it should be displayed outside of the table. Because no results foundis not data. No results should display nothing in the table, or better yet, hide the table and display your no results found message.
It seems to me that if "tabular data" has more than one dimension it would require at least two rows and two columns. However, he pointed out that <table><tr><td></td></tr></table> (as well as <table></table>) both validate, and that if he is using <table> incorrectly, the W3C is unclear and they did a poor job with their validator.
Validity of markup has absolutely nothing to do with semantics. <p> by itself is valid HTML, even though empty paragraphs make no sense in writing. In the same way, the following three tables are all valid, even though they contain no actual data:
<table></table>
<table>
<tbody>
</table>
<table>
<thead><tr><th>
<tbody>
<tfoot><tr><th>
</table>
As you have observed, though, a <tr> element with no children is invalid:
<table>
<tr>
</table>
It's not clear to me why that is the case, as I cannot find any rules in the current HTML 5.0 CR that state that a <tr> element must have at least one child which is either a <td> or a <th> element (it simply says it may contain zero or more of either kind).
Anyway, if a table contains only one row, so be it; that simply means there's only one record to be listed in the table. But tabular data semantics is not a question of whether this table has only one row, but whether this structure is suited for any number of data records expressed in a two-dimensional format. That's what constitutes tabular data.
In your example, will there potentially be more than one entry for "Server" (which, incidentally, if it were a real table heading it should be a <th> rather than a <td> and it should not contain a colon)? If not, and all you want to do is to tell the user which server they're on for instance, then a table is not the most appropriate element to use to present this information. You should possibly use a heading or a label, and some other textual container for the value "Development".
If you have data that is tabular but not enough filtered data to print out multiple rows (i.e. if it is filtered on a small date range) is it incorrect to print only the column headers? Should you print a "no results found" full colspan row as well?
Whether you choose to display a row that says "no results found" is up to you; either way should be acceptable. In this case, all you have is a table that is designed to contain tabular data but for some reason does not have any data to present.
If data in <table> must be multi-dimensional, why does a single-column and/or single-row table validate?
Because even a 1x1 square (i.e. 1²) grid is still considered two-dimensional, even if this single cell is a <th> with no accompanying rows (again, validity and semantics are two very distinct matters).
Valid != Semantic, let's start with that. I can make my entire webpage with <div>s alone, does that make it semantic? No.
Tabular data doesn't necesarily mean that it has more than one dimension (although that sure helps!). Tabular data means "Table which makes the most sense to be put in a table". It does need to be data though, placing navigation links within a table is by definition unsemantic.
It depends on exactly what he placed inside that table. It might be that a table is fine, try to give an example of what he actually put there.
My problem with tables - and I work with developers that only really know how to use them - is that I cannot move content in a table tag around quite as easily as data in a div tag. Sure, you can make a table into pretty much anything, and move it around almost as easily as a div tag, but there's more overhead (more tags) involved in the table itself.
You end up needing to spend more time adjusting padding, spacing, and the like. It's overall far less efficient to work with tables than with DIV's, as well as requiring more code / less visually easy to read code. I like my table tags in nice neat individual lines like the code example another answerer provided; otherwise you run the risk of weird nesting. You have far less nesting issues with DIV use.
That said, many people find DIV's confusing and don't know how to deal with the more flexible tag.
So it's a personal preference issue, really. The more CSS you know and are willing to learn the more likely you are to use DIV's. The simpler the site and the more developers who don't know CSS you want to be able to work with, the easier it is to use tables. You just limit your viability when it comes to reformatting your page drastically without touching the HTML code. (or back-end server code that generates the HTML code)

How to create a table that I can add or remove columns from

I need to produce a table similar to:
What we see is the left column containing the data point headers, and each column after contains the actual data.
I'd like to treat each column (other than the first one) as an optional column. The user can add or remove the columns based on funds they select. If they've selected only 1 fund, only the first 2 columns are visible, the rest of the spaces are blank. Each subsequent fund selection adds a new column to the table, up to a max of 5.
I'm wondering what is the best way to implement this? I'm thinking each column is an independent table of a fixed width that I can add to a container which can align them side by side. Will I have difficulty getting the 6 tables to line up side by side?
Is there a better way for me to achieve this result?
You could have invididual tables, or you could assign each column a class which would then allow you to add or remove all elements that have that class using Javascript.
For example:
<table>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
</table>
You could then use Javascript to show/hide elements (via CSS) with the relevant class based on actions of the user. Depending on how big your table is, that could work.
Nice use of Comic Sans by the way!