Is a div inside a table allowed or not according to W3C?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<td>
<div>content</div>
</td>
</tr>
</table>
</body>
</html>
This document was successfully checked as XHTML 1.0 Transitional!
You can't put a div directly inside a table, like this:
<!-- INVALID -->
<table>
<div>
Hello World
</div>
</table>
Putting a div inside a td or th element is fine, however:
<!-- VALID -->
<table>
<tr>
<td>
<div>
Hello World
</div>
</td>
</tr>
</table>
You can put div tags inside a td tag, but not directly inside a table or tr tag.
Examples:
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>
While you can, as others have noted here, put a DIV inside a TD (not as a direct child of TABLE), I strongly advise against using a DIV as a child of a TD. Unless, of course, you're a fan of headaches.
There is little to be gained and a whole lot to be lost, as there are many cross-browser discrepancies regarding how widths, margins, borders, etc., are handled when you combine the two. I can't tell you how many times I've had to clean up that kind of markup for clients because they were having trouble getting their HTML to display correctly in this or that browser.
Then again, if you're not fussy about how things look, disregard this advice.
It is allowed as TD can contain inline and block lements.
Here you can find it in the reference: http://xhtml.com/en/xhtml/reference/td/#td-contains
Related
I'm rendering a table, and dynamically adding a font awesome icon into the td, appending as a sibling to my select/input element.
For some reason, I can't get these two elements to be on the same line within the td.
I've tried nowrap, inline, inline-block, spans, etc.
This is rendered by a django formset, also.
Here's some code for context but its pretty generic. This isn't super original...but I'm not accustomed to working with tables so hopefully it's just something silly that I don't know:
<table>
<thead></thead>
<tbody>
<tr>
<td>
<div class='form-group'>
<div>
<select class='form-control'></select>
<i class='fa fa-arrow-down'></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
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.
<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 :-
http://css-tricks.com/using-divs-inside-tables/
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.
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>
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>
<tr>
<td>
<div>
<p>It works well</p>
</div>
</td>
</tr>
<table>
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 divs inside the td element as seen here
A div cannot be added inside tr but there's an alternate solution here.
I tried adding a div inside tr but it seems a td should be the immediate child of a tr for it to work properly.
Adding a div inside td works fine.
I suppose you are trying to add some background or border-radius for the whole tr. Here's how I achieved the similar result in my project.
I'm using colspan and flex property to achieve that.
.flex-container{
display: flex;
margin: 5px;
}
table{
border: 1px solid red;
}
tr{
border: 1px solid green;
padding: 5px;
}
.flex-container .col{
box-sizing: border-box;
border: 1px solid;
padding: 5px;
border-radius: 5px;
margin: 5px;
background: skyblue;
}
<table>
<tr>
<!-- Assuming you have 4 columns -->
<td colspan="4">
<div class="flex-container">
<div class="col"> Item 1 </div>
<div class="col"> Item 2 </div>
<div class="col"> Item 3 </div>
</div>
</td>
</tr>
</table>
The problem will happen whenever it will render on small device. Element <div> inside <td> will occurs in mobile responsive screen.
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>
Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
I have a table inside a cell, and that table is "getting out" of the cell, as see in this screenshot:
alt text http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png
I see this on Firefox. Is this "normal". How can I fix this?
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The inner table is being told to be as wide as its container (width: 100%), and then to move 3ems away from its left edge: (margin-left: 3em)
Switch the innermost TD to have padding-left which might help.
But the standard response here is: "oh god why are you doing nested tables you bad bad man!!11"
This is happening because you are setting "margin-left: 3em", and it is pushing the sub-table outwards.
untested: take out 'margin-left' and use 'padding-left' instead.
or
You could indent your cells value without using a nested table, by adding the padding-left to your parent tables 'td'.
This is because you're giving the table width 100%. It adds the margin onto this, such that the element has >100% width. If you want to get around this, add a div or something above the nested table with a margin: 3em and you can leave the width of the table at 100%.
EDIT: In response to Jobo's comment to his answer, tds don't support margins; however, a padding-left: 3em should work instead.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td style="padding-left: 3em;">
<table border="1" style="width: 100%;">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Changing margin-left from the TABLE element to padding-left on parent TD (like Jobo said)
Just remove the "width" attribute of that table and you should see that it will stay within the cell, even with long text.
This is not intended to be an attack, but rather an aid to help you be a better developer:
There is NEVER a need to have sub tables.
if you are going to use CSS then do it right, one or more external files.
This will help you develop as a web developer - think about how you want to structure the page and then use the correct markup to produce that structure - once the markup is valid then you can worry about styling.