I need to layout a page, but I can't figure out how to do it without tables. I know it must be possible, but I can't think of a solution that isn't table-based that isn't incredibly rigid with fixed widths for everything.
Mockup: http://i.imgur.com/jSSDhIh.png
No matter what I do, it looks like I'm going to have commit a major sin. For example, the top set - it looks like I'm going to have either to:
Create a table (the root of all evil, apparently)
Hardcode widths and heights specifically for these elements. (either #id or style= or single-use classes, all three are also considered evil)
Is that the case? Is there a realistic way I can avoid those scenarios? Googling for answers just gets me a bunch of useless "TABLES ARE EVIL SO ARE CSS TABLES ALSO DON'T USE ID SELECTORS OR STYLE ATTRIBUTES EVERYTHING MUST BE A REUSABLE CLASS" with no actual useful information.
EDIT: I've already done this with CSS tables (display: table) and had it thrown back as unacceptable. I think it's fine because it works and it still looks good, but it's not my call.
Tables aren't evil. This stackexchange page alone has many tables on it. Some people want to use divs to create rows and spans using a grid. I suggest using tables where they seem appropriate. If you're really bent on avoiding it, consider grabbing something like bootstrap for twitter.
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
There you can use their scaffolding to arrange items the way you want without tables.
heres a link on HTML Tables – when and how to use tables in HTML
this might help you understand when to use tables.
on your mock theres no reason not to use tables. like wordpress backend uses tables for forms but in tabular form.
but if you really want to layout this on divs i rather suggest using css grid frameworks.
I personally use zurb foundation. heres the link
I'd recommend using Bootstrap, it gives you plenty of options for styling forms. (However it may interfere with the rest of your CSS.)
Here's how a two column form would work:
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="row">
<!-- right column -->
<div class="span6">
<label>Subject <input type="text"></label>
<label>Category <select></select></label>
<label><input type="radio"> Permanent Change</label>
<label><input type="radio"> Temporary Change</label>
</div>
<!-- right column -->
<div class="span6">
<label>Requested Approval Date <input type="text"></label>
Effective Dates <input type="text"> to <input type="text">
</div>
</div>
Obviously the styling leaves a lot to be desired, but check out http://twitter.github.com/bootstrap/base-css.html#forms to see how much you can do. You'll want to look into <form class="form-horizontal">. Be forewarned that the CSS is picky, you'll need a lot of <div class="control-group">'s.
I have created a three page web page and I'm using an external css stylesheet that is adjusting my navigation lists so they go across the top and have a coloured background.
When I try and create a list on a page within a table the indenting and vertical listing don't work.
I traced the issue to the external style sheet.
How do I go about turning off the settings the stylesheet did so I can properly format the list?
[EDIT- Okay, so I did a work around. I removed the external stylesheet link as was suggested and put all the style info into my head. Then I did a div around the ul and another around the li which seems to half way gotten it working. Around the li I set the width:50px and that got my vertical listing working. The list-style-type:square still doesn't do anything but I'm too fed up to care anymore for tonight.]
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
<!-- And the External CSS Stylesheet Code -->
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
I just read your edit, and while it seems you're gone I am going to answer anyway. Don't give up. CSS can be frustrating to troubleshoot and troublesome to implement in the beginning. Inline styles, font tags hell it all seems ever so much easier, until you realize the actual power that CSS gives you over your styling. I think what you should do is step away from your work for a little bit and do some reading on CSS so you're better understanding what it is you're doing, I'm going to give you a couple of tips here that should help with the issues at hand, but I still think you need to read more.
Get the styling OUT of the head and back into an external style sheet, that is the worst advice you could have possibly been given.
Read up on specificity first. That is how CSS decides which rule applies if there are conflicting rules. For example take this code:
a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}
Your links are going to turn out green, underlined and normal weight. This is because the green and normal weight came after the blue and bold in the order of how it was read, this is the simplest of the rules, there are others like is it inline, is it an id or a class etc. Read the rules and you'll understand how to write your CSS to get the rules to apply where you want them. This is where the terrible "put it in the head" advice came from because that CSS will be applied after external CSS. Still doesn't make it the right way to do it.
Learn about Classes and ID's. Just quickly ID's are unique names you can apply to elements for example you could then style just that ID in your CSS with #mainNav{color:blue} the thing to remember about ID's is they are UNIQUE. Do not use 5 UL's with the ID of mainNav (the main reason for this is so you can use them to identify them, say in js or jQuery for example). If you have multiple things that need the same styling you use classes, the nice thing about classes is you can chain them so for an easy example consider the following code:
.blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
Seems sort of dumb on first reading but now look at how you could apply that.
<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>
This is where you need to look to solve your problem. If you wanted to apply those list styles just to your nav, adding a class would solve it cascading to other lists. See the following:
.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}
<div class="nav">
<ul>
<li></li>
</ul>
</ul>
Any other lists you create wouldn't take on those styles. Basically you want your external style sheet to start with your basics then get more specific as you go. So the styles you want on every list go at the top and go on the ul and li or ol and li elements, then as you go further down the sheet you can get more specific.
Stay away from inline CSS
Stay away from CSS in the head
Trust me, learn to do it right and you'll be so happy you'll never understand why you did it any other way. Make use of the Chrome inspect element to trace down why something is displaying a certain way and then fix the CSS, forget these hack ways of fixing it. Fix it right.
If i know what your asking, you cant do that.
You can inspect with firebug/chrome dev tools and find the properties which are being overwritten.
Once you find them you can then overwrite in your own stylesheet.
Keep in mind that specificity is important here as well.
If it does not work you may need to add weight to your selectors, or use the !important keyword.
So you want to retain the styles in the sheet, just keep it from affecting the list on the page? Why not give that list a particular ID and style differently?
For example, I just called your list #cellul and gave it a 10px margin to demonstrate the different styling:
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}
Here's the result: JsFiddle
You can set a class for your <ul> like so:
<ul class="sth">
Then in the CSS stylesheet, put your class name afterthe ul like:
ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}
I am struggling with how to write the correct CSS for positioning some data entry forms. I'm not sure what the "proper" way to do it is.
An example of what I am trying to create a layout for:
Last Name Middle Initial First Name DOB
||||||||||||| |||||| |||||||||||||||| ||||||||||
City State Zip
|||||||| |||| |||||||||
Basically I have my labels and the ||| are representing my form elements (text boxes, dropdowns etc). I don't know the proper way to create classes for these elements without just creating one time use classes that specify a specific width that is only for these elements.
Also, how do I get all of these elements aligned properly and multiple items per line? Do I need to float each element?
Would I do something like:
<div class="last-name">
<div class="label">
<label>Last Name</label>
</div>
<div class="field">
<input type="text" />
</div>
</div>
<div class="middle-initial">
<div class="label">
<label>Middle INitial</label>
</div>
<div class="field">
<input type="text" />
</div>
</div>
...
<div class="clear"></div>
last-name and middle-initial etc would all be classes that would be used once and floated to the left. I'm not sure if this is a good way to go about it or not? Is there a better way to do this kind of positioning with CSS so I can avoid using tables?
I would choose to mark up this particular layout using fieldsets:
<form>
<fieldset class="personal">
<label>
<span>Last Name</span>
<input type="text" ... />
</label>
<label>
<span>Middle Initial</span>
<input type="text" ... />
</label>
...
</fieldset>
<fieldset class="address">
<label>
<span>City</span>
<input type="text" ... />
</label>
</fieldset>
</form>
I'd float all the labels, make the spans or inputs use display:block, and most everything should fall into place.
IMO, this is tabular data.
I don't think it's necessarily a shame to use a <table> for this.
Related discussion: Proper definition for "tabular data" in HTML
It's not a bad thing to use table layout when the data you're laying out is a table! That's what you have here, imo: a table. So save yourself some grief and treat it that way. We've been so beat up by CSS purists and semantic-web lunatics that I suggest the pendulum has swung too far: now we tie ourselves in knots over-CSSifying our layouts. Or at least I do. I spend way too much time trying to avoid table layout.
The outcome is that a lot of my pages have to do browser checking. And the extra time (hey! the 80-20 rule again!) to deal with browser quirks is way more than it should be. I'd have saved a lot of time, and had more robust pages, if I'd just thought a little bit instead of going for the never-any-tables, always-pure-CSS solution every time. Table handling is solid like a rock in every browser with no problems and no frustrations.
Just my experience.
Here is my version without tables: http://jsfiddle.net/dy4bv/5/ (increase a little HTML part to fit all fields)
Maybe it will be helpful.
You could always use display:table and display:table-cell.
So using your example code above, you would do something like this
div.last-name, div.middle-initial{
display:table-cell;
padding:1em;
}
Example: http://jsfiddle.net/5LBgp/
EDIT
A bit more context to add to the answers from #Pekka and #Pete Wilson:
I foresee two big problems with styling this as a table
if you ever want to change the styling, you will need to hack away at the HTML, probably even redo it completely. Your code will be more future friendly if you use divs.
screen readers and such will likely make a mess of it, not understanding that the table is not really a table.
I am not a web developer, but i've had a crack.
http://jsfiddle.net/dy4bv/28/
This is based on #Samich's design, but instead of using a pile of divs with magic clearing divs interspersed, i've split the rows up into items in a ul. I use labels for the warm fuzzy semantic feeling. The styling is done by making the label-and-field divs inline-block, so they flow from left to right, but the labels and fields themselves block, so they stack vertically (this is a very crude idea, i know). As #zzzzBov pointed out, you can then use the field IDs to hang widths off.
No, that is not tabular data. Here's a test if you're ever wondering if something is tabular data: What are the table headers?
As for the layout, whenever I get something that I have trouble laying out, I back up and ask if the design is the problem and in this case I think the answer to that question is: yes.
Is that a user friendly design? no. It's difficult to scan and will be slow for users to identify errors if there are submit errors.
Luke Wroblewski has some great information on his blog and in his book Web Form Design: Filling in the Blanks about how to design human friendly forms.
Just to unload these 2 pennies...
The first column is "PropertyDescription" and the second column is "PropertyValue", while each row is a "Property" items -- voilà, a table!
Still prefer CSS, but this can certainly be classified as tabular data.
I continuously find places where I need to use the <br /> tag because CSS can't do what I need. Isn't the <br /> considered part of the "design" and not part of document structure? What is the acceptable usage for it? Should the same rules also apply to the <hr />?
Here is an example of where I feel forced to use the <br /> tag:
I want to display this:
<address>1234 south east Main St. Somewhere, Id 54555</address>
like this:
1234 south east main st.
Somewhere, Id 54555
There is nothing wrong with using <br /> or <hr />. Neither of them are deprecated tags, even in the new HTML 5 draft spec (relevant spec info). In fact, it's hard to state correct usage of the <br /> tag better than the W3C itself:
The following example is correct usage of the br element:
<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>
br elements must not be used for separating thematic groups in a paragraph.
The following examples are non-conforming, as they abuse the br element:
<p><a ...>34 comments.</a><br>
<a ...>Add a comment.<a></p>
<p>Name: <input name="name"><br>
Address: <input name="address"></p>
Here are alternatives to the above, which are correct:
<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.<a></p>
<p>Name: <input name="name"></p>
<p>Address: <input name="address"></p>
<hr /> can very well be part of the content as well, and not just a display element. Use good judgement when it comes to what is content and what is not, and you'll know when to use these elements. They're both valid, useful elements in the current W3C specs. But with great power comes great responsibility, so use them correctly.
Edit 1:
Another thought I had after I first hit "post" - there's been a lot of anti-<table> sentiment among web developers in recent years, and with good reason. People were abusing the <table> tag, using it for site layout and formatting. That's not what it's for, so you shouldn't use it that way. But does that mean you should never use the <table> tag? What if you actually have an honest-to-goodness table in your code, for example, if you were writing a science article and you wanted to include the periodic table of the elements? In that case, the use of <table> is totally justified, it becomes semantic markup instead of formatting. It's the same situation with <br />. When it's part of your content (ie, text that should break at those points in order to be correct English), use it! When you're just doing it for formatting reasons, it's best to try another way.
Just so long as you don't use <br/> to form paragraphs, you're probably alright in my book ;) I hate seeing:
<p>
...lengthy first paragraph...
<br/>
<br/>
...lengthy second paragraph...
<br/>
<br/>
...lengthy third paragraph...
</p>
As for an address, I would do it like this:
<address class="address">
<span class="street">1100 N. Wullabee Lane</span><br/>
<span class="city">Pensacola</span>, <span class="state">Florida</span>
<span class="zip">32503</span>
</address>
But that's likely because I love jQuery and would like access to any of those parts at any given moment :)
<hr /> and <br />, much like everything else, can be abused to do design when they shouldn't be. <hr /> is meant to be used to visually divide sections of text, but in a localized sense. <br /> is meant to do the same thing, but without the horizontal line.
It would be a design flaw to use <hr /> across a site as a design, but in this post, for instance, it would be correct to use both <br /> and <hr />, since this section of text would still have to be a section of text, even if the site layout changed.
<hr/> and <br/> are presentational elements that have no semantic value to the document, so from a purist perspective yes, they ought to be avoided.
Think about HTML not as a presentational tool but rather as a document that needs to be self-describing. <hr/> and <br/> add no semantic value - rather they represent a very specific presentation in the browser.
That all being said, be pragmatic in your approach. Try to avoid them at all cost but if you find yourself coding up the walls and across the ceiling to avoid them then its better to just go ahead and use them. Semantics are important but fringe cases like this are not where they matter the most.
I believe absolutely avoiding usage of a commonly accepted solution (even it is outdated) is the same thing as designing a table with <div> tags instead of <table> tags, just so you can use <div>.
When designing your website, you probably won't require the use of <br /> tags, but I can still imagine them being useful where user input is needed, for example.
I don't see anything wrong with using <br /> but have not come across many situation where I required using them. In most cases, there probably are more elegant (and prettier) solutions than using <br /> tags if this is what you need for vertically seperating content.
I put in a <hr style="display:none"> between sections. For example, between columns in a multi-column layout. In browsers with no support for CSS the separation will still be clear.
No. Why? They're useful constructs.
Adding this addendum (with accompanying HR), in case my brief answer is construed as lacking appropriate consideration. ;)
It can be, and often is, an incredible waste of time -- time someone else is usually paying for -- trying to come up with cross-browser CSS-limited solutions to UI problems that BR and HR tags, and their likes, can solve in two seconds flat. Why some UI folks waste so much time trying to come up with "pure" ways of getting around using tried-and-true HTML constructs like line breaks and horizontal rules is a complete mystery to me; both tags, among many others, are totally legitimate and are indeed there for you to use. "Pure," in that sense, is nonsense.
One designer I worked with simply could not bring himself to do it; he'd waste hours, sometimes days, trying to "code" around it, and still come up with something that didn't work in Opera. I found that totally baffling. Dude, add BR, done. Totally legal, works like a charm, and everyone's happy.
I'm all for abstracting presentation, don't get me wrong; we're all out do to the best work we can. But be sensible. If you've spent five hours trying to figure out some way to achieve, in script, something that BR gives you right now, and the gods won't rain fire down on you for doing it, then do it, and move on. Chances are if it's that problematic, there might be something wrong with your solution, anyway.
Interesting question. I have always used <br/> as a carriage return (and hence as part of content, really). Not sure if that is the right way of going about it, but its served me well.
<hr/> on the other hand...
I'd not say at all costs but if you want to be purist, these tags have nothing to do with structure and everything to layout but HTML is supposed to separate content from presentation. <hr /> can be done through CSS and <br/> through proper use of otehr tags like <p>.
If you do not want to be a purist, use them :)
I think you should seldom need the BR tag in your templates. But at times it can be called for in the content, user generated and system generated. Like if you want to keep a piece of text in the paragraph but need a newline before it.
What are the occasions where you feel you are forced to use BR tags?
<br> is the HTML way of expressing a line break, as there is no other way of doing it.
Physical line breaks in the source code are rightfully ignored (more correctly: treated as a single white space), so you need a markup way to express them.
Not every line break is the beginning of a new paragraph, and packing text into <div>s (for example) just to avoid <br>s seems overly paranoid to me. Why do they bother you?
BR is fine, since a hard line-break could be part of the content, for example in code blocks (even though you'd probably use the PRE-element for that) or lyrics.
HR on the other hand is purely presentational: a horizontal rule, a horizontal line. Use border-top/bottom for neighbouring elements instead.
I personally feel that, in the interest of true separation of content and style, both <br /> and <hr /> should be avoided.
As far as doing away with <br /> tags in my own markup, I use <div> in conjunction with the css margin property to handle anything that needs a line break, and a <span> for anything that would be inline, but of a different "content class" (obviously distinguishing them with the class attribute).
To replace an <hr /> tag with css, I simply create a <div> with the border-top-style css property set to solid and the other three sides set to none. The margin and the padding properties of said <div> then handle the actual placement/positioning of the horizontal line.
Like I said, I'm no expert, my web design experience is mostly a side effect of my work with JSP pages (I am a Java programmer), but I came upon this question during some research and wanted to put my two cents in...
You can use <br> but don't use <hr>.
<BR> — LINE BREAK— This is display information. Still in
common use, but use with restraint.
<HR> — HORIZONTAL RULE— Display info with no semantic value –
never use it. “Horizontal”, by definition, is a visual attribute.
Source: Proper Use Guide for HTML Tags
That's bad usage if you're going Strict.
<br/> and <hr/> are not part of the content. For instance the <hr/> is commonly used to separate blocks of text. But isn't possible to that with border-bottom? And <br/> is seen in many cases as a way to limit text to a certain form, which couldn't be accomplished with css?
Of course you aren't going Strict don't worry to much.
HR has some hacky uses right now in preventing mobile browsers' font inflation algorithms from kicking in.
Also if you have lots of small content separated by HRs, the Googlebot will currently see it as 'N separate entries', which might be useful to you.
BRs should really only be used as a line break within a paragraph, which is a pretty rare typographical usage (except perhaps within a table cell), and I'm not aware of any hacky reason to use them.
Here is an excerpt from a course that helps you learn html.
<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox" value="anchovy">