This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 9 years ago.
Some people believe table is the devil's spawn. Others primarily use to it to format their website. When do you draw the line on tables? When do you feel you're abusing them?
I, personally, use tables only to display data, which in most cases need a table. I've hit a brick wall, though. I need two text boxes to be aligned, would you use tables for this?
I'm thinking of doing something like this:
<table style="border: 0; border-collapse: separate; border-spacing: 10px; margin: 10px auto;">
<tr>
<td><label for="username">Username</label></td>
<td><input type="text" name="username" placeholder="Username"></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" name="password" placeholder="••••••••"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" class="btn btn-large btn-info" style="float: right"></td>
</tr>
</table>
Please excuse the inline CSS, I was using it for this example.
Would you draw the line there? Am I crossing this imaginary line? What would you do?
To align things, I would use either the <div> element or, if that fails, absolute positioning. Also try display:inline-block on the div element. Why won't they line up? What have you tried? Tables should never be used for formatting. That is an awful practice which tables weren't designed for. Only ever use tables if you are displaying tabular data. Otherwise see above.
Tables should be used to represent tabular data. Divs are divisions or sections and should be used to group block-elements. Spans are useful when you want to group inline-elements.
I personally think using tables for layout in regards to forms is OK, especially in the case of some super complicated form - Such as this one: http://www.wolfhair.com/consultation-options/
My reasoning behind this is that if the data that was being inputted into the text fields was actual text and not a text field, it would in fact appear to be tabular data. In fact, if you were to store this information, it would be placed into a table like structure in order to be then pulled from later.
As a demonstration, take for instance your very example. If it were filled out and the text fields were actual data results.
<table border="1">
<tr>
<td><label for="username">Username:</label></td>
<td>MyUsernameRox</td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>M0stSecurePasswordEv3r</td>
</tr>
</table>
http://jsfiddle.net/sGq2Q/
Outside of using it to organize and arrange a form, it should not be used for layout.
Related
I have
<td id="Id1">Text</td>
<td id="Id2"><input type="text" value="Text" /></td>
I want that style of 2 td will be same like td1.
I tried style="border:none;", but i had text area editing or else. I just want from td2 value, but it doesn't correspond in design.
With td2 I have table cell, it can be edited. I want to have constant text showed to user, I want it not to be changed
It would be helpful if you share resources related to your issue like css code and behavior image. Anyways, this code has "=" misplaced in first line.
**<td id="Id1">Text</td>**
<td id="Id2"><input type="text" value="Text" /></td>
To make the design same, you can attach same styling classes to all the rows
You can refer this for more on tables styling, it has some good options
https://www.w3schools.com/css/css_table.asp
I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki
There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.
Traditionally, I always lay out forms by styling each property, but I have read a lot lately about styling forms using a table. My problem is that with a table, when one cell is rather large, all other cells in that column become the same width. When editing them, the problem I end up with is either large gaps between input fields due to a large cell placed above them or, when you resize the screen, things get too close for comfort.
I tried setting the <td> widths individually but that doesn't work. I created a fiddle to see if someone could get me going in the right direction.
Thank you all so much in advance!
http://jsfiddle.net/uFwkd/
The table in the jsfiddle (which seems to be what the question is really about) contains rows with different numbers of cells, e.g.
<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>
<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>
This causes rather unpredictable rendering in practice.
You could make the structure more appropriate by ensuring that all rows have the same number of slots (3, in this case), by using the colspan attribute on cells (on the first row above, with <td colspan="3">. This would require some artificial decision for the row containing two cells: one of them would need to span two columns.
This would be somewhat unnatural (cells in a column would not really be related to each other, just placed in the same column) and would imply accessibility problems. A better tabular structure for a form has one row for each input control (one field, such as one input element), with label in one column, the control itself in another, so you would start with something like
<table>
<tr><td><label for="org">Organization name:</label></td>
<td><input type="text" name="org" id="org" value="" size="20" /></td>
</tr>
There is debate between using div and table to layout a form. There are some rules of thumb about this:
Table only for display
Use div as a form layout
In your case, you can consider transforming your table into a div.
I frequently find myself wanting to make a table of forms -- a bunch of rows, each row being a separate form with its own fields and submit button. For instance, here's an example pet shop application -- imagine this is a checkout screen which gives you the option to update the quantities and attributes of the pets you've selected and save your changes before checking out:
Pet Quantity Color Variety Update
snake 4 black rattle update
puppy 3 pink dalmatian update
I would love to be able to do this using HTML that looks like this:
<table>
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
<tr>
<form>
<td>snake<input type="hidden" name="cartitem" value="55"></td>
<td><input name="count" value=4/></td>
<td><select name="color"></select></td>
<td><select name="variety"></select></td>
<td><input type="submit"></td>
</form>
</tr>
</tbody>
</table>
This is basically a table full of forms, one form per row. Hitting update once allows you to update that specific row (this is not a real example, my real applications really do require independence of rows).
But this is not valid HTML. According to spec, a <form> has to be either completely inside a <td> or completely outside a <table>. This invalid html breaks javascript libraries and is a huge pain to deal with.
I end up making one table to contain column headings, and then making one table per form. But this requires fixed column widths to have the inputs lined up in neat columns, which is sub-par. How do you end up dealing with this problem? Is there an obvious easy solution I'm missing? How to I make a table of forms?
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value=4/></div>
</form>
</div>
The trick here is to just use a single form, e.g.
<form>
<table>
<!-- rows... -->
</table>
<p><input type="submit" value="Update quantity"></p>
</form>
Say you have a product snake with id 6. You then name the input for that item's quantity field quantity[6].
I don't know what server side language you are using, but in PHP you can then iterate over the quantites and update based on the ID. You'd get an array like this:
$_POST['quantity'] = array(
'6' => 4
)