A form inside a table or a table inside a form, which one is appropriate for correct Twitter upload markup?
I am working on a template based on Twitter Bootstrap and I have a doubt as the header says Form inside a table or a table inside a form, which one is appropriate for proper Twitter bootstrap markup? Are they really valid?
First markup:
<form id="fabForm" method="post">
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th></th>
<th>Col Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" name="fabLinkChoice[]" value="1">
</label>
</div>
</td>
<td>Dist1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button>
</div>
</form>
Second markup:
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th></th>
<th>Col Title</th>
</tr>
</thead>
<tbody>
<form id="fabForm" method="post">
<div class="form-group">
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" name="fabLinkChoice[]" value="1">
</label>
</div>
</td>
<td>Dist1</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button>
</td>
</tr>
</div>
</form>
</tbody>
</table>
</div>
</div>
<div>
NOTE. my doubt has its origin in this code . There you will notice the code of the first example, as well as its on Bootstrap Modal, but I can't figure out what it looks like. This is what I see in Chrome:
And I don't know if there is something in my markup. Around why am I using tables, because it is tabular data and I think this is correct or am I wrong?
source to share
The allowed tag content tbody
is zero or more tags tr
, so your second example is not valid HTML.
You can move your form inside a table cell, but more often than not, you will see a table inside a form instead of the other way around.
It can also be seen from your limited examples that you can use a table for layout purposes and I strongly urge you to reconsider.
source to share