Hi am trying to add a div above every <tr>
but when i look at the html console the div are showing outside the table. below is the html code.
<table>
<div>
<tr><td></td></tr>
</div>
<div>
<tr><td></td></tr>
</div>
</table>
Is this not allowed? any help would be great.
This question is related to
html
You can not use tag to make group of more than one tag. If you want to make group of tag for any purpose like in ajax to change particular group or in CSS to change style of particular tag etc. then use
Ex.
<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>
<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
You could use display: table-row-group
for your div.
<table>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
</table>
"div" tag can not be used above "tr" tag. Instead you can use "tbody" tag to do your work. If you are planning to give id attribute to div tag and doing some processing, same purpose you can achieve through "tbody" tag. Div and Table are both block level elements. so they can not be nested. For further information visit this page
For example:
<table>
<tbody class="green">
<tr>
<td>Data</td>
</tr>
</tbody>
<tbody class="blue">
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
secondly, you can put "div" tag inside "td" tag.
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Further questions are always welcome.
You can't put a div directly inside a table but you can put div inside td
or th
element.
For that you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:
HTML:-
<tr>
<td>
<div>
<p>I'm text in a div.</p>
</div>
</td>
</tr>
For more information :-
No, you cannot insert a div directly inside of a table. It is not correct html, and will result in unexpected output.
I would be happy to be more insightful, but you haven't said what you are attempting, so I can't really offer an alternative.
If we follow the w3 org table reference ,and follow the Permitted Contents section, we can see that the table
tags takes tbody
(optional) and tr
as the only permitted contents.
So i reckon it is safe to say we cannot add a div
tag which is a flow content as a direct child of the table
which i understand is what you meant when you had said above a tr
.
Having said that , as we follow the above link , you will find that it is safe to use div
s inside the td
element as seen here
In the html tables, <table>
tag expect <tr>
tag right after itself and <tr>
tag expect <td>
tag right after itself. So if you want to put a div in table, you can put it in between <td>
and </td>
tags as data.
<table>_x000D_
<tr>_x000D_
<td>_x000D_
<div>_x000D_
<p>It works well</p>_x000D_
</div>_x000D_
</td>_x000D_
</tr>_x000D_
<table>
_x000D_
Source: Stackoverflow.com