I have a long vertical email form that I am editing from an old template made out of tables and the widths don't match up perfectly all the way down so what I intend to do is add a div or image etc behind all the tables so it is just wider than the widest table and it will hide the messy table layout and make the email form look unified and neat.
I've done a similar thing in the past but using z-index on CSS. As I am sending this to Outlook I don't want to use CSS.
Sorry if my post is confusing. Any help appreciated
The short answer is NO, it is not possible to do that with HTML only unless and until you are willing to change the order of your markup, else as far as the CSS goes, you can use z-index inline for that particular element.
So for example
<div style="z-index: /* Whatever */"></div>
While it is true that inline styling works across all major modern mail clients, z-index does not. I'm sorry to have to say this, but you're probably gonna have to rebuild your nested tables from the ground up if their sizes don't match.
As a quick example: Outlook 2007 uses word as a rendering engine. z-index will never display with that client, therefore will completely break your layout. And a lot of people still use outlook 2007, like it or not.
If you need some layering effects, you'll have to use plain old images and cut those so they fit in table cells. It's a pain, but that's part of the html-email world, and that's probably what you are being paid for.
You can use inline CSS. This works in outlook and all other email clients.
Related
Can anyone explain to a css/html learner why I would style a generic html element (e.g. <div>) with display:table rather than simply using the HTML table tag? It seems to me that the latter would be the one to choose since it's implemented especially for the purpose of presenting table data, but I know the former wouldn't have come into being without a good reason. I just haven't been able to come across a decent explanation. My usually-quite-reliable friend, Google hasn't been able to offer me much help on this one.
Thank you in advance!
Niall
display:table, display:table-row and display:table-cell were added for use as default display properties for <table>, <tr> and <td> respectively.
Outside of their defaults they are generally used for hacks like centering text vertically or pseudo-element clearfixing for example. Basically don't do it unless you need one of these hacks, especially don't do it if you want to implement a table as it will not be semantically correct leading to accessibility issues.
A word of warning, using display:table has semantic effects in some screen readers. This could lead to a section in your site that has multiple meaning for users using assistive technology.
There are several reasons, including the following:
To make it possible to style XML documents using tabular layout. CSS is not just for HTML.
To document the default rendering of HTML table elements in CSS terms.
To make it possible to use (simple) table layout for data marked up using e.g. div elements.
There are quite a few reasons to not use a HTML table but instead build a CSS table. But first, check to see the stats for your site and what browsers you need to support. You may need to support visitors that use older browsers that don't support display:table - eg IE7 http://caniuse.com/#search=display%3Atable
One reason to use CSS tables is to separate the formatting from the content. If you ever wanted to manipulate the data into another structure at a later date, you would have to replace all of the table code rather than just tweaking the CSS.
Another reason is to make the tabular data responsive. You can have a lot more control over the data if it's divs than if it's a HTML table. You may choose to rewrap the content as lists, or hide, show, scroll, truncate... the content as you see fit. While some of this is still possible with HTML tables, not all of it is.
I have search for the topic mentioned above but I didn't find good satisfying answer.
What are the benefits of using divs only in html page ?
What else should be taken care while designing a web page ?
Please help...
Thanks
They aren't. Div is just a generic element that gets used when no appropriate semantic markup is available.
The most appropriately semantic markup combined with CSS is preferred.
This separates concerns and increases device independence and reusability of content.
By applying different (or no CSS), the same content will "Just work" on mobile, desktop, aural, print and so on.
Have a look this: http://webdesign.about.com/od/htmltags/qt/tipdivtag.htm
Divs are useful when you want to style elements and might want to move them around independently.
Designers used to use tables to layout pages, before the days of CSS, as a way to position major page elements. Now you can use divs and CSS to do the same thing and have a lot more flexibility.
To see what you can do with divs, check out http://www.csszengarden.com/.
Tables still make sense when you've got tabular data, and tables are styleable with CSS. For example gmail uses tables for emails when looking at an inbox.
You probably already know this, but to see what people are using you can inspect some pages. In Chrome right click on something and choose 'inspect element'. You can see the elements, their structure and the styles. There is something similar in recent versions of all the major browsers.
I think that it is best to use divs and tables together. Don't use either with out consideration, just because people say that it's the correct thing to do. Rather think about why or how you are going to use it and what it is going to contain. Everything should be there for a reason, otherwise it's just cluttering up the code.
Looking at the CSS Zen Garden, I can see how powerful and convenient it is to separate design and content. The possibilities seem nearly endless. One can change the style sheet and the appearance of the whole site can be drastically altered.
Let's say I'm putting together the HTML part of a website. How do I know where to put divs, where to nest them, etc?
For example, let's say I want to centre something on the screen: I would generally nest 3 divs together: one display:table, one display:table-cell, and one margin-left:auto;margin-right;auto which would have the content.
Let's say I'm just doing the HTML content, but am not thinking about the design at this stage. How would I know that I need to nest together 3 divs if I don't necessarily know I will centre it on the screen?
Or if I have one design now with HTML/CSS and I have my divs and spans all set out, what happens in 18 months if I decide to change the CSS for a completely new layout? Sometimes I will have extra divs and sometimes I won't have enough.
Presumably it would always be better to have more levels than not enough. That way, the worst thing that can happen is that you have a few superfluous divs which aren't styled and have no visible effect.
Is this generally a problem others have? I know CSS Zen Garden is a special case, but would you generally change the HTML code considerably when you change the corresponding CSS?
I've worked in web development for many years, and over here in Reality things are a bit different from Theory: There is no such thing as separation of content and presentation. You'll always end up sliding in additional divs.
You better follow the YAGNI principle. Don't worry about your CSS as you're writing your HTML. Come back later and do the neccessary adjustments.
As for Zen Garden, you'll find a comment in the source code:
This xhtml document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner.
Theoretically, in order to change the style, you wouldn't have to touch the data (HTML). In practice, there are those problems you mentioned.
What I would do is a more-or-less sensible usage of divs (so for example, anything I think that I might want to move around, or any bunch of HTML that I would want to refer to together - would go in a div of its own). Otherwise, don't use too many divs, for reasons such as readability, maintainability, and size of HTML.
Then, whenever you want to change the style, make the minimal addition of divs so that you'll be able to do what you want.
This is a genuine problem with CSS and it was recognised by the authors of CSS3. The most recent published draft (2003) of the CSS Generated and Replaced Content module discusses a pseudo element called ::outside which would have solved the problem you describe. It would, when implemented, for
<div class="mycontent">Some text</div>
have allowed you to write:
div.mycontent { margin-left:auto;margin-right:auto; }
div.mycontent::outside { display:table-cell; }
div.mycontent::outside(2) { display:table; }
Unfortunately, the ::outside pseudo-element never made it into the CSS3 selectors spec, and the next draft (2011) of the CSS Generated and Replaced Content module will not mention the ::outside pseudo-element.
So we're stuck with putting wrapper divs everywhere just in case which as you note, does not allow proper separation of presentation and content, and remains a deeply unsatisfactory situation.
It all depends on how your website is driven. If you are using template files, the amount of updates will be minimal.
You do not want to overload your code with superfluous Divs because a) load time (althought it will be minimal difference in theory) and b) because it will create a lot of confusion when others edit your files.
From your example, it looks like you may be used to table style layouts. Using Divs to contain your layout will make flexibility very easy.
Is it possible to convert HTML + CSS into HTML for a system that doesn't handle CSS, not even inline CSS?
What options do I have?
No. Much of what CSS does is not possible with HTML alone. Your best option is to design your site in such a way that when it loses CSS, it still renders in a nice and orderly fashion. Pay very close attention to things like Heading Tags, paragraph tags, lists, etc. Be sure to build semantically-correct sites, and they (in most cases) will degrade quite nicely.
The only thing you can do is add styles that were possible with old html3+ attributes and font tags. Quite a bit of stuff is possible, but none of it is going to be automatic. You can go through pretty much everything in css and try to find it's html3+ attribute equivalent.
Things like background font b i center width height are examples of old attributes (or tags in the case of font) that define style (and should generally be ignored these days). I don't envy the work ahead of you, but just make a happy medium between reasonable things and unreasonable styles. Tables also might come in handy for floats as well.
Sounds like an old mobile device?
If you can't use any CSS, I would imagine you would have to resort to possibly deprecated HTML tags/attributes, like font tags and attributes like bgcolor.
This would probably be rather difficult, because to my knowledge you can't achieve everything you can do with CSS, like positioning for example. You would have to switch your layout to use tables and set align, valign, etc.
use this first
http://www.mailchimp.com/labs/inlinecss.php
then replace css with deprecated html
http://www.highdots.com/css-editor/articles/css_equiv.html
Two words: Image Maps :) (I've actually seen sites that, in order to "render correctly on every browser" literally just make a big fancy image the background, and add links accordingly via an image map)
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
I know everyone is all about DIV's and css and against tables now days, I have always used tables because they are so easy for me to visually see what I am doing while building, I am just now ventruing into the DIV world.
So my question are tables completely replaced by div's generally? I notice on the source of stackoverflow it is mostly DIV's but still uses tables as well, so I am guessing that tables must be used sometimes?
Below is an image of something I am trying to accomplish, most of it is coded but some of it is added in on photoshop, so far I have it all done in div's however what I have is only the background cells which are a list item and the photos, what I am missing from my code is all the text areas and it would be super easy for me to position the text areas within a table cell but since like 80% of the object is done with just css and divs I am not sure if I should just try to finsih it with just div's or if a table inside the comment div's would be the way to go.
I noticed on this page that the ansers are a table inside of a DIV
alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png
To be semantically correct, tables should only used for tabular data and not for laying out a page.
David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Theres a lot of fervent zealotry regarding this notion of semantic content, which is fine and all but the only problem is that it's hopelessly naive.
Fact: there are some things that can be done trivially with tables that either can't be done in "pure" CSS, are extremely difficult in "pure" CSS, have some nasty side effects in "pure" CSS or have serious cross-browser issues.
I did my CSS3 Wish List and in compiling that list I realized some things I've been able to do with tables since HTML 3.2 a decade ago I still can't do with divs.
I'm all for having a semantic layout. Nice ideal. But until it can do everything it's trying to replace then the thing it's trying to replace will have valid use cases.
divs are used instead of tables in most of the sites. But you can use tables in some situations where design using div will be complicated in a cross browser way.
For eg vetical aligning contents inside div will be a big problem as compared to that in table cells.
In this page also you can find table tags being used.
Tables will only be rendered to the screen after all the cells are finished processing.
Take a look at the following questions also.
Why not use tables for layout in HTML?
DIV’s vs Tables or CSS vs. Being Stupid
Yet Another Divs vs Tables Question: Forms
I think a lot of people will argue that "tabular" data, or data that can best be expressed in rows and columns, should be kept in a table, but that divs were invented to replace tables as large layout elements. In my personal opinion, tables were always used as layout elements in a way that went beyond their intended purpose. That's not to say that people don't still misuse divs, for example
<div align="center">To replace a <center> tag</div>
I'd say check out A List Apart, specifically Their section on layout for tips on how to use modern compliant css-based design.
edit : My point was that this is the INCORRECT use of a div tag. In this example, you would use a style such as "text-align:center" or apply that style to the tag itself, but in this case there is no reason to wrap your text in a block-level element, because text by default is inline, so you would be better off with something more like this...
<p class="center">This is a centered paragraph</p>
and then in your stylesheet
.center { text-align:center; }
Thus, the following:
<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>
May be compliant but it looks terrible, and you'd be better off doing :
<table>
<th>
<td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
<td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>
Tables are appropriate for tabular data, but divs + CSS is preferred for general page layout.
http://css-discuss.incutio.com/?page=TablesVsDivs has many good reasons why, as well as some counter arguments.
Like Korey and Thomas said, it's better to use table to represent tabular data.
If you want to make website layout in pure CSS, you can take a look on these CSS frameworks, which ease the task :
http://elements.projectdesigns.org/
http://960.gs/
http://www.blueprintcss.org/
http://elasticss.com/
http://www.yaml.de/en/
http://bluetrip.org/
http://devkick.com/lab/tripoli/
There are a lot of css frameworks out these, just find the one which fit your needs..
Update : Here is a more complete list of css frameworks.
Tables should only be used for tabular data. To figure out if what I am dealing with is tabular I ask myself "would I put this in Excel or Word if it?"
Bill Merikallio & Adam Pratt wrote a funny and informative article Why tables for layout is stupid. They also detail where tables should be used and when.
Tables as means of describing the structure of tabular data have not been replaced.
Tables as means for describing presentation have been replaced, but not with divs. They have been replaced with stylesheets in associate with whatever element best describes the semantics of the content. A div has no semantics associated with it, so it is used if there is nothing better.
It certainly depends. The Golden Rule you must remember is that the XHTML/HTML document file it's meant to describe content and flow.
Everything that is design should be (whenever it's possible, there are some certainly some case scenarios where we can't control it, like when CMS appear on the game) controlled using a CSS file.
Now, how can we reach the most semantically and pragmatical result? As with everything, it depends. Using XHTML/HTML tag elements instead on just relying on for correct content display it's the recommended way.
Notice that I've said tag elements. DIV is just one of them, but just replacing with whenever a or / tags exists is not enough. In fact, that will push you over "divitis" (the useless employ of divs for everything!) and WILL make your job hard. Try checking most tags and use them whenever seems correct.
Sometimes it's a pretty subjective matter as to what qualifies as a content or another tag. Just in this question someone asked if this content would be considered tabulated data (the one that tables are supposed to be used for), but I think that whatever content you must order and filter (and you can copy and paste on Excel without worries) it's worthy material.
Everythin else, it's mostly always just some interesting layout display that should be worked on with CSS and other tags.
Some people will say it's too much work and not worth it. I disagree. Though learning how to work with CSS/divs nuances it's somewhat different at first, you'll soon learn the twist of it.
Good luck and remember that we are always learning new stuff, so don't worry on question everything.
My recommendation would be to really learn HTML. Use the element that actually relates to the content. If it is a list of items, use one of the list tags. If it is data entry, use a fieldset tag. There aren't that many tags to chose from yet so many are neglected. If you simply replace all your table layout formatting with DIVs, your tag soup might be a little less chunky but you can still choke on it.
In terms of performance side, table(s) will only get rendered once the end tag () is reached, so if it is a table contains 100s of rows, you will see that table appears in the browser little later. This is not true for DIVs.
I posted on meta-SO about their tables: https://meta.stackexchange.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547
In short, I think it's fine since it is tabular data.
You should check Elastic CSS Framework you can layout an unlimited combination of columns very easily and position them with its helpers, check out the documentation.
cheers
CSS is great and all, but I mainly use it for styling, not layout. I and countless other developers still use tables every day for building web pages, and will for the foreseeable future.
If you want to use absolute and relative positioning for layouts, go for it. If not, you are not evil or stupid for not doing so. The main thing to look out for when using tables is preventing table nesting hell IMO.