1. Home
  2. Forums Index
  3. Browser Side / HTML 5:18 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

which is better <div> or <table> - Part Deux

the troubles with tribbles, er tables

         

iomfan

7:43 am on Feb 9, 2014 (gmt 0)

10+ Year Member



System: The following 5 messages were cut out of thread at: http://www.webmasterworld.com/html/4628956.htm [webmasterworld.com] by incredibill - 2:29 pm on Feb 9, 2014 (PST -8)

Just came across this thread while looking for information on replacing a design using TABLE with something better.

And I suspect that incompetence or laziness are not the only reasons why some people use TABLE in some designs. For example, how would you provide the functionality of the page described below without using TABLE? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="content-language" CONTENT="en">
<TITLE>TITLE</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="css/links.css">
<META NAME="robots" CONTENT="index, follow, noarchive, noodp, noydir">
</HEAD>

<BODY>
<TABLE STYLE="width:100%;height:100%;">
<TR>
<TD ALIGN="center" VALIGN="middle">

<BR>
<!--#include virtual="ssi/menu-p1.html" -->
<P>

<TABLE STYLE="height:500;" BGCOLOR="#90afef" BACKGROUND="pic/bgimage.jpg" CELLPADDING="30">
<TR>
<TD ALIGN="center" VALIGN="top">
<BR>
<P>
PAGE TEXT
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="bottom">
<IMG SRC="pic/spacer.gif" WIDTH="160" HEIGHT="1" ALT="-"> <IMG SRC="pic/spacer.gif" WIDTH="160" HEIGHT="1" ALT="-"> <IMG SRC="pic/spacer.gif" WIDTH="160" HEIGHT="1" ALT="-"> <IMG SRC="pic/spacer.gif" WIDTH="160" HEIGHT="1" ALT="-"> <IMG SRC="pic/spacer.gif" WIDTH="160" HEIGHT="1" ALT="-">
</TD>
</TR>
</TABLE>

<P>
<!--#include virtual="ssi/menu-p1.html" -->
<P>

</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Other necessary information that is not visible on the code portion shown above: the stylesheet defines the body background and the text colour as black

A description of the intended and actual appearance of this page:

1) This page is designed to be displayed on a screen at least 900 pixels wide, i.e., on notebooks and desktop computers, and although iPads can display it without the need for scaling if used in landscape mode, mobile phones receive a different version of it that is designed to automatically adjust to the screen size ("responsive design").

2) The visible portion of this page is contained in an area of about 900x560 pixels and is not supposed to change its size and aspect, regardless of the size of the screen being used. (IOW, the larger the screen, the more black space will be shown around the visible portion of this page.)

Keen eyes will quickly detect the "illegal" use of BACKGROUND in the context of TABLE - this is a secondary challenge: which other ("legal") design can provide graceful degradation in the case of a missing or slow-loading background image, meaning the black text will be readable on the specified light blue background color (i.e., the background is not black)?

(A question for the moderator: I can provide a live sample of the design described above under a "dead domain"; i.e., a domain name that is not present on the web since it is not used for anything else - would it be permissible under these circumstances to point to this page (perhaps using the "www DOT example DOT com" format, to avoid the creation of an active link)?

Thanks

lucy24

8:52 am on Feb 9, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Keen eyes will quickly detect the "illegal" use of BACKGROUND in the context of TABLE

What's illegal about it? That is, other than the inline formatting itself, which I assume you only put in this sample so we wouldn't have to look at external CSS.

Frankly I don't see what there is in this visual layout that requires tables at all, let alone-- shudder --nested tables. Surely there's no excuse for 
<TD ALIGN="center" VALIGN="top">
<BR>
<P>
PAGE TEXT
</TD>
</TR>

[ sic ]

birdbrain

10:46 am on Feb 9, 2014 (gmt 0)



Hi there iomfan,
I would code your page like this... 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
html,body {
    display:table;
    width:100%;
    height:100%;
    margin:0;
 }
body {
    display:table-cell;
    padding:15px;
    vertical-align:middle;
    background-color:#f0f0f0;
 }
.fluid-content {
    padding:30px;
    background-color:#ef90af;
    box-shadow:inset 0 0 20px #666;
 }
#centered-content {
    max-width:886px;
    margin:15px auto;
    background-color:#90afef;
 }
#top-content {
    min-height:190px;
    padding:30px;
    box-shadow:inset 0 0 20px #666;
 }
#bottom-content {
    min-height:190px;
    padding:30px;
    box-shadow:inset 0 0 20px #666;
 }
</style>

</head>
<body>

<div class="fluid-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p>
</div><!-- end .fluid-content -->

<div id="centered-content">

<div id="top-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p>
</div><!-- end #top-content -->

<div id="bottom-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p>
</div><!-- end #bottom-content -->

</div><!-- end #centered-content -->

<div class="fluid-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p>
</div><!-- end .fluid-content -->

</body>
</html>




birdbrain

birdbrain

11:05 am on Feb 9, 2014 (gmt 0)



I forgot to mention that the only reason that "display:table"
and "display:table-cell" were used in the above code was
that the blue content box was required to be vertically and
horizontally centered on the page if there was no content
above or below it.

Other than that situation there is no need for it whatsoever. ;)


birdbrain

drhowarddrfine

2:07 pm on Feb 9, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Even then, 'display:table' properties have nothing to do with the structure of the page like a table would.

iomfan

12:24 am on Feb 10, 2014 (gmt 0)

10+ Year Member



lucy24:
What's illegal about it?

Well, using BACKGROUND in a table was never part of the standard, and the W3 validator reports it as error. :) But that is just a minor point since browsers seem not to mind. ;)

I don't see what there is in this visual layout that requires tables at all

Simply looks like they tried to fix the size of the displayed area to match the dimensions of the background image and not, as most sites do, allowing an expansion to meet various users' various screen sizes.

birdbrain:
The fluid parts are expanding to the screen width and therefore not useful for their purpose. So it looks like one should use something like 

 centered-content {
  max-width:886px;
  min-width:886px;
  margin:15px auto;
  background-color:#90afef;
  }


I'll see whether such a thing can work... :)

lucy24

4:47 am on Feb 10, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Well, using BACKGROUND in a table was never part of the standard

Ah, you do mean the actual inline word. Unimportant, since the real thing would surely put all of that in CSS.

It's true that <td> or, ahem, {display: table-cell;} is vastly simpler than any other means of achieving vertical positioning :) Sometimes you can use "vertical-align" but only if it's an inline or inline-block element.

iomfan

7:00 am on Feb 10, 2014 (gmt 0)

10+ Year Member



About that minor point: One particular feature of that page (the owner wants it that way) is that the light blue background loads before the image. That means, even if the image is loading slowly or not at all, the text is visible and the site is still useful to some extent (I've heard that approach called "design to allow graceful degrading"). OTH, when using the STYLE parameter, the background remains black until the image has loaded, therefore there is still this line that the W3 validator objects to, 

<TABLE STYLE="height:500;" BGCOLOR="#90afef" BACKGROUND="pic/bgimage.jpg" CELLPADDING="30">


instead of the norm conforming 

<TABLE STYLE="height:500;bgcolor:#90afef;background:url(pic/bgimage.jpg)" CELLPADDING="30">
.

But that issue will hopefully disappear altogether if the main issue is solved: horizontal and vertical centering of a predefined visible area. STYLE allows for horizontal positioning, but I have not yet found a way to use it for the kind of vertical positioning that is wanted here, so i hope to find out here whether that is possible at all without using tables. :)

The site owner is quite happy with the current design, but it is a matter of professional curiosity on my part to pursue this...

drhowarddrfine

2:51 pm on Feb 10, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your height values are not legal. You have no units (px, em, etc.) specified for '500'. And bgcolor does not exist in CSS.

lucy24

9:28 pm on Feb 10, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



<TABLE STYLE="height:500;" BGCOLOR="#90afef" BACKGROUND="pic/bgimage.jpg" CELLPADDING="30">
...
<TABLE STYLE="height:500;bgcolor:#90afef;background:url(pic/bgimage.jpg)" CELLPADDING="30">

This is an academic point since neither of those should occur. The correct form is something more like 

table.thisclass {height: 500px; background: #90afef no-repeat center url("pic/bgimage.jpg");}
table.thisclass td {padding: 30px;}

Off the top of my head, so don't cut-and-paste.

iomfan

12:52 am on Feb 11, 2014 (gmt 0)

10+ Year Member



drhowarddrfine, lucy24:
You are, of course, quite right about the second code snippet. I was just typing that off the top of my head and didn't copy out what was actually in the file in question, which was this: 

<TABLE STYLE="height:500;background-color:#90afef;background:url(pic/bgimage.jpg)" CELLPADDING="30">


It occured to me that the problem with the color not loading had to do with the "background" parameter, and after improving the style instruction to read 

<TABLE STYLE="height:500;background-color:#90afef;background-image:url(pic/bgimage.jpg)" CELLPADDING="30">


this problem has been solved. Now on to the main problem: the centering.

I have managed to get closer to the desired result using CSS:
A light blue rectangle of defined size (in this case 900x500 pixels) can be centered in the screen and the text will appear inside that. Three problems at this point:
- both the top menu and the bottom menu (see the "include" statements) appear above the rectangle
- on large screens the centering works OK, but on small screens the top simply gets cut off
- the background image does not show up

Here is the relevant section of the css file at this stage: 

body {
background-color: #1f1f1f;
color: #000000;
}
.container {
 height: 600px;
 width: 900px;
 position: absolute;
 margin: -300px 0 0 -450px;
 left: 50%;
 top: 50%;
}
.imagebox {
 height: 500px;
 width: 900px;
 background-color: 90afef; background-image: url(pic/bgimage.jp);
 position: absolute; 
 margin: -250px 0 0 -450px;
 left: 50%;
 top: 50%;
}
.textbox {
 height: 440px;
 width: 840px;
 position: absolute; 
 margin: -220px 0 0 -420px;
 left: 50%;
 top: 50%;
}


And the page itself: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="content-language" CONTENT="en">
<TITLE>Layout test: background image for a defined area of the screen</TITLE>
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="" >
<LINK REL="stylesheet" TYPE="text/css" HREF="css/links.css">
<META NAME="robots" CONTENT="noindex, follow, noarchive, noodp, noydir">
</HEAD>

<BODY>

<DIV CLASS="container">
<DIV ALIGN="center">
<!--#include virtual="ssi/menu-p1.html" -->
<P>
</DIV>

<DIV CLASS="imagebox">
<DIV CLASS="textbox">
<DIV ALIGN="center">
<H1>Title of the Page</H1>
Some kind of descriptive text (maybe a slogan)
<BR>
Supplementary information
<P>
The quick brown fox jumps over a lazy dog
<BR>
The five boxing wizards jump quickly. Amazingly few discotheques provide jukeboxes.
<P>
The job requires extra pluck and zeal from every young wage earner. Help?
<BR>
Pack my box with five dozen liquor jugs. Jackdaws love my big sphinx of quartz.
<P>
<I>Special: A quart jar of oil mixed with zinc oxide makes a very bright paint.
<BR>
A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.</I>
<IMG SRC="pic/smile.gif" WIDTH="10" HEIGHT="10" ALT="-"> 
<P>
<FONT SIZE="-1">No kidding -- Lorenzo called off his trip to visit Mexico City just because they told him it was extinct</FONT>
</DIV>
</DIV>
</DIV>

<DIV ALIGN="center">
<P>
<!--#include virtual="ssi/menu-p1.html" -->
</DIV>

</DIV><!-- container -->

</BODY>
</HTML>


(I can send a package with the page source text, the image, the include file, and the css file to anybody who is willing to experiment with this. ;))

drhowarddrfine

3:03 am on Feb 11, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The height is still invalid and ignored by browsers. Your doctype, and most of the markup, is antiquated, deprecated and should have no longer been used 15 years ago.

@birdbrain gave an example of what should be done. Go with that.

iomfan

9:34 pm on Feb 11, 2014 (gmt 0)

10+ Year Member



Understood (invalid or not, as it happens various browsers I've tested have been interpreting this as "px", but I've made that explicitly now - can't hurt). The doctype is at this point what the client uses (and since this is not a paid job but just a research experiment, I'll change the doctype and other older features if and when the other problems have been solved - otherwsie the client will keep what he has at this time :)). And yes, i'll make use of birdbrain's (and lucy24's) suggestion to the extent possible (will probably get back to this project on the weekend). Thanks for the hepful hints, as always!

rainborick

12:49 am on Feb 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you don't change the <!DOCTYPE>, you're going to continue to have cross-browser compatibility issues. Search on "doctype switch" and you'll see what I mean.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 5:18 am May 1, 2026