I'm renovating a legacy Java based web site. I've already greatly reduced the number of tags used on the front end by using CSS to do the graphic lay out of the "screens". Is there a CSS tag that will replace HTML tables that makes a good grid for HTML forms? Does it significantly reduce the number of tags? Is it reliable in most of the main browsers?
Tables are actually prevalently used to align forms. You take out the borders with <table borders='0'>. They are pretty reliable for aligning because the table cells in different rows line up.
You'll still probably want to use <table> tags for actual grid/table elements. But, you could consider using something like Javascript grid/table plugins for tables... for styling, and functionality.
I would suggest using <ul> and <li> elements (and then setting CSS rules for those elements,) when formatting <form> elements, though. If it doesn't seem to be working out... you can still leave the <form> in a table; over the past decade, however, browser support for CSS has made it a lot easier to use HTML lists instead of tables for formatting things like forms.
Related
I need to create a website and I would like to increase the size of the buttons because it looks really really bad.
I'm not allowed to use any form of CSS or JavaScript for this project and the solutions I found so far all use CSS.
I've tried inserting the buttons into a table but that didn't do anything to help me and all the solutions I found on the internet either don't work or use CSS
You can use header elements like <h1>, <h2> etc. Semantically it may not be very 'clean' to use in this way (you are not creating headers as one would do in e.g. a publication), but I'm afraid there's not much else.
<button>Standard size</button><br />
<br />
<button><h1>Using h1</h1></button>
<button><h2>Using h2</h2></button>
<button><h3>Using h3</h3></button>
<button><h4>Using h4</h4></button>
I am trying to send an email with html content but I am observing displaying issues.
The following does not get displayed properly in width by Microsoft Office Outlook, any hint?
<div style="width: 650px; border: 1px solid blue">hello</div>
use tables, and on <td> use width="" propery and also style="width:" ... for some clients are reading the width property and others reads the style property
You must reconsider to change the email template to be tables within table and with inline styling
here is a sub link to problem which you may encounter
How to align several tables in td in center
HTML divs and spans don't work particuarly well in office outlook. You are better off using tables for this display.
Reference: "...The best way to combat these issues would be to use a table-based layout." https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients
Here is some further information taken from another answer:
"- JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
- Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
There are loads of answers on SO, and lots of other links on the internet at large.
http://www.emailology.org/
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.getfractal.com/ [DISCLOSURE - I used to work at Fractal.]"
Reference:
Has anyone gotten HTML emails working with Twitter Bootstrap?
Bootstrap's page about responsive design says this:
Responsive utilities should not be used with tables, and as such are
not supported.
Being new to web development, I am not familiar with what this is talking about. It seems that there is a general aversion to using <table>. Is this true?
Also, the quote as phrased doesn't make sense to me. Shouldn't it read like this?
Tables should not be used in responsive utilities, and as such are
not supported.
Tables are very structured elements. A <td> can only ever be a column. You couldn't change it to suddenly appear like a row or float it somewhere, etc., etc.
HTML, in responsive design, shouldn't define what something should look like (or where it should appear to a degree) that's CSSs job. the HTML should simply group text and other elements. So a HTML <table> and all it's associated tags breaks this paradigm.
CSS display now contains table like elements: How is a CSS “display: table-column” supposed to work? so this removes the need to embed <table> tags and allows you to use the more generic <div> tags and their like, thus now it's a <div> that looks like a <table>, there is nothing to stop you making this appear as something completely different simply by updating the CSS. You could even make it look different for different audiences, etc.
hope this helps a little.
It's not really true in the latest browsers, but traditionally it's been hard to unstyle a table in CSS to not have a table layout.
So while a table might be the correct semantic element for your tabular data, pragmatics meant that if, in some responsive design profiles, you want the data to be displayed in a linear format, it just couldn't be done, except by using JavaScript to rip the table markup out and replace it.
Try table, tbody, tr, td {display:block; } - (JsFiddle http://jsfiddle.net/Z26GF/) in various browser (e.g. compare IE10 with IE9 behaviour) to see what I mean.
(The more I learn about Bootstrap, the less I like it. It seems to encourage a number of bad HTML practices. This is one of them)
Before anyone close this question or complain... I've been looking all over StackOverFlow site but couldn't find anything straight foward about tables and forms.
I have a form which has at least 20 to 35 labels and text boxes, in different categories. So to start using CSS for each element would be too much.
For some reason, I'm feeling like using tables to align all the fields with their respective labels, since some labels will be larger than others (i.e. 'First Name' is a larger word than 'Age'), and so the layout would be distorted. And I can't start applying css for each label and text box (circa 20 each... that's 40 individual css rules).
Unless someone can give me some techniques, I'll be greatful.
I know CSS is good for forms but what about the very big forms?
So long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.
In fact, I recommend it over using table.
Just set up some base rules...
input {
padding: 3px;
float: right;
}
Then handle the exceptions to your rules...
input#age {
float: none;
}
Forms are not tabular data, simple forms just superficially look like they are.
CSS is just fine for long forms. Have styles for most data. Then more specific styles for short bits of data and/or long bits of data, and so on. Don't style everything individually.
try using UL and LI instead of table, such as explained in the following article Click to see article
It provides the CSS too.
You wouldn't need 40 individual CSS rules. You could have one rule for all the labels, and one for all text boxes.
BUT - having said that - this sort of layout, where you have two columns of stuff, and you want all the stuff in column 1 (the labels in this example) aligned with each other, and all the stuff in col 2 (the text boxes) aligned with each other, while keeping the rows aligned - well that's exactly the sort of thing that the the good ol' table excels at.
I am a big advocate of CSS, and I believe that abuse of tables (to layout a page for example) is evil, evil, evil - but I would definitely go with tables on this one.
At the end of the day, it's all about preference and functionality. My personal preference are divs/CSS. The cascading nature of CSS, and cleanliness of the code, etc..
But hey, if you like tables - shout it from a rooftop!
You can use jQuery Masonry.
As far as I can see, it will achieve the layout you need and all you have to do is add classes and single line of JS code.
You can create good, accessible forms using CSS without too many CSS rules (for the alignment part, anyway). You basically just need to set the width of all the labels -- with one rule -- and define how they interact with the input elements. There a nice article at http://www.websiteoptimization.com/speed/tweak/forms/ (just the first one I found, I'm sure there are many others).
For a form IMO i'd rather use a table its cleaner. Use CSS for your websites layout. But again thats my opinion...
I've want to know what is the best practice or approach in dealing with multiple and complex columns with a form inside.
here's an example of the form I'm dealing with
How to properly write a HTML markup for this? If I wrap every form element with a 'DIV' for every column it would take a lot 'DIVs' and styles; and the width for every column that is not repeating.
So what I did is, I put all form element in the table. And I think that is not the standard way to do it.
If your in my shoes,
How would you deal with the columns with non-repeating width?
There is no standard for complex forms, but there are plenty of blog posts claiming to have figured out the perfect way to approach this problem. Most of them are well thought out, but ultimately you have to pick the one you're most comfortable with. I have some suggestions though:
Check out the US postal service change of address form. It's surprisingly well done
If you have lots of forms, using a grid system like 960.gs, blueprint.css, or YUI grids (shudder) is an easy way to implement a form. However grid systems are definitely considered bloat if that's the only place you'll use them.
Do a search for "tableless forms" on Google. You will see a lot of different implementations. Choose the one you like.
I would probably put each form element in a list item within an unordered list (I think semantically, it is a list of input elements that need to be filled in.)
I would then add classes to them for positioning and width etc - the columned ones would need to be given a width and floated left...
so:
<ul>
<li class="iName"><label for="name">Full name:</label><input name="name"/></li>
<li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
etc etc...
</ul>
I believe this would be semantically correct and the most accessible way to do it.