Tables are extremely useful in HTML (Hypertext Markup Language), and you can easily add a background image to a table to make it more appealing. Choose your image carefully, though, keeping color and size in mind.
You may add a background image to an entire table, a particular row, or an individual cell if you prefer, but most folks stick with one image throughout the table for a more cohesive look. The image should allow the text to be as legible as possible. A very light image with black or dark text is best, as is a dark image for light or white text. Choosing background and text colors that are similar will frustrate your visitors, and they will likely go elsewhere to avoid the eyestrain.
Choose an Image
In the HTML world, the term “image” may mean either a picture or an abstract pattern. If you want a more uniform look to your table, a repeated background pattern or texture is the way to go, but if your heart is set on a particular picture, you may use that. Just be aware that numerous tile patterns are available all over the Internet, and are made for this very purpose – to create a pleasing, continuous background design.
An excellent site that specializes in background patterns and textures is Eos Development. They feature whole collections of designs based on single ideas, plus they offer borders, bullets, buttons, and other web-friendly art.
The image can be appropriate to your subject if you so desire, but above all, your text must remain legible. No matter how proud you are of your background image, that’s all it is – a background image.
Image Size vs. Table Size
Your table and your background image will both anchor to the top-left corner, and the image always appears at its original size. Therefore, if your image is larger than your table (i.e. 600pixel x 500pixel image in a 200pixel x 200pixel table), you’ll only see the top-left portion of the image in your table.
However, if your image is smaller than your table, it will simply repeat, creating a tiled pattern that fills the entire table. While this design option might appeal to you, it’s better to use texture images that are made to tile seamlessly, resulting in one big, clean background. If you decide to use picture images in a repetitive pattern, it could still work, but you invite more of a risk of your viewer focusing on the background seams instead of your table’s contents.
Sample HTML Table
To see a sample table in action, open a basic text editor like NotePad, and type in the following code lines, exactly as written:
|Cell 1||Cell 2||Cell 3|
|Cell 4||Cell 5||Cell 6|
|Cell 7||Cell 8||Cell 9|
Don’t forget to save this file for later reference, using the “.html” extension. Pick a name that you’ll remember, like “SampleTable.html” or something similar.
Reference Your Image File
If you are creating just one page, you can keep your image file in the same folder/directory as your HTML page. This is the best way to keep your HTML code simple.
Example code where image file is in the same folder as your HTML file: