Comment On Periodically Tabling

OMFG! I can't even describe how horrible that is. Is this what people mean when tables are out of date? This is the PERFECT application for a table. LOOK AT WHAT IS THERE INSTEAD!!!!!! OMFG!

I've heard it said recently quite a bit that TABLE tags should no longer ever be used on websites, thanks to CSS.  Must have been the guy who wrote this page.

Of course, I replied stubbornly that while CSS is great and you can really write very flexible layouts for your site using DIV tags, don't you think that sometimes TABLE tags are useful for ... I don't know .... tables?

Try running a well coded through Adobe GoLive, then Microsoft Word.

Makes this stuff look like Meyer.

/Client did that
//No really
///I don't talk to him any more

GoatCheez:

OMFG! I can't even describe how horrible that is. Is this what people mean when tables are out of date? This is the PERFECT application for a table. LOOK AT WHAT IS THERE INSTEAD!!!!!! OMFG!

Tables are not deprecated for tabular data.  It is for positioning of elements of non tabular data, such as news paper columns, header-footer-body formats and what not.  Movement of non-tabular data is easier when it's not in tables. Table-izing data w/o a table is just.. ugly, as you said.

Jeff S:

I've heard it said recently quite a bit that TABLE tags should no longer ever be used on websites, thanks to CSS.  Must have been the guy who wrote this page.

Of course, I replied stubbornly that while CSS is great and you can really write very flexible layouts for your site using DIV tags, don't you think that sometimes TABLE tags are useful for ... I don't know .... tables?

TOTALLY... Next time I hear someone say that tables should never be used, I'll refer them to today's WTF. I seriously cannot believe that someone would do something like this. I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

Jeff S:

I've heard it said recently quite a bit that TABLE tags should no longer ever be used on websites, thanks to CSS.  Must have been the guy who wrote this page.

Of course, I replied stubbornly that while CSS is great and you can really write very flexible layouts for your site using DIV tags, don't you think that sometimes TABLE tags are useful for ... I don't know .... tables?

I agree there are some fundies out there that are on a table jihad and think all table tags must be completely eradicated from the holy lands that are known as teh interwebs.  Not quite sure I buy their logic.

Commenting on bad HTML is like beating a puppy. Poor HTML takes enough abuse.

That being said, this is the kind of crap I expect from a webdesigner, not from a programmer. It's a hell of a lot easier to A) remove the fricking HTML from the code, or B) USE A FRICKING TABLE.

I can't believe they're hard coding the positioning. That's just obscene.

Anonymous:

Tables are not deprecated for tabular data.  It is for positioning of elements of non tabular data, such as news paper columns, header-footer-body formats and what not.  Movement of non-tabular data is easier when it's not in tables. Table-izing data w/o a table is just.. ugly, as you said.

That's the problem with the anti-table CSS movement.  Some people take it too literally.

Anonymous:

Tables are not deprecated for tabular data.  It is for positioning of elements of non tabular data, such as news paper columns, header-footer-body formats and what not.  Movement of non-tabular data is easier when it's not in tables. Table-izing data w/o a table is just.. ugly, as you said.

roflmao... apparently the author of today's post was completely unaware of that!

Now imagine if they wanted to change the font...

The real WTF(^TM) is the lack of quotes on the class attribute!

We have finally discovered the underlying HTML for Web 2.0.

Looks like it was auto-converted from PDF (or something similar).   Which, for this use, is a bigger WTF in itself than just the shitty HTML  

I once had to make long tabular data printable across multiple browsers. With long tables, Internet Explorer would frequently print half a line of text on one page and the other half on another page. I wonder if part of this WTF stemmed from that problem.

Anonymous:

Now imagine if they wanted to change the font...

Or provide accessibility. Imagine if a user wants to enlarge the font since they are visually-impaired. They just... can't. Wtf!

CAPTCHA = Broken

Tables are for tabular data, not layout.  Nobody who knows what
they are talking about said you should not use tables, they just said
you should never use them for layout, along with other relics like
transparent spacer images and the like.  Your page with a content
column in the middle and navigation on the right is not tabular data.  Phone records, for instance, are.



Make your markup semantic and well-structured and a whole slew of
benefits ensue.  I'll not get into those here since there are
(literally) volumes written on the subject by people like Jeffrey
Zeldman, Eric Meyer, and Sir Tim Burners-Lee.  To get an idea of
how semantic markup and stylesheets can be used to achieve excellent
presentation, check out:
http://csszengarden.com/

Moin,



to add insult to injury this CSS code is actually wrong. Units are not
optional in CSS lengths ("top: 575;" ... 575 what? 575 metres? 575
pixels? 575 tomatoes?). It would serve them just right if the browser
just ignored these invalid specifications like it is supposed to do.



--

Henryk Plötz

Grüße aus Berlin

Anonymous:

The real WTF(^TM) is the lack of quotes on the class attribute!

Or the fact that they used the non-standard NOBR tags.



--------------------------------------------------

With the advent of cars, walking everywhere is depreciated, so I'm
going to have to figure out how to get the Oldsmobile from the living
room to the kitchen for lunch.

Uhhh... instead of hitting ctrl-v to paste and getting this ugly mess in Excel, why not do menu Edit/Paste Special and pasting as plain text?  That usually works in pulling the data out of html mess.

Nevermind.  Even that trick won't save this mess.  In the spirit of a past topic, how about:
1> print page to paper.
2> lay paper on wood table and photograph with digital camera.
3> print picture to paper and scan with OCR.
4> import OCRd text document into Excel.

I've seen this sort of HTML once before. It was in a browser "torture test" page, where the goal was to use standard HTML to crash web browsers.

A collegue, who happens to do a lot of HTML layout, pointed this out:

This "design" will actually print to directly to paper without spanning sheets on all browsers (just hit File->Print.  A table-based layout would flow across all kinds of pages and be a mess.   Maybe this guy had a requirement to be able to print.

Anonymous:

Nevermind.  Even that trick won't save this mess.  In the spirit of a past topic, how about:
1> print page to paper.
2> lay paper on wood table and photograph with digital camera.
3> print picture to paper and scan with OCR.
4> import OCRd text document into Excel.

the enterprise solution is at hand!

 

"hey look ma- no tables!"

GoatCheez:

Jeff S:

I've heard it said recently quite a bit that TABLE tags should no longer ever be used on websites, thanks to CSS.  Must have been the guy who wrote this page.

Of course, I replied stubbornly that while CSS is great and you can really write very flexible layouts for your site using DIV tags, don't you think that sometimes TABLE tags are useful for ... I don't know .... tables?

TOTALLY... Next time I hear someone say that tables should never be used, I'll refer them to today's WTF. I seriously cannot believe that someone would do something like this. I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

So true, so true.

GoatCheez:

I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

I don't see what the connection speed has to do with this.  The amount of data transferred should be about the same whether the programmer used tables or not.

Also, the code to generate this stuff would seem to be similar either way.

That looks absolutely beautiful as you increase the font size.

Is this guy's name for real? dog dick? wtf?

Anonymous:

Now imagine if they wanted to change the font...

I can bump the font up a couple points without a problem...  using Firefox, haven't tried it in IE.  There IS a significant problem if you bump the font up too much, but then again, if you had very bad vision your screen resolution would be changed, not your font.  (I am NOT considering changing the Windows font as I have never seen anyone do that.)

At least they aren't locking the font size using CSS like many websites do.

Very XML Enterprisey

Ha!  Check it out:

---

Periodically Tabling

A while ago I ran into a prob where a massive table def displayed on a single page would lock up a browser until it fully loaded. Users were complaining that it was too slow.  The quick and dirty solution was to do something similar. We broke out the output into individual tables for each group of rows (every couple of lines usually) . This had the effect (in IE 5 at least) of displaying the data faster on the screen. The users were happy because they could "see" the data immediately while the rest loaded in background. Not saying it was the best solution just the most expeditious given the constraints placed on us by the customer.


E.

DaveE1:

GoatCheez:

I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

I don't see what the connection speed has to do with this.  The amount of data transferred should be about the same whether the programmer used tables or not.

Also, the code to generate this stuff would seem to be similar either way.

If the HTML was generated on the serverside, then it has everything to do with it.

Instead of

<DIV CLASS=F13809 STYLE="top:575;left:74;"><NOBR> 115</NOBR></DIV>

being transferred, 

<TD>115</TD>

gets transferred. MUCH less data for each cell. It's about 1/12th the size in data.
I realize that the data can be compressed now before being sent, but still that's a
huge difference.

ahhhh that is so good to see. finally a tableless web page. welcome to the future!
Seriously, I have been trying to think of a good reason to do that... can't.

I guess I just don't see this as a bad wtf like others.  Maybe I am just really accustomed to base+offset code...   Also, I don't do much web programming but when I do I always have a pain in the ass when trying to format layout with tables.   Although, I could never ever go entirely without tables.

Ow! Red Bull really hurts coming back out the nose... I really can't believe this was done under the guise of supreme css correctness: As others have pointed out there is non-standard tag usage, and no self-respecting/aggrandizing css-aholic would be caught dead generating anything with those class names and in-line styles.

hey i think it's a regular reporting page that doubles up as an input feed to another web component...no need for conversion, the source itself is in xml form!

other components just needs to request the page and parse the content as is!

enterprisey indeed... :)

This could be some sort of Crystal Reports to PDF to HTML conversion.

Yeah, I've taken classes on accessibility and it's a common myth. To be Section 508c compliant we need to eleminate tables...

DaveE1:

GoatCheez:

I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

I don't see what the connection speed has to do with this.  The amount of data transferred should be about the same whether the programmer used tables or not.

Also, the code to generate this stuff would seem to be similar either way.

In this example, a cell containing '0.00' is expressed as:


<DIV CLASS=F13809 STYLE="top:587;left:707;"><NOBR> 0.00</NOBR></DIV>

That's 69 bytes to display a 4 byte value.  In a table, it would be:

<td>0.00</td>

which is 14 bytes per cell.  The div layout takes almost 5 times as many bytes per cell.  Logically, it will take 5 times as long to download.   The actual page alex provided is 56k.  As a table, it probably would have weighed in at about 12k.  Obviously, this gets worse for larger tables.


Of course, the ultimate in efficiency would be to encode all the table data in a comma delimited string, and parse it into a table via javascript!
'1-900-cow-tits,5.5 minutes,$13.95' eliminates all those pesky <td>s and <tr>s!


Crystal Reports can export directly to html. Some real Crystal Reports HTML output for a report with the word "gsdgdfgsdfgsdg":

<div class="adhqeu7u52jsw-0" nowrap="true" style="z-index:25;top:16px;left:64px;
width:126px;height:15px;"><table width="126px" border="0" cellpadding="0"
 cellspacing="0"><td align="left"><span class="fchqeu7u52jsw-0">gsdgdfgsdfgsdg
</span></td></table></div>

Looks similar, but bigger.

It just resizes so well!! And smart use of NOBR - best to make doubly sure that your data is never going to line-wrap.

Anonymous:

Anonymous:

Now imagine if they wanted to change the font...

Or provide accessibility. Imagine if a user wants to enlarge the font since they are visually-impaired. They just... can't. Wtf!

Wanna see something ugly?  use ctrl-scrollwheel on that page in firefox.  Mmmm, overlapping text goodness!

My personal favorite part of the page happens to be how the author wrote the table header. Each line of each "cell" has its own div. So :
Long
Distance
Charges
($)
requires 4 div non-consecutive div tags.

Absolute brilliance.

merreborn:

Wanna see something ugly?  use ctrl-scrollwheel on that page in firefox.  Mmmm, overlapping text goodness!

I think I have to report abuse on myself--FF did NOT like what resizing just did to it.  Poor little bits...

merreborn:

DaveE1:

GoatCheez:

I wonder how long report formatted like that would take to load on a machine that still uses dialup? I don't even want to see the code that's behind the scenes generating that garbage. I think this might get the WTF of the year award!

I don't see what the connection speed has to do with this.  The amount of data transferred should be about the same whether the programmer used tables or not.

Also, the code to generate this stuff would seem to be similar either way.

In this example, a cell containing '0.00' is expressed as:


<DIV CLASS=F13809 STYLE="top:587;left:707;"><NOBR> 0.00</NOBR></DIV>

That's 69 bytes to display a 4 byte value.  In a table, it would be:

<td>0.00</td>

which is 14 bytes per cell.  The div layout takes almost 5 times as many bytes per cell.  Logically, it will take 5 times as long to download.   The actual page alex provided is 56k.  As a table, it probably would have weighed in at about 12k.  Obviously, this gets worse for larger tables.


OK, I get it, it is not efficient.  But, If you do a 'save as' on the page Alex is hosting it is only 60KB, which is relatively small.  So, if you take something that is small and make it smaller it is still small.  Compare that to thedailwtf homepage with is over 600KB (60 KB without images) or cnn.com which is 550KB.  A couple hundred KB is the norm for webpages today.

I am outraged!  They used INLINE CSS, which is a mockery of the purpose of CSS.  Instead, they should have created a class structure like

.cell123 {
  top: 575px;
  left: 74px;
  overflow: hidden;
  
}
<div class="F13809 cell123">115<div>

Using pixel units will ensure that your output will render exactly the same - whether the useragent is a cell phone, printer, PDA, or Apple Cinema display!

For even greater reliability, they could have used a tranparent GIF of each character and positioned them likewise. That way sight-impaired users couldn't mess up your layout! Caching would make the site load really quickly too!

(here's hoping this renders correctly from Firefox 1.5.03/Win2K)

My dollar says this is output from some "BI" tool like Crystal. Still awful, just with blame going somewhere else.

[TABLE]

  [TR]

    [TD]

      [DIV CLASS=F13808 STYPE="top:0;left:0;"]

        [DIV CLASS=F13809 STYLE="top:575;left:74;"][NOBR] NO [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:108;"][NOBR]  WTF [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:136;"][NOBR]     HERE. ;) [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:191;"][NOBR] [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:232;"][NOBR] WAIT... [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:454;"][NOBR] [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:538;"][NOBR] OHHHH [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:602;"][NOBR]      MY [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:641;"][NOBR]        FREAKING DIVINE ENTITY![/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:707;"][NOBR] [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:781;"][NOBR] THIS [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:873;"][NOBR]     IS [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:575;left:947;"][NOBR]       TOTALLY [/NOBR][/DIV]

        [DIV CLASS=F13809 STYLE="top:587;left:74;"][NOBR]               DUUHHHHHH! :-P [/NOBR][/DIV]

      [/DIV]

    [/TD]

  [/TR]

[/TABLE]

merreborn:

Anonymous:

Anonymous:

Now imagine if they wanted to change the font...

Or provide accessibility. Imagine if a user wants to enlarge the font since they are visually-impaired. They just... can't. Wtf!

Wanna see something ugly?  use ctrl-scrollwheel on that page in firefox.  Mmmm, overlapping text goodness!

Ugly?  Scale it just the right amount, scroll a little off to the side, and you have yourself the basis for a new desktop pattern.  Art at its finest!

Anonymous:

A while ago I ran into a prob where a massive table def displayed on a single page would lock up a browser until it fully loaded. Users were complaining that it was too slow.  The quick and dirty solution was to do something similar.

Why didn't you just use table-layout: fixed?

Setting the property to fixed significantly improves table rendering speed, particularly for longer tables.

What if the programmer had converted screen form to HTML by subclassing graphics context and overriding its' text output function? Such method would surely result in similar HTML code.
Were it the case, I'd consider it a clever hack.