Html table with multiple rows - html

I want to expand a column and display a set of rows inside it.
What I am trying to achieve :
What I have achieved so far
My code:
<table style="background-color:lightgreen" border="1">
<tr >
<td>Id</td>
<td>Name</td>
<td>Col1</td>
<td>Col2</td>
<td>Group Related Column (value for each expanded cell)</td>
<td>Col4</td>
</tr>
<tr >
<td rowspan="5" >#1</td>
<td rowspan="5">AFSBEESS1</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td>x</td>
<td>x</td>
</tr>
​
My fiddle input : http://jsfiddle.net/yDUZg/78/
What is the best table format to do the same?
Is there some plugins to achieve the same effect of easily grouping the column?
Or a better approach to the problem?
Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML

Have you looked at something like - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?
This plugin allows you to collapse/expand table rows as required.
You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,
<table>
<tr>
<td rowspan="2">Funky</td>
<td>Joy</td>
</tr>
<tr>
<td>Fun</td>
</tr>
</table>
You are getting confused over the concept of rowspan - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.

If you're set on using tables then why not just nest them? Where you want the rows to appear within a cell, just add another table.

You can probably do this with JavaScript. I think it would look something like this:
<script type="text/javascript">
...
// You could use these in an event (inside some callback function)
$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'
// OR you could use these...
$('tr.expand').show();
$('tr.expand').hide();
...
</script>
<!-- And then of course the group of <tr>'s you want to expand
on an event would all have the same class -->
<table>
...
<tr class="expand">
<td>...</td>
</tr>
<tr class="expand">
<td>...</td>
</tr>
...
</table>

Related

Can you make 2 cell 1 on the other within one tr tag?

What I want is something like this:
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
</table>
which creates a table like this:
but what I want is something like this:
I know I can easily make it with adding a new row and using rowspan to fix it, but if there is another way to do it without adding another row, it will be so great
You can implement that using rowspan.
<table border="1">
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
the answer I got after so many searches was this 2 without adding another Row:
adding both a2 a3 to another cell.
using grid system instead of table.
and there are other ways and the easiest ways is by adding another row, the code looks like this:
<table>
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>

How To add nest Table in html?

Nest Table i.e. Table under Table. I have tried many time using many attributes but I am not getting what I want.
Please tell me here attributes how to do this. Thanks
Try this:
<table border=1>
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
<table>
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>

Skip <td> in HTML table

Say I have the following table:
<table>
<tr>
<td>Example</td>
</td>One</td>
</tr>
<tr>
<td>Example</td>
</td>Two</td>
</tr>
<tr>
<td>Example</td>
</td>Three</td>
</tr>
<tr>
<!--
Here I want to skip the first <td> cell; use only second. Example:
<td>(empty, possibly )</td>
<td>blah blah blah</td>
-->
</tr>
</table>
If you read my comment in the last row, you can see that in the last row I want to display something in the second column of the table, with the first remaining empty. How would I go about doing this?
As a side note, I read the question/answers in this SO question but colspan is different from what I want. I'm also not familiar with css empty-cell so if that is a solution, please provide a bit of sample code.
HTML
<tr>
<td></td>
<td>content here</td>
</tr>
CSS
table { empty-cells: show;}
Leave the <td> empty, no reason to put a space in there. can act a bit funny at times, especially in tables.
I can't see any reason not to do exactly what you are proposing: Use an empty cell containing only a ("No Break Space") in it:
<tr>
<td> </td>
<td>Whatever</td>
</tr>
CSS code:
table { empty-cells: show; }
Or, alternatively, you can insert in the <td>.

strucure of component inside table html

I want to make a table of orders, for each row there's an arrow that show a bill details related to each order and hide when I click again on the button.
How can I make the structure of the table?
I make like this
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
</tr>
</thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>show details</td>
</tr>
//also loop here as the number of bills
<tr>
<td>bill order/td>
<td>product</td>
<td>price</td>
</tr>
I don't think like this structure is correct, and making div inside a table doesn't work, any suggestion please?
Possible structure:
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="master">
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>
show details
</td>
</tr>
<tr class="detail">
<td colspan=5>
<!-- new <table> with your details of this row -->
</td>
</tr>
<!-- ... more rows ... --->
</tbody>
</table>
Example: http://jsfiddle.net/J7szf/
Example 2: http://jsfiddle.net/J7szf/1/
You can probably use a popup near the "Show Details" Link
Example : http://jsfiddle.net/vdcUA/93/
If you want the content to be displayed in the table itself , provide here some idea on how u want the content displayed
In your example, you have an extra unneeded <tr> before your loop. You should have a standard table structure but hide / show the details depending on a click.
You'd better use:
styling with css and classes the standard row and the details
using js to hide / show rows
Actually, you could use jquery plugins to do this kind of stuff. See this example of datatables grouping rows
Jqgrid can also make some row grouping
[EDIT] The easiest way to define your HTML structure is to get inspired from the HTML in these jquery plugin examples

html table syntax validation

This should be an easy one.
I have a table like so:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
My firefox 3 validator says this is acceptable code. It just seems wrong to me, are there any possible issues leaving the table rows uneven like this? It works in IE7 too.
You should use 'rowspan' or 'colspan' attributes
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
Table rows are not required to have the same number of cells. The number of columns in the table is determined from the row with most cells.
Your second table row will just have three cells that are blank (which is not the same as empty cells).
If you want to use uneven amounts of rows/columns, you need to should use rowspan and/or colspan attributes to indicate this.
eg:
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3"></td></tr>
</table>
As guffa corrected me below, colspan isn't technically needed, but it never hurts to be explicit about your intent.
Well, there are no syntax errors there, and I really can't see why you should be sceptical about a table like that, as long as you use the colspan attribute of the td-element:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
Hope that helped.
That code is fine from a structural point of view. It's valid XHTML. Compare this:
<orders>
<order id='2009/1'>
<item id='1'/><item id='2'><item id='3'/>
</order>
<order id='2009/2'>
<item id='33'/>
</order>
</orders>
It might look strange though, hence the suggestion to use colspan. That way you can get the single TD to fill up the row, instead of being the width of the TD above it.