As anyone who’s ever dealt with HTML knows, table layouts can be a pain in the ass, especially for websites with a lot of art. I can muddle along with it and more or less get things to line up, but it usually involves a lot of swearing and screaming at the computer. Especially those damn pages that start with a graphic artist and Photoshop and end with a bunch of .gifs cut up into squares with ImageReady. Yeah, that works great until you stick a menu or a button in there, or (god forbid) want to use dynamic controls.
I’m sick of muddling. I want to learn the Arcane Art of HTML Table Layout so that when the @#! image is 3 pixels to the left of where I want it to be even though there’s no idiot margins or padding or what-have-you that I can find anywhere in the twenty five level hierarchy of tables that are required to make the stupid thing look like the goat-felching graphic artist wants it to look, it doesn’t take me a day and half to figure out why.
There’s plenty of books and websites dedicated to “Learning HTML!” or “HTML for Dummies.” I don’t want those - I know all that stuff already. I want “HTML for programmers who have to deal with Goat Felching graphic artists who have NO CONCEPT of how hard it is to line up those 328 10-by-17 pixel .gif files you sent me and then put dynamic controls and images in the middle of them.”
I hate CSS even more than I hate tables. I’ve been lucky in my web career; most of what I’ve done is essentially high-end in-house web apps that are designed more for functionality than prettiness, and had little or no fancy graphical elements.
It’s funny; I’ve been doing this for oh, I dunno, 7 or 8 years? Mr. Athena is just now doing some projects with Web based front ends, after being a backend library and/or Windows GUI programmer for most of his years. I’ve sort of gotten used to the churning cesspool that is HTML; he’s constantly looking at me and saying “You’ve GOT to be kidding, GUI layout tools were better than this in 1982!”
And he’s right. HTML is a step backwards in a lot of ways. Maybe this should be a pit thread.
When I was a lad, I did text formatting with runoff, then MM, which was a sugared version of nroff/troff. So HTML makes me nostalgic for the good old days. Doing figures in pic had exactly the problems you mention. But you could see exactly what was going on.
I consider myself a “table expert” and do a lot of what you’re talking about - taking these “brilliant” designs made by guys who are better suited for designing print ads than a “living” HTML document.
One thing you can try is using ImageReady…take the big image and use ImageReady’s slicer, name your slices meaningfully (like PutButtonHere), export the files and HTML and then replace parts with your dynamic HTML.
I also find that the Firefox Add-On Web Developer is really fucking handy. Use the “Outline” tool to outline your tables. Replaces having to turn on borders all the time (which is how I normally did it).
Having a transparent gif around to force spacing is pretty helpful. Make a transparent 1x1 image in Photoshop and save it as a gif, then if you need a table cell to be exactly 10x12, put the gif in there and make it 10x12.
Unfortunately, I’m one of those assholes to whom table creation is second nature so I don’t have any book or tutorial suggestions for you…it might be one of things you need to learn by trial and error and tears. Feel free to PM or email me with shit that overcomes you, tho
If you sign up for a free geocities website, one of the tools is an html table maker. It has some simple variables (columns, color, alignment etc) and better yet a preview mode so you can grasp how the code lays things out - it might be intuitive to you, but it turned out to be almost the opposite of how I intially guessed. Therefore it can give you a visual idea of how they basically work, and you can of course copy and paste the table’s code onto another webpage.
I have - through much research, trial, and error - learned a lot about html tables - and I will report back tomorrow, when I am sober, and share with you my knowledge…
I know what you’re going through, and it sucks!!! I’ll talk to you again in 12+ hours…
Zipper, that web developer add-on is exactly what I need. I do end up putting borders on and coloring cells a lot to see what’s going on, and it’s a great help to be able to just flip that stuff on and off.
I do always eventually get my stuff to go where I want it to go, and maybe I’m just making assumptions that there’s a better, easier way. It just seems like there’s always that one image, or textbox, or whatever that is misplaced that I eventually figure out it’s because of an inherited attribute 10 levels up. Maybe there is no faster way to figure it out.
Man, I hate HTML. I can write an Enteprise-level multithreaded multiplatform database driven backend with less cursing and angst than I can put ten images in a table with a menu and a button.
I don’t know if it’s universally true, but in my experience you can either be a technological Web programming whiz, a fantastic graphic designer or really great at raw HTML. Lots of people are great graphic designers with ho-hum HTML skills, or great at the tech stuff with ho-hum HTML skills. Or like me and great at HTML but ho-hum with tech and design. I’ve never seen anyone that’s great at tech and design. Raw HTML is like a “middle ground.”
My company was actually founded on this idea - there were 3 of us who started it, one superior at the technical end, one graphic designer and me to put it together with raw HTML. The designer has since split (not enough work for him) and the tech guy has gotten better at HTML and me better at the tech stuff. But we’re both clearly not at the same level in our respective “fields.”
So don’t feel bad if you’re not an HTML whiz. It’s too much to ask to be the shit at everything. You will get better the more you’re forced to use it, though. Out of necessity.
Oh another tip for you…you probably always do this already but do make sure you indent your code so you can see tables easier.
Not like this:
<table>
<tr>
<td>
</td>
</tr>
</table>
Like this:
<table>
<tr>
<td>
</td>
</tr>
</table>
One of the biggest problems my partner had with HTML was forgetting to close table tags. This is especially dangerous when writing dynamic code to write tables out, because if you forget it once you have forgotten it “loop” times
Firefox’s View Source actually turns table tags red when they’re not “matched” so be sure to pay attention to that.
Oh, and always specify your cellspace, cellpadding and border. If you don’t, IE at least (not sure about FF) gives you a default size and then you’re left wondering why there’s all that extra space.
Yeah, I’ve learned that one the hard way. That was the source of a lot of swearing one night
I mostly use Visual Studio, which is very helpful with pointing out unclosed tags and such.
After some review, I think a lot of my problems are caused simply by having a very unorganized codebase that I’ve inherited. I won’t go into all the details, but basically I’ve been working on a project where the HTML is generated with XSLT, which is a pain in itself, and there’s some settings in style sheets, some are in in “master pages” that get inserted when the XSLT does it’s stuff, some are in HTML in the file I’m working with, and some styles are actually HTML code that’s generated by .cs files behind the scenes. It’s a complex setup to begin with, and through the history of the project there’s been different people working on it and they all do things different.
What a pain… but then again, that’s why I have a job, I can mostly manage to get it to do what I want.
And I agree with your assessment of skills… I’m solidly OK to bad on graphical design, great at raw coding (if I say so myself :-), and pretty good with HTML. But I despise HTML and screen design (heck, I hated doing GUI programming even in the pre-web days where the tools were a lot better) and usually try to find myself projects where there’s not a lot of that involved. Unfortunately in today’s Web World, those projects aren’t nearly as common as they used to be.
Funny. I think websites with a lot of art are a pain in the ass.
You are always going to be muddling to do this, because you are trying to do something that HTML was not designed to do.
HTML was designed as a way to pass along information; not
to make pretty pictures that look the same on every screen.
How are you going to make this work on my 34" dual monitor setup, and on my brothers 9" ASUS laptop, and my sisters web-enabled cellphone with the 2.5" screen? Almost impossible.
Tell those ### graphic artists that the world does NOT revolve around them and their creations, and that they have to learn to deal with it.
It’s not the graphic artists so much as the clients. You can spend weeks discussing with a client how to better form their design so it doesn’t leave out portions of their possible audience, and then something pretty comes along from their marketing department that breaks all the rules you set forth and you spend more weeks telling them that doing this or that as prescribed by the design is going to rule out these sorts of browsers/machines and they shake their heads and stomp their feet and hold their breath until you smile and say “ok we’ll make it work the best we can” and silently add “and you can pay us to fix it in the future.”
It’s utterly amazing how much companies will pay for you to make them a horrible Web site, just because some mucky muck knows what he likes to see on the interwebs.
I’m going to step in and agree with Friedo up top. Skip table layouts… they’re a nightmare because, guess what, tables in HTML are made for tabular data, NOT layout. So of course its going to be tricky to make it work… it’s not SUPPOSED to work.
Using ZipperJJ’s method of transparent GIFs is antiquated and extremely ugly and clunky solution to a problem that has a very simple and graceful solution: CSS. This is what CSS was made for.
Good graphic artists design around HTML’s limitations (which, granted, are many), but even without graphic artist’s help you can take a Photoshop image and skin a properly coded website. Check out csszengarden for examples on the flexibility and grace of CSS.
Learning it is a pain with a major learning curve, sure, when when you learn it you will look at table-based layouts with the same disdain I have for them.
Ditto on the suggestions to pick up a smattering of css knowledge for layout.
The big payoff for that will happen you have to go back and make any kind of layout change to your page after the fact. Altering table layouts is the biggest PITA imaginable; altering css layouts, if they’re commented at least half-way decently, is heaven in comparison.
I’ll keep the CSS info in mind for the next time I get to make a new project from scratch. Unfortunately, there’s no way in hell I’m going to get the time to redo the huge website that is such a mess that I need to maintain. For what it’s worth, we do use css in some places. But we use HTML tags in other places, and we use a mix of both in most places. Like I said, I’m realizing as I write this thread that it’s not HTML and table layouts that is causing me so much problems; it’s the complete lack of organization and standards in the project I’m working on that’s so tricky. Unfortunately I don’t see that changing; the powers that be don’t see the worth in spending the time and money to fix it.
Like ZipperJJ said, the clients are the killers. Back when I used to work on non-Web based software in a real software company, there was no way in hell we’d release anything unless it had been working flawlessly in our test lab for a minimum of 30 days. Nowadays, most web pages are not run like software projects - they’re controlled by marketing people who simply do not understand how software projects should work and why it’s not a good idea to slap on fixes without testing.
Just last week I applied a major bug fix to a very low level function on my major client’s website. Basically, anytime anyone wanted to buy something from this website, they were going to hit this function. I did the unit test myself, and then passed it on to the client for user acceptance testing, with the caveat that this was a high risk change and my recommendation that they run through a whole suite of tests before releasing it to their live servers.
They tested for maybe 30 minutes and released it.
And that’s why so much software sucks nowadays. Most companies just want to check the box that says their website does function X. They don’t care if it works or not, as long as they can check that box.
