i was trying to put table inside a table like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</tr>
</table>
the reason i want to do this is to set the second table a height
and than overflow:auto so the second table have a scroll bar to scroll down
is that possible , and it it does , how?
You still need a <td>/<th> within a <tr> tag, so add either of those between your <tr> & nested <table> (and probably apply colspan="2")
Also, off the top of my head I'm not sure if the <td>/<th> supports an overflow with scrolling, but if not you can always wrap the nested <table> in a <div> and style it.
<table> isn't valid inside <tr>. Put it inside a <td> inside a <tr> instead.
Like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<td> <!-- ** add this ** -->
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</td> <!-- ** add this ** -->
</tr>
</table>
Related
I am creating a table and need to put a div inside it. Is the use of a div inside a table like below allowed?
<table>
<tr>
<td></td>
<td></td>
</tr>
<div class="files">
<tr>
<td></td>
<td></td>
</tr>
</div>
<tr>
<td></td>
<td></td>
</tr>
</table>
Tables can only contain rows. You can use two tables, or put a div inside of a td or th. If you just want to apply your "files" class, you can do that directly on the row. If you really want separated sections in the same table, then add a special "table-separator" class to the boundary rows with styling on that class to space them apart.
take a look at
this works:
<table>
<tr>
<td>
<div>This will work.</div>
</td>
</tr>
<table>
this does not work:
<table>
<tr>
<div> this does not work. </div>
</tr>
</table>
nor does this work:
<table>
<div> this does not work. </div>
</table>
Instead of a div, use tbody (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), It's only valid to put your div between tables or to put your div inside the td (or th) element (which is probably a bad idea). All of the following is valid:
<table>
<tbody class="files">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="files">
</div>
<table>
<tr>
<td>
<div class="files">
</div>
</td>
<td></td>
</tr>
</table>
I am trying to make a 1x2 table and include a picture into one cell and some text into the other. I am not sure if I am doing this correctly or am missing something. But the image appears but the text doesn't...
HTML Code:
<div id="PurpleBacking">
<table>
<tr>
<th><img src="MoneyIcon.png"> </th>
<th> This is a test</th>
</tr>
</table>
</div>
Thanks
I would recommend using <td> instead of<th> in case you want a paragraph or more since <th> is for a header in the table.
So it should be like this:
<div id="PurpleBacking">
<table>
<tr>
<td><img src="MoneyIcon.png"> </td>
<td> This is a test</td>
</tr>
</table>
</div>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
I need to have a table where each row can have a child table or other content below that row.
Is there any valid way to do this?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
problem?
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can't put anything inside a table between the rows, all content has to be inside the table cells.
You can add another row, and use colspan to make it contain a single cell that spans the width of the table, and put the content in that cell.
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
There is no valid way. Only td-s and th-s are allowed in tr
You can however put only 1 td in the row, and set it's colspan attribute to the number of columns you have in the table.