Does anyone else still design websites using tables?

Discussion in 'HTML & Website Design' started by Random Guy, Mar 17, 2009.

0
Page 2 of 2
  1. kiwin

    kiwin Peon

    Messages:
    281
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #21
    i got a job for html email creator lately.. and i say tables are too much code I don't like them.. but html email must use tables its the way to go for exact fitting layout.

    divs are the way to go and easier..
     
    kiwin, Mar 22, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #22
    Poorly coded tables at that. Excellent example of a table coded poorly even when tables were the norm, since the colspan 8 header should be a CAPTION, and the two rows of headings should be TH likely in a THEAD, while the column of manufacturer names should also be TH inside the TBODY.

    The outdated presentational markup also doesn't help. It's EXACTLY the type of thing I meant by not using the proper tags in a table AND outdated methodology.

    http://www.cutcodedown.com/for_others/mmerlinn/template.html

    Not a perfect 1:1, but it does shave about 70k off of it since all those stupid font tags, align attributes, entity spaces and other outdated nonsense get the axe since we can apply all that via CSS - and thanks to using proper tags we can do so with a minimum of classes.

    Again much of the problem is not with tables, but with people not using them right - or flat out not even realizing there are tags OTHER than TR and TD that are supposed to go in there.
     
    deathshadow, Mar 22, 2009 IP
  3. awelsh

    awelsh Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    I still use tables occasionally if I want to do something quickly and will only be used for a short amount of time, however CSS is the way forward :)

    Tables seem to never align correctly for me, could just be my method, but still CSS works fine and is alot cleaner in code :)
     
    awelsh, Mar 22, 2009 IP
  4. Roy Kwan

    Roy Kwan Member

    Messages:
    84
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #24
    Many sites are using tables, not all site owners are web designers...
     
    Roy Kwan, Mar 22, 2009 IP
  5. rolf

    rolf Active Member

    Messages:
    1,449
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    90
    #25
    I still use tables all the time when I code by hand. In fact, I had no idea that you could do without them!

    I must admit that css puzzles me greatly. It seems to be an incredible learning curve and I just cannot get my head round it.

    I don't see what's wrong with tables as long as the end result is good.
     
    rolf, Mar 22, 2009 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #26
    the problem stems from table abuse - when the end result is NOT good... Though 'not good' has many different meanings, in a lot of cases it's under the hood headaches that are the root of the problem.

    Take that first link in your signature - two tables that should only take one even when using tables for layout... but becuase you have a dynamic height content on the left shorter than the right, DIV is unsuited to the task since you want them centered top to bottom. (Yes, it can be done without a table, but anyone with the balls to call tables a hack and the code without a table for that type of positioning not a hack, well... needs to GAFC)

    Though most of what's "really wrong" with that page in a modern sense is all the use of outdated tags that shouldn't even be TAUGHT anymore. FONT and CENTER for example, or attributes like ALIGN and TARGET. Even WORSE is all the inlined CSS - get that *** out of the markup! Net result is 4.5k of markup for 971 bytes of content... roughly 40% more than should be needed.

    Modern style the markup for that would be:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Product Creation Secrets
</title>

</head><body>

<div id="container">
	
	<h1>
		"Discover How a High School Dropout Uses Info Products To Makes Hundreds of Dollars Every Night In His Sleep..."
	</h1>
	
	<p>
		"FREE 21 Page Report Reveals How You Too Can Easily Have An Internet Product Empire And Make Over $500 *PER DAY* Online Using My Simple Product Creation System!"
	</p>
	
	<table class="featuresAndForm">
		<tr>
			<td class="features">
				<ul>
					<li>Discover how to uncover gold nugget unexploited niches with hungry buyers.</li>
					<li>How to easily create and "set and forget" silent autopilot product sales machines.</li>
					<li>Create cash sucking traffic feeder sites that will spit out money like a broken ATM machine!
					</li>
					<li>Learn how you	can do all of this for free or save time by using ultra-cheap
					outsourcing.</li>
					<li>And Much More...</li>
				</ul>
			</td>
			<td class="arrow">
				<img src="arrow.png"
					width="100"
					height="76"
					alt="arrow"
				/>
			</td>
			<td class="join">
				<p>
					Enter your details below to get instant access to your FREE 21 Page Report:	"<b>51 Product Creation Tips</b>" before they all go!
				</p>
				<script type="text/javascript" src="http://forms.aweber.com/form/67/670688067.js"></script>
				<p class="standout">
					Don't Delay - Only 300, 17 Reports Left
				</p>
			</td>
		</tr>
	</table>
	
	<div id="footer">
		<h2>*Privacy Policy- Your Privacy Is Guaranteed</h2>
		<p>
			I HATE SPAM and I will never sell or rent your details.
		</p>
		<div class="articles">
			<a href="http://www.productcreationglory.com/articles.html">Articles</a>
		</div>
	</div>
	
	<!-- Start of StatCounter Code -->
	
	<script type="text/javascript">
	
	var sc_project=4572339; var sc_invisible=1; var sc_partition=56; var sc_click_stat=1; var sc_security="df01a3ce"; </script>
	
	<script
		type="text/javascript"
		src="http://www.statcounter.com/counter/counter.js"
	></script>
	
	<noscript>
		<div class="statcounter">
			<a href="http://www.statcounter.com/joomla/"
				title="joomla site stats" 
			>
				<img src="http://c.statcounter.com/4572339/0/df01a3ce/1/"
					class="statcounter"
					alt="joomla site stats"
				/>
			</a>
		</div>
	</noscript>
	
	<!-- End of StatCounter Code -->
	
<!-- #container --><div>

</body></html>
    Code (markup):
    2.6k - everything else done on that page would be in the CSS, which frankly for such a simple page I'd be suprised to see break 1k in size.

    Mind you, it's under 10k on something likely low traffic and poorly ranking in searches so really it doesn't matter, but you apply those same markup techniques to a real high traffic website - and it adds up quick. I can go into most outdated high traffic websites and by a simple recode of the html and CSS reduce their bandwidth use 50% or more on average just by using modern techniques.

    The problem is 95% of the books on shelves on the subject, and therin 100% of the classes taught are pure bullcookies propagating outdated techniques...

    One of the biggest cockups you see time and time again is the use of tables just to center the content on the page... Here's a tip, if your table is going to only have one TD per TR, don't use a table.
     
    deathshadow, Mar 22, 2009 IP
  7. rolf

    rolf Active Member

    Messages:
    1,449
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    90
    #27
    So basically what you are saying is that CSS is more efficient and can be a major bandwidth/processing saver for very high traffic sites.

    Anything else is just pedantic?

    I learned html back in '96 and so long as browsers are backward compatible, I'll stick with my favourite tags :) For someone like me who does not consider themselves a "web designer", these tags are easy to use. Heck I still use names for colours like font color=red etc. :D
     
    rolf, Mar 22, 2009 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #28
    It's cleaner markup, and once you understand CSS it's WAY easier to maintain. You want to change the colors of your links on every FONT tag you've inlined that's your headings - for example:

    <font size="4" color="red" face="arial,helvetica"><b>Test Heading</b></font>

    You have to manually go through every page and change each and every one of those. PITA. If you had just used the proper heading, let's say that would be a h2, the markup would remain unchanged:

    <h2>Test Heading</h2>

    While you would only have to change one line in your CSS to effect every single page.
    
h2 {
  color:red;
  font:bold 140%/120% arial,helvetica,sans-serif;
}
    Code (markup):
    It also provides consistancy of appearance across multiple pages on a site since instead of having to remember "Hey, how did I style that on the last page" you can just say WHAT it is "Ok, this is a standard second level heading"

    Which is also part of the reason to ditch the bad habits of the past decade - funny thing is it is NOT entirely a modern technique, as correcting the fact that from 1996 to 2002, nobody was doing it RIGHT. The whole POINT of HTML was supposed to be marking up elements as what they are, NOT how they appear - appearance was SUPPOSED to be device dependant. CSS gives us the ability to return to that original premise, and brings with it some other useful factors.

    Chief among those is graceful degredation. Saying what things are and NOT how they appear means on devices that overide things like font sizes (handhelds for example) or ignore CSS you can still get meaningful formatting. It makes it easier for data scrapers (like search engines) to figure out what's a heading and what's content. (which is why throwing paragraphs around everything and calling it semantics is just as retarded as slapping font around everything with nothing but line-breaks)

    It also plays to one of the core concepts I was taught three decades ago about writing code - the less code you use, the less there is to BREAK. When it comes to HTML, this is an ideal long lost.

    You used the word pedantic - not my first choice. Outdated, outmoded rubbish would be more accurate.

    As I often say, the day you think there's nothing new to learn is the day the world leaves you behind...

    Frankly, a lot of web developers WANT that backwards support to be gone - There's a reason most of those tags are deprecated in STRICT doctypes, since there is little good reason to be creating new websites in Tranny or legacy doctypes. It was sloppy bad coding practice then, it's even worse today since we've had alternatives since 1998 - though only a handful of serious developers paid any attention to that before 2003.

    color:red; - just as valid in CSS

    Though I tend to restrict myself to three digit hex colours, but that's just because I've always been able to picture the colourspace in my head. Comes from programming 16 color EGA/VGA in Machine code.
     
    deathshadow, Mar 22, 2009 IP
  9. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #29
    well, here's something I didn't see mentioned, CSS versus Tables Tables are good here, CSS is good there.... blahblah people argue based on how it looks on one page.....

    Here's my Argument, and my justification:

    *ALL* layout must be done in CSS.

    That's right, all layout, even if it's harder than using tables, even if it takes more code. Why you might ask? I mean, tabular data should go in tables, and websites are grids so WEBSITES should go in tables? whatever.

    What happens if you use tables for layout, and you want to change all 400 pages on your website? Well, you have to go in and edit 400 HTML files.

    *BUT*, if you're using CSS as it shoudl be, in an external file referenced by those 400 pages, changing the layout in the CSS will modify all pages that link to it, and boom! all 400 pages are now updated without changing a line of code within those files.

    Do as much as you can with stylesheets, even if you don't think you need to - hard-coding layout is poor practice and will come around and bite you before the end.
     
    innovati, Mar 22, 2009 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #30
    Actually, I would edit /theme/themename/index.template.php

    But then, that's not an option for everyone.

    But I do agree that as much presentation (and layout is PART of presentation) should be in the CSS as possible. Markup (HTML) should say WHAT things are, CSS should say how they appear.

    Just don't go nuts shoving tabular data into a dl inside a ul - because that's even WORSE.
     
    deathshadow, Mar 22, 2009 IP
  11. deezine

    deezine Guest

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #31
    I do hybrids
     
    deezine, Mar 22, 2009 IP
  12. crunk_monk

    crunk_monk Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Just use what you find the easiest, for now that would be tables.
     
    crunk_monk, Mar 22, 2009 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #33
    BAD answer, that's how people end up using sleazeball shortcuts and pay for it later...

    But as always, people don't actually want work to be... WORK. Take the sleazeball shortcut now - who cares if it's more work for the next person...
     
    deathshadow, Mar 23, 2009 IP
  14. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #34
    I used to, but it's now bad for optimization to design using tables. CSS is easier for the bots to crawl your website. It's now a lot easier, for me, to design using CSS.

    It also makes websites load faster :D
     
    scottlpool2003, Mar 24, 2009 IP
  15. GameSlim

    GameSlim Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #35
    Well, I guess tables will never go away or be obsolete.. they will always be there just in case you need them.
     
    GameSlim, Mar 24, 2009 IP
  16. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    819
    Best Answers:
    7
    Trophy Points:
    320
    #36

    There is one point that I will wholeheartedly agree with you about. I should have TH tags in the headers and columns. The next time I update the code for my pages, I will correct that oversight. And then over the next few months all 4000+ pages (as they are updated) will get the TH tags as they should have had in the first place.

    And, yes, the code you propose is shorter and CLEANER. And would be much easier to maintain.

    Unfortunately, 25% of my targeted audience CANNOT use THEAD, TBODY, CSS, etc. And I CANNOT abandon 25% of my potential sales. When my targeted audience catches up, then and only then will I consider using those constructs. The pages as coded work in every browser I have tried. I have not tried them in some of the modern browsers like Safari, Chrome, etc, but I assume that they work just fine there as no one has ever told me differently. The big problem is that your updates WILL NOT work in 25% of the browsers my targeted audience uses.

    However, IF there is something that I am missing, enlighten me. A huge chunk of my audience still uses NS 4 and below and IE 5 and below. Any suggestions that you have MUST work in those browsers - I can't afford to lose 25% of my sales just to make the pages fit the "latest & greatest" model that you propose.
     
    mmerlinn, Mar 28, 2009 IP
  17. RainbowGradient

    RainbowGradient Peon

    Messages:
    67
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #37
    I tried switching to Divs and stuff. Them some people I work with complained because they like tables better so I guess it's back to tables for me.
     
    RainbowGradient, Mar 28, 2009 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #38
    You still have people using IE4 and Netscape 4? My condolances...
     
    deathshadow, Mar 28, 2009 IP
  19. CarmenKarma

    CarmenKarma Greenhorn

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #39
    I agree with Astroman. Tables still have their usage, but CSS is the way to go. If you are at "zen" css level, you can create different css theme on the fly and rearrange your whole site's layout without really effecting the code. That's why i prefer going all natural.

    :)
     
    CarmenKarma, Mar 28, 2009 IP
  20. m3rlinez

    m3rlinez Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #40
    You are not the only one!

    CSS spins my head. Sometimes, it takes hours for me to create a simple layout I would accomplish with TABLE in few minutes. Especially with those DIV floating stuffs.

    Until I found the ready-made CSS named BlueprintCSS later :D. The usage is very easy and it yields 100% CSS web pages! If you are average CSS user already, you can start off by reading the examples in "tests" folder. They are very easy to understand. It also helps dealing with compatibility problems between different web browsers.

    So that's my story on moving from TABLE to DIV :) Hope this helps
     
    m3rlinez, Mar 28, 2009 IP
Page 2 of 2