Hacker News Reader

Comment by consp | Hacker News Reader

> Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells...

Wasn't an image with a click <map> easier? I wasn't old enough to write very complicated html pages so my experience is lacking here.

View on HN

But a single image does not stretch the correct way, when you have a bigger button to make. Like:

    left-top corner: no stretch
    left: stretch vertically
    top: stretch horizontally
    ...

and so on.

I still remember learning to make the layout of a whole page as a table layout in school, with images in table cells for drawing nice borders around sections of the website. And we did that with GIMP!

> Wasn't an image with a click <map> easier

it's solving a different problem

it's referring to using a 9-cell table to make an element where the corner sizes stay static, while the middle column and middle row stretch horizontally and vertically respectively to match the size of the central cell (which e.g. has variable length text)

then with background image tiling in the left/right and top/bottom middle cells you can get an effect like a drop-shadowed panel that sizes responsively

you'd probably set the flexible cells to width=100% and then have a 1-pixel gif in the edge cells to enforce the desired min-width

I was sad the article didn't mention anything about the 216-colour "web safe" palette, but perhaps the author wasn't old enough to remember having to support users with < 24-bit colour displays... or when 1024x768 took over from 640x480 as the min screen size, allowing use of fixed-width layouts >600 pixels (the max possible: 640, minus browser default page margin, minus scroll bar)...

Depends. I'm the dialup days,. Cutting up an image and having it in a table could let you optimize each fragment as a gif with more limited pallet. So it would look better and be smaller. Especially with rollover image replacement.

I kind of wish that attention to detail for payload size was more common today.

Some websites did do this. But adding actual text that can be indexed by Ask Jeeves doesn't work with this solution.

Macromedia had this crazy system where you could slice your art up in Fireworks, and then ask it to generate the HTML and Javascript, then you could fine-tune it in Dreamweaver.

It was a mess.

From vague memory, images of buttons were indeed used, but tables or other tricks were necessary to dynamically adjust container size to its contents, e.g., for internationalization.

You could make a fantastic looking website with use of imagemaps and judicious use of hover image replacement. Glowing buttons, drop shadows, you name it.

Reply on news.ycombinator.com