The simplest method to display playing cards on a web page would be using individual images. But to include all cards in a standard deck, you'd need 52 separate images. That's quite a bit to ask a user to download.

You might instead try reducing this to a few common graphics, sliced and diced into tables. But this approach is not as easy as it might sound. The different patterns on each card don't always fit into a nice, even grid.

Instead, the method here uses the positioning features of CSS and a few standard HTML tags and character entities to create realistic looking cards with a minimum number of images and HTML tags. A few graphics are still required (for face cards) but far fewer than the other methods. As you'll see, using CSS also gives you more flexibility.