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>
Related
Hi I need to create my table using like shown in the above image. Here I have given the code I tried. Could some1 please explain me the mistake I have made.
<table border="1">
<tr>
<td colspan="2" >Address
<tr><td>Address1</td><td>Address1</td></tr>
</td>
<td rowspan="2">Name</td>
</tr>
</table>
You scan cells row by row, and you mention a cell in your code as soon as you first hit it. Then you remember any cells that have colspan or rowspan, and when you reach their other parts in other rows, you don't put anything at all.
<table border="1">
<tr><td colspan="2">Address</td><td rowspan="2">Name</td></tr>
<tr><td>Address1</td><td>Address2</td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>
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>
The DOM looks like this:
<table>
<tr>
<td>a</td>...<td>g</td>
</tr>
<tr>
<td colspan="3">
<table>
...
</table>
</td>
</tr>
<tr>
<td></td>...<td></td>
</tr>
</table>
Any idea why this wouldn't work in IE? I tried setting width:auto on the TD holding the inner table, and table-layout:fixed isn't viable because the tabular data is generated dynamically.
What could be going wrong?
Currently, the table only fills the first column, and it will not span.
Update: EXAMPLE
http://stefankendall.com/files/example.html
Use colSpan, not colspan
The only thing that comes to mind is that you may have to fill the columns with something for them to get rendered in IE.
<td> </td>
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.