homepage Welcome to WebmasterWorld Guest from 23.22.217.122
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
which is better <div> or <table> - Part Deux
the troubles with tribbles, er tables
iomfan




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


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




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

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




msg:4643687
 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




msg:4643689
 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




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

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

iomfan




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

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




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

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




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

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




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

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

lucy24




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

<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




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved