HTML for Dummies, Part 3: Effects with Borders and Padding, and Replacing Tables with Divs


Photography: iowa_spirit_walker

When the CSS revolution came, it was declared: no more tables! Use divs with style!

Well, that’s nice and all, since tables lead so often to nesting tag hell, but few of the revolutionists left behind explicit instructions to normal folks as to how to do this.

Most of us are only concerned with having borders, so we clubbed content over the head with the overkill table because there was no other way. Thankfully, CSS has made our lives easier in this respect. So we’ll cover borders and padding, and how to use them for:

  • Simple quote boxes
  • Image photo edges
  • Images side by side

And of course we’ll also cover the more advanced topic of completely replacing tables with divs.

Contents

Borders and Padding
Recipe: Simple Quote Boxes
Recipe: Image Photo Edges
Recipe: Images Side by Side
Advanced Topic: Replacing Tables

Borders and Padding

<div> is quite fun to play with. As discussed previously, they act as boxes that can contain all sorts of content, from text to images and YouTube embeds. They can be floated to the left or the right, and have other content wrap around them.

Sometimes, you’ll want to distinguish these boxes from the rest of the text by more than just background color, but also by borders (such as I regularly do with my examples). But no discussion about borders can go without talk of padding, for the same reason that no discussion about text-wrapping can go without margins. It’s just ugly to see text jutted up against other objects.

border: my favorite way to declare them is by this single command, since you almost always need three things: thickness, style (like solid versus dotted), and color. You can specify all three at once this way.

The most common styles include: solid (bar none), dotted, dashed, and groove. More values are here at this handy CSS reference site.

padding: like margin, you can also declare padding around all sides this way, from the top and clockwise-round.

Often you’ll want padding (or margins) to have the same size, so you can just declare one number here.

Here’s a typical example box I use:

“Another time, Lizzy,” said her mother, “I would not dance with him, if I were you.”

“I believe, ma’am, I may safely promise you never to dance with him.”

And here’s the code for it:

<div style="border:1px solid gray;margin:1ex;padding:1ex;">
"Another time, Lizzy," said her mother, "I would not dance with <i>him</i>, if I were you."

"I believe, ma'am, I may safely promise you <i>never</i> to dance with him."
</div>

ex is simply the height of an x character in the current font. It’s a handy shortcut, when you’re lazy and don’t need a very exact width/length/thickness, and often looks decent.

back to contents

Simple Quote Boxes

Here’s a short little recipe that also demonstrates border-left (there’s also border-top et al). You often see quotes on web pages or mail clients denoted by a bar at the left, of varying thicknesses.

It looks like this:

“But if a woman is partial to a man, and does not endeavour to conceal it, he must find it out.”

Here’s the code:

<blockquote style="border-left:4px solid orange;padding-left:1ex;">
"But if a woman is partial to a man, and does not endeavour to conceal it, he must find it out."
</blockquote>

Here’s a slightly more fancier style, which I created while using the best HTML color reference in the world:

“Mr. Darcy is all politeness,” said Elizabeth, smiling.

“He is, indeed; but, considering the inducement, my dear Miss Eliza, we cannot wonder at his complaisance–for who would object to such a partner?”

<blockquote style="border:1px dotted orange;border-left:4px solid orange;background-color:#FFFFBF;">
"Mr. Darcy is all politeness," said Elizabeth, smiling.

"He is, indeed; but, considering the inducement, my dear Miss Eliza, we cannot wonder at his complaisance--for who would object to such a partner?"
</blockquote>

Notice that the second border-left overrides the first border, because it comes second. That’s like painting a wall pink, and then painting it over again with blue; CSS attributes are evaluated top to bottom, left to right.

back to contents

Image Photo Edges

Often images by themselves look plain without a border of some kind. Like <div>, an <img> can be given a border using the same style attributes, and even padding.

However, you may want something fancier than simple border: 1px solid black;. How about a little border that looks like a white photo edge?

Here’s the code (without the centering; just the image):

<img style="border:1px solid gray;background-color:white;padding:3px;" src="http://spontaneousderivation.files.wordpress.com/2008/03/2005_pride_and_prejudice_030.jpg" />

Yup, the edge is produced by background-color, which goes behind the image and can only be seen when you additionally use padding. Weird world, eh?

back to contents

Images Side by Side

Suppose you have two images you want to show side by side, set off by themselves.

Photography: lav.val and fictures

Here’s the code, which works for two images 180px wide and assumes you have a blog text area that’s wide enough to hole them both, plus a little more space for margins:

<div style="width:400px;text-align:center;font-style:italic;font-size:.75em;line-height:1.2em;margin:auto;padding:0;">
<img style="float:left;margin:5px;" src="http://farm2.static.flickr.com/1300/1047631314_78d7ff6967_m.jpg" width="180" /><img style="float:left;margin:5px;" src="http://farm1.static.flickr.com/3/4596895_52a0f3546d_m.jpg" width="180" />
</div>
<div style="width:100%;text-align:center;clear:both;font-size:.75em;font-style:italic;">
Photography: <a href="http://flickr.com/photos/valzpicz/archives/date-posted/2007/08/07/">lav.val</a> and <a href="http://flickr.com/photos/fictures/archives/date-posted/2005/02/10/">fictures</a>
</div>

Important note: if you don’t want a caption, you’ll still need to have that last div (just delete the content in it, or replace it with <div style="width:100%;clear:both;"></div>). The second div is necessary so that the text or other content coming afterwards doesn’t just up against the side-by-sides. Crazy but true.

Here’s how to calculate how wide the outer div needs to be, given a margin of 5 pixels around each image:

width-of-image-1 + width-of-image-2 + 20

Very simple.

The next part, replacing tables with divs, is not so simple. You may want to stop here or jump down to the comments.

back to contents

Replacing Tables

Arguably the pièce de résistance of this article. Not exactly something for the weak of heart, however. I only bothered to learn this bit because I needed to work with blog layouts (which is easier with divs than with tables) and figure out how to lay images side by side for my blather about my new Christmas tree… which I haven’t taken down yet….

Here is a brief set of requirements you’ll need, so that you can do some playing of your own after the recipes:

  • You will always need width to get divs to arrange themselves into rows.
  • If you don’t have just a single image, you will need height, because otherwise floating divs don’t get a height, and your div content will overspill. Always ugly.
  • And even if you do just have a single image, you may still need to specify height to get things “just right”.
  • You probably will always want either padding or margin to separate the divs from each other, often both.
  • When calculating width and height, account for padding/margin/borders of your inner and outer divs.

On with the motley.

Here’s a simple recipe for a table with four cells, stacked 2 by 2.

tetris
shamrocks
google
misc
<div style="width:164px;height:164px;margin:auto;padding:0;">

<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="tetris" src="http://farm1.static.flickr.com/58/166940675_2a265dc8d5_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="shamrocks" src="http://farm1.static.flickr.com/49/113563800_d930764e54_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="google" src="http://farm1.static.flickr.com/6/8182590_98f030bc01_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="misc" src="http://farm1.static.flickr.com/18/88048432_10e8d819d7_s.jpg" style="border:0;margin:0;padding:0;" />
</div>

</div>
<div style="width:100%;clear:both;"></div>

(The margin: auto centered the outer div.)

But wait! It’s quite easy to obtain the divs all in a row, or all in a column. Just change the width and height of your outer div.

An outer div that starts with <div style=”width:324px;height:81px;margin:auto;”>:

tetris
shamrocks
google
misc

An outer div that starts with <div style=”width:81px;height:324px;margin:auto;”>:

tetris
shamrocks
google
misc

You can probably start to see how I created the stack of book images in Writing on the Stage that’s floating to the right (leave off the <div style="width:100%;clear:both;"></div> and add margins and a float to the outer div).

And you can probably also see how you can start playing with widths, to produce tables with a wide cell on top, and multiple small ones below.

misfortune
tetris
shamrocks
google
<div style="width:246px;height:208px;text-align:center;margin:auto;">

<div style="float:left;width:240px;height:121px;border:1px solid black;margin:2px;padding:0;">
<img alt="misfortune" src="http://farm1.static.flickr.com/42/110381788_5eafbb4d9c_m.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="tetris" src="http://farm1.static.flickr.com/58/166940675_2a265dc8d5_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="shamrocks" src="http://farm1.static.flickr.com/49/113563800_d930764e54_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="google" src="http://farm1.static.flickr.com/6/8182590_98f030bc01_s.jpg" style="border:0;margin:0;padding:0;" />
</div>

</div>
<div style="width:100%;clear:both;"></div>

All that height/width stuff is annoying, isn’t it? Sometimes you can get away without it, but usually only for images—and you can usually never get away from the height of the outer div.

Calculating the width or height is more or less:

outer-div-padding * 2 + outer-div-border-width * 2
  + inner-div-padding * (number-of-divs-in-row + 2)
  + inner-div-margin * (number-of-divs-in-row + 2)
  + inner-div-border-width * (number-of-divs-in-row * 2)

When to use divs and when to use tables

Use divs when you have very few cells of content, or a requirement for floating flexibility. This is why divs-for-tables is primarily used for website layouts or for placing a couple boxes of content next to each other.

Otherwise, just use tables. Sometimes stuff is just tabular, you know?

back to contents

The Floor is Open

For questions, concerns, complaints, love, tomatoes, etc.

By the way, I think Pride and Prejudice is the only romance I’ve ever liked. And now… I need to go buy a paper copy to read in bed, because I am Kindle-less.

Additional photo credits:

You have all made me very hungry for things that are bad to my teeth.

20 thoughts on “HTML for Dummies, Part 3: Effects with Borders and Padding, and Replacing Tables with Divs

  1. Hi Arachne, this is a great, useful and well written post and I’m blown away that no-one’s commented on it yet.

    Love the fancy quote box! I hadn’t taken time to work out a simple recipe yet and you’ve given me a great one for the interim.

    And that HTML color ref is outstanding.

    Maybe you’ve seen these already, but I’ve found these cheat sheet resources useful.

    http://www.scottklarr.com/topic/94/html-and-xhtml-cheat-sheets/

    http://lorelle.wordpress.com/2005/10/10/html-css-php-and-more-cheat-sheets/

    Look forward to reading more . . .

    thanks!

  2. Hi Zack! Thanks for the comment. :) I figure people are reading (the hits tell me so) but some may have said all they needed to say in part 1, which I don’t mind.

    I’m just glad it’s useful to some.

    And thank you very much for those reference sheet links! I hadn’t seen them yet—they are made of awesome!

  3. Thanks, Ben!

    Part 4 (whenever I have time to write it; it’s gonna be a completely NUTSO couple of weeks) will be fun.

  4. Hello whee, I think I edited your first comment to what you meant.

    As for “<i>” versus “<em>”—most people don’t really care. I don’t, either. Being pedantic isn’t really the point of the HTML for Dummies series.

    By the way—I’m aware of why, technically, we should be using <em>. I just stopped caring a long time ago.

  5. Hi Tatiana,

    I’d have to say this is another area where IE7 has decided not to be standards-compliant, which drives me to despair.

    I’ll figure something out. Or there’s probably a solution out there on the web already, and I haven’t stumbled across it yet.

  6. It is nice to see some comprehensive information on how to line up the pictures. I have trouble often with the default content on my website template, so being able to put in my own images allows me to not have to talk to my website host so much. I think they are getting tired of hearing from me :P .

  7. Achei Bom, porem tem que deixar claro para os “Dummies” que tabela foi feita para exibir dados tabulares, se nao vai virar uma div-mania em grande escala, neste caso é aceitavel por serem imagens, uma especie de galeria. Mas ainda sim um artigo legal :o)

  8. The first example is missing a after the first paragraph to ensure a line break.

    “Another time, Lizzy,” said her mother, “I would not dance with him, if I were you.”

    “I believe, ma’am, I may safely promise you never to dance with him.”

    Should be

    “Another time, Lizzy,” said her mother, “I would not dance with him, if I were you.”
    “I believe, ma’am, I may safely promise you never to dance with him.”

    but the examples are really good and nice and easy to follow.

  9. Hi

    I enjoyed your article, I picked up a few nice tips from it, thanks !

    I have a question though. I am often reading that we should use CSS and not tables, however looking at your example, and the html of a table, the CSS looks harder to use and manage…!

    What are the advantages of using CSS over an html table ?

  10. Hello Daniel,

    The CSS is only hard to use/manage if you’re trying to replicate tabular data (think a spreadsheet) versus layout (think three columns versus two columns).

    The CSS way is much easier in the latter situation, harder in the previous situation.

    The table way is much harder in the latter situation, but easier in the previous situation.

    Really, it comes down to a specific situation. I actually still use div/css when I’m doing two columns of data, actually, because it’s more flexible; and there’s more you can do with stylesheets to make life easier in any case—for instance, using CSS classes, so you only specify size for a kind of cell just once.

    I suggest picking up a full-out CSS tutorial somewhere. I’ve no recommendations in particular, I picked mine up from a book around CSS 1, and now it’s CSS 2 and I’ve simply updated bit by bit over the years.

  11. Hi just find your site and there is a lot of good information that I need. I am trying to design a page layout using DIVS to have photographs line up side by side about 6 -8 across and 6 to 8 rows down. I want to be able to add a shopping cart button to each of the images is that possible using DIVS if so what would be a good baseline dimensions to use. To do this would I need to have many sets of divs (1) for the main holder of the group of images (2) Many sets of divs inside the main holder for the images I’m using. (3) individual divs to hold the add to car buttons. How hard would is that to do and is it possible.

  12. BMoyer,

    I don’t know off the top of my head, and I’m not a consultant. You’re going to have to play around with this and figure it out.

  13. Great article but can you tell me how create a margin around a table? Can a Div tag be used to create the margin. I tried using hspace and vspace to define the table but it isn’t working.

    Learned something new here. Hope you have an answer to my question. Thanks!

Comments are closed.