I need to create the template layout for the form with the input.
Should I use label tag or table tag? Which one would give the best output?
Please suggest.
They have nothing in common in your case.
Labels are used to "label" inputs with their explanation, like:
<div>
<label>Username:</label>
<input type="text" name="username" />
</div>
Tables are used to tabularize data.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
</tbody>
</table>
This approach is obsolete and NOT RECOMMENDED.
You can always use both if you wish, but there's better ways to position elements in a page.
<table>
<thead>
<tr>
<th>Username Input</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>Username:</label>
<input type="text" name="username" />
</td>
</tr>
</tbody>
</table>
Related
Not sure if anyone has successfully achieved this. By using CSS (and minimal JS if required), can you make the relative columns of multiple tables to have the same width?
<table id="table1">
<thead>
<tr>
<th>Class</th>
<th>Name</th>
<th>Age</th>
<th>Score</th>
</tr>
</thead>
</table>
<div>Some text and elements here</div>
<table id="table2">
<tbody>
<tr>
<td>Logic</td>
<td>Tony</td>
<td>18</td>
<td>98</td>
</tr>
<tr>
<td>Logic</td>
<td>Jane</td>
<td>14</td>
<td>45</td>
</tr>
</tbody>
</table>
<p>More text here</p>
<table id="table3">
<tbody>
<tr>
<td>Maths</td>
<td>Peter</td>
<td>12</td>
<td>80</td>
</tr>
<tr>
<td>Maths</td>
<td>Jane</td>
<td>14</td>
<td>65</td>
</tr>
</tbody>
</table>
<form>
<fieldset>
<p>text here</p>
<table id="table4">
<tbody>
<tr>
<td><input type="text" name="class" /></td>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="score" /></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
If I want the width of first, second, third and fourth columns across table#table1, table#table2, table#table3 and table#table4 to match relatively, what is the best way of doing it? (So all the first column has the same width; all the second column has the same width; and so on... )
I see that the only solution is to give fixed widths to the columns (or percentage ratios). However, I am looking for a non-width-specifying solution which allows the tables to adjust automatically accordingly to the content, like table's default behaviour in browsers.
Another thing is... I want it to be backward compatible with older browsers, like IE9, so I guess no CSS Flex or Grid layouts should be used. Sorry.
Currently I have:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="myRadio">Info 1</label></td>
<td><label for="myRadio">Info 2</label></td>
<td><input type="radio" name="radios" id="myRadio"></td>
</tr>
<tr>
<td><label for="myRadio2">Info 3</label></td>
<td><label for="myRadio2">Info 4</label></td>
<td><input type="radio" name="radios" id="myRadio2"></td>
</tr>
</tbody>
</table>
This way if I click on "Info 1" or on "Info 2" the radio on the first row is selected. However if I click somewhere on the row that is not text it doesn't. How can I make it work? I have already tried putting the <label> tag before the <tr> tag and closing it after but it didn't work (the label wouldn't reference anything)
Add this style:
label {
display:block;
}
<table border='1'>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="myRadio">Info 1</label></td>
<td><label for="myRadio">Info 2</label></td>
<td><input type="radio" name="radios" id="myRadio"></td>
</tr>
<tr>
<td><label for="myRadio2">Info 3</label></td>
<td><label for="myRadio2">Info 4</label></td>
<td><input type="radio" name="radios" id="myRadio2"></td>
</tr>
</tbody>
</table>
Basically what this does is it tells your label to occupy the entire width of the table cell.
Also if you really want to take the ENTIRE width of the table cell, you might want to do td { padding: 0; }. Take note that this will affect how your cells look like and you should add the spacing to your cells contents instead.
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how to change this...
This is my table:
<table id="table1" style="padding-top:10px;">
<tr>
<td colspan="6" style="text-align:center;">TITLE</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">SUBTITLE 1</td>
<td colspan="3" style="text-align:center;">SUBTITLE 2</td>
</tr>
<tr>
<td style="text-align:left;"><b>A.</b></td>
<td>Data title 1</td>
<td><input type="text" maxlength="11" size="11" name="input_a"></td>
<td style="text-align:left;"><b>D.</b></td>
<td>Data title 2</td>
<td><input type="text" maxlength="11" size="11" name="input_b"></td>
</tr>
...
</table>
So I want to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.
Can it be done somehow?
try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. inputs):
<table id="table1">
<thead>
<tr>
<th colspan="6">TITLE</th>
</tr>
<tr>
<th colspan="3">SUBTITLE 1</th>
<th colspan="3">SUBTITLE 2</th>
</tr>
</thead>
<tr>
<td class='span1'><b>A.</b>
</td>
<td class='span4'>Data title 1</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_a" class="span1" />
</td>
<td class='span1'><b>D.</b>
</td>
<td class='span4'>Data title 2</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_b" class="span1" />
</td>
</tr>
</table>
here is the jsFiddle
ps: there is col- (col-4, col-lg-4...) class prefix in bootstrap3
Using <td width="10%"> works for me on Twitter bootstrap. Or you could add a class to the td and set the width in your stylesheet td.column{ width: 10% !important;}
Also you might want to make your tables like below for a more valid markup:
<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
Add the width properties to the <tr> with all 6 <td> elements.
Probably this is a stupid thing, but I don't see it. What is the problem?
<html>
<body>
<form action="search" method="get">
<input>
<input name="action" value="search" type="submit">
</form>
<table border="1">
<thead>
<th>
<td>Name</td>
</th>
</thead>
<tbody>
<tr>
<td>Smith </td>
</tr>
<tr>
<td>Smith2 </td>
</tr>
</tbody>
</table>
</body>
</html>
The "Smiths" are not displayed under the "Name" cell.
th tags are "table headers", you need to place them inside tr's, "table rows".
<tr>
<th>Name</th>
</tr>
or
<tr>
<td>Name</td>
</tr>
<th>
<td>Name</td>
</th>
Replace with:
<tr>
<th>Name</th>
</tr>
Here are great and fresh post about table explain everything http://woork.blogspot.com/2009/09/rediscovering-html-tables.html must see :)
Th's are the root of your problem. Placing them like so will give you one column like your'e expecting.
<tr>
<th>Name</th>
</tr>
You don't need the < td >< /td > inside the < th > and wrap it in a < tr >, you need:
<tr>
<th>
Name
</th>
</tr>
Do this:
<thead>
<tr>
<th>
Name
</th>
</tr>
</thead>
TH is just like any column () but with different default properties (bold text, center aligned text). So it has to be nested within a row ( )
Fix your THead element:
<thead>
<tr>
<th>Name</th>
</tr>
</thead>