Jump to content

Why not <table>


midnite
 Share

Recommended Posts

1. Why not use <table> for formatting? i feel good with it. What's the problem? What the point of others that they think table is not good for formatting?2. i can make some contents of variable length in the very center of a page by using table:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body, html {  height: 100%;}table {  height: 100%;  width: 100%;}</style></head><body>  <table>	<tr>	  <td valign="middle" align="center">		content of<br>		variable length	  </td>	</tr>  </table></body></html>

how to make it without <table> ??

Link to comment
Share on other sites

Read "Why tables for layout is stupid".In short:Tableless pages download and render faster, are better search engine optimized, are usable to mobile browsers and assistive technologies (like programs that read text on screen).Tables should only be used for tabular data.

Link to comment
Share on other sites

after i have posted, i surf the web for this topic too. They all say similar things.i know.... but, indeed, what can i do if i want to place something center center? it seems to me that the only way is to use <table> :)

Link to comment
Share on other sites

after i have posted, i surf the web for this topic too. They all say similar things.i know.... but, indeed, what can i do if i want to place something center center? it seems to me that the only way is to use <table> :)
the only way i know is to use css and the "position" tag, mentioning in px where on the page you want it, but i'm no expert, so if others know of another way =)
Link to comment
Share on other sites

It's called the "position property" btw, but that's just a detail :) .For all presentations, you shold use CSS. CSS, with the position property or by the usage of floats, margins, paddings and others can achieve amazing results that can make a 1KB page look like what would take 6KBs (at least) with a table based layout.For centering an element horizontally, you can use "margin:0 auto;" on the element you need to center. If you want to center only the contents, rather then the element iself, you can use "text-align:center;".Read more on CSS on the W3Schools' CSS tutorial.

Link to comment
Share on other sites

Thanks very much for your replies.Of course i did gone through the w3schools tutorial and had searched the web before asking this. But it seems that people falls into two groups: who gives up having things vertically aligned center and who uses table.With static content (fixed length & height), it is not hard but still not ideal:http://jlhaslip.trap17.com/samples/misc/po...entereddiv.htmlwhen content is longer than the page, it keep vertically centered. Thus the top goes out of the page and can never been seen. (in both IE & FF)With dynamic content, it is quite complicated. Thus the aim of saving bandwidth becomes nonsense. And also, not ideal when things longer than the browser's height (in IE):http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

Link to comment
Share on other sites

code for the second one:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body, html {height: 100%;background-color: #0000FF;}#outer {height: 100%; overflow: hidden; position: relative;}#outer[id] {display: table; position: static;}#middle {position: absolute; top: 50%;} /* for explorer only*/#middle[id] {display: table-cell; vertical-align: middle; position: static;}#inner {position: relative; top: -50%} /* for explorer only */#inner[id] {position: static;}</style></head><body><div id="outer">  <div id="middle">	<div id="inner">	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  10<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  20<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  30<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  40<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  50<br />	  	</div>  </div></div></body></html>

it is (i guess) mainly because IE have some different interpretation of display: table-cell;.

Link to comment
Share on other sites

If the content of the page is taller than the viewport, centering it vertically doesn't make sense, regardless of the method you use. In that case, simply center it using margin: 0 auto (and possibly text-align:center for some older non standard browsers).If you insist on using tables, then fine, do so. Web designers who are concerned about writing valid pages will continue to use div's. You can use tables, but it is not the recommended method.

Link to comment
Share on other sites

Yeah, about that "Explorer only" thing. If it's supposed to be only for IE, you should place all styles into another stylesheet (or <style> element) that you call with conditional comments.For this particular sample, wouldn't

#inner[id] {position: static;}

be interpreted by IE too? I mean, I know IE supports attribute selectors and I think it supports "position:static". Even if it doesn't, how do you know it will support it only when it supports the "display:table;" properties?

Link to comment
Share on other sites

Thanks jlhaslip and boen_robot.As being told by many websites, using tables for layout has many drawbacks. So, if i can have the same effect, i would like to use <div> also. But in this case, unfortunately, i cannot make it.boen_robot, excuse me. What do you mean in fact? Could you provide some solutions? Thanks.

Link to comment
Share on other sites

Gladly :)

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body, html {height: 100%;background-color: #0000FF;}#outer {height: 100%; overflow: hidden; position: relative;}#outer[id] {display: table; position: static;}#middle[id] {display: table-cell; vertical-align: middle; position: static;}</style><!--[if lte IE7]><style type="text/css">/*All of this code is for all Internet Explorer versions up to and including 7 only */#middle {position: absolute; top: 50%;}#inner {position: relative; top: -50%}</style><![endif]--></head><body><div id="outer">  <div id="middle">	<div id="inner">	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  10<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  20<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  30<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  40<br />	  1<br />	  2<br />	  3<br />	  4<br />	  5<br />	  6<br />	  7<br />	  8<br />	  9<br />	  50<br />	  	</div>  </div></div></body></html>

Link to comment
Share on other sites

That's really cool to learn Conditional Comments!But simply say, IE cannot achieve the following layout without using <table>:1) if content is shorter than the viewport, place it vertically middle2) if content is longer than the viewport, let the topmost content stay at the top of the viewport. And the rest follows. And if we scroll downward, we can see the bottom content. And also not some extra spaces below the bottom of the content.Am i right? IE cannot achieve it or just i do not know how to make it?PS probably no overflow: hidden;. And <!--[if lte IE7]> should be <!--[if lte IE 7]>, with a space between IE & 7

Link to comment
Share on other sites

That's really cool to learn Conditional Comments!But simply say, IE cannot achieve the following layout without using <table>:1) if content is shorter than the viewport, place it vertically middle2) if content is longer than the viewport, let the topmost content stay at the top of the viewport. And the rest follows. And if we scroll downward, we can see the bottom content. And also not some extra spaces below the bottom of the content.Am i right? IE cannot achieve it or just i do not know how to make it?PS probably no overflow: hidden;. And <!--[if lte IE7]> should be <!--[if lte IE 7]>, with a space between IE & 7
Yeah. You may be right about the space thing. I haven't used conditional comments in quite a while.As for the layout... isn't it just theese two requirements that the code above is supposed to achieve?
Link to comment
Share on other sites

i use your code, add a space between IE and 7, delete overflow: hidden;, and test with my IE 6.0.The first number 1 didn't show at the topmost of the page. It goes out of the viewport. As there are totally 50 numbers, the 25 sits at the middle of the viewport. Because there is no overflow: hidden;, i can scroll down and find 50. But a large space (probably equals to the length of half of the content, ie from 1 to 25) is below the number 50.

Link to comment
Share on other sites

Errr.... I don't know about your sample, but in the related links of that article I saw this sample which works great in IE7, FF and Opera. I don't know about IE6, but I suppose it was taken into consideration too.You might want to check out conflicting absolute positions. It holds out a "secret" about fixing IE bugs - by using yet another IE only feature - the expression property, enabling you to add JavaScript that applies even when JavaScript is off. This JavaScript could potentially fix whatever is broken in IE, but works in other browsers.

Link to comment
Share on other sites

In battlefield with IE standard for days, i finally end up with the following codes. Thanks everybody here, especially boen_robot who has helped me a lot!

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body { margin: 0; height: 100%; background-color: #0000FF; }		 /* blue */#outer { background-color: #FF0000; }									  /* red */#outer[id] { display: table; width: 100%; height: 100%; background-color: #FF0000; }	 /* FF only */#inner { text-align:center; background-color: #FFFF00; }				   /* yellow */#inner[id] { display: table-cell; vertical-align: middle; background-color: #FFFF00; }   /* FF only */</style><!--[if lt IE 7]><style type="text/css">#outer {  background-color: #0000FF;											   /* green */  position: absolute;  top:expression(document.body.clientHeight/2>document.getElementById("outer").offsetHeight/2?document.body.clientHeight/2-document.getElementById("outer").offsetHeight/2:0);  left:expression(document.body.clientWidth/2>document.getElementById("outer").offsetWidth/2?document.body.clientWidth/2-document.getElementById("outer").offsetWidth/2:0);}</style><![endif]--></head><body><div id="outer">  <div id="inner"><noscript>no JS here</noscript>	1<br />	2<br />	3<br />	4<br />	5<br />	6<br />	7<br />	8<br />	9<br />	10<br />	1<br />	2<br />	3<br />	4<br />	5<br />	6<br />	7<br />	8<br />	9<br />	20<br /><!--	1<br />	2<br />	3<br />	4<br />	5<br />	6<br />	7<br />	8<br />	9<br />	30<br />	1<br />	2<br />	3<br />	4<br />	5<br />	6<br />	7<br />	8<br />	9<br />	40<br />	1<br />	2<br />	3<br />	4<br />	5<br />	6<br />	7<br />	8<br />	9<br />	50<br />//-->  </div></div></body></html>

With the IE unique Conditional Comments and Dynamic Properties which compensates its incompatibility with display: table; and display: table-cell;, i can make it works like a <table> now. The only drawback (seem to be) is if my client does not support JS, my content will just stay at the left top corner. So, i'd better to wrap it with <script> and <noscript> to make it perfect =)For the time being, i have tested it only with my FF 2.0.0.7 and IE 6.0.2900.2180. Please let me know if IE 7.x.xxx works? Or if your have any other versions of browsers in hand, please test this code (for both 20 numbers and 50 numbers). Thanks :)

Link to comment
Share on other sites

Doesn't seem to work in IE7. Content is aligned horizontally in center but vertically at the top.Before I even try to debug your code... I'm not really good at JS, so what actually is "/2" and more precisely the "/2>" and "/2:0"? Some sort of escape sequences? Any change this could be done without them?

Link to comment
Share on other sites

oops!! Try removing the two [id] and test again? i have considered it wrongly...in IE 7, it will neither run those display: table; display: table-cell; nor the expression(...) for my script. So, removing the two [id] and if it works in IE 7, it means IE 7 support display: table; and display: table-cell; :)(aaa ? bbb : ccc) means if (aaa) {bbb} else {ccc} and / is just divide.

Link to comment
Share on other sites

So, removing the two [id] and if it works in IE 7, it means IE 7 support display: table; and display: table-cell; :)
But it doesn't work, as IE 7 doesn't support the table display properties just yet.I also tried making the conditional comment to "lte" so that includes IE7 too, but that didn't worked either. Only the background was changed.OK, now seriously, how bad do you need to do this? You can achieve many beatiful layouts without making them look the way tables do.And btw, you can put yourself on a pierdestal if you could make this holy expression JS that will enable IE to support table display properties AND changes the actual display based on what you have for Firefox AND is less then 4KBs as a whole (at least you'll be put on my "most known developers" list) :) .
Link to comment
Share on other sites

haha~ thanks!Oops!! How come?? :)Anyway, don't you think the layout that like <table> centering is cool? Vertically center it if it can (that means shorter than the page height), and just display as if normal layout if it can't. No content will be going out of sight, and no extra spaces.The biggest headache is, the most popular browser is not following the W3C standard -__-try changing from document.body.clientHeight to document.documentElement.clientHeight ?

Link to comment
Share on other sites

The biggest headache is, the most popular browser is not following the W3C standard -__-
Welcome to the club. This is THE only reason there are STILL sites that use tables for layouts.Sites like alistapart still make "div"s look like tables by using the popular faux columns technique. There are many other ways to "trick" the browser into getting the look of a table, so that it is as cool as a table.And also, as they say, content is king. W3C's site has always breathed respect, even though it doesn't follow this cannonical layout. And let us not forget, of course, Wikipedia. Actually, it seems they use tables... a few tables only, but still...
Link to comment
Share on other sites

try changing from document.body.clientHeight to document.documentElement.clientHeight ?reference: http://www.fu2k.org/alex/css/frames/if it still can't, try

expression((document.body.clientHeight/2>document.getElementById("outer").offsetHeight/2?document.body.clientHeight/2-document.getElementById("outer").offsetHeight/2:0)+"px");orexpression((document.documentElement.clientHeight/2>document.getElementById("outer").offsetHeight/2?document.documentElement.clientHeight/2-document.getElementById("outer").offsetHeight/2:0)+"px");

added +"px"

Link to comment
Share on other sites

Nope... uh... this could take a while... so I have two suggestions, either of which could do you good:

  1. Get Gobby. Look at my signature. We can chat and do trial&error on the fly. It will be much quicker then a forum.
  2. Get MS VPC. It's free! Then get the IE6 and/or IE7 VPC images and run either one on MS VPC to test with each on your own machine.

Link to comment
Share on other sites

i would say that the big difference is that css/div layouts are the future. you can point out examples of layouts that tables are better for right now but as support for css properties like display: table-row increase that will become a moot point.at the same time, there are plenty of things you can do with a css/div type layouts that you can't do with tables but the biggest reason for me to ditch tables for layout is the ease which i can update or change pages when you separate presentation from content.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...