• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Captioning an image in HTML?

Bard09

Member
I've started to re-learn HTML after first screwing around with it five years ago... I was wondering, are there any specific commands that you can use to caption an image? Most of the sites I've looked at so far have used tables, which I am putting off for a while for the site I'm making. I have an image, align="right", on my page that I'd like to put a caption under. How do you do it? Is it possible without tables? Thanks.

-Bard09
 
(all <'s are {'s and all >'s are }'s, otherwise the forum will muck it up)

there is nothing specific to image captions. tables are the old way of doing things, and although they shouldnt be used for layout (they are for tabular DATA, say, a chart of numbers or whatnot.), they are still WIDELY used (they used to be the only way to do it). today in the age of XHTML, CSS, and standards-compliant browsers, we use CSS for layout. with the css box model, you use {div} tags to organize things, and CSS to lay it out. you could create a {div} with the {img} tag, then a {p}tag with the caption inside{/p}, and move the {div} around with (of course 😉) CSS.

and although it pains me greatly, i'll show you how to do it with a table too. tables are very simple. you have the {table} tag, and inside of it, {tr}'s which correspond to table rows, and inside of those, {th} tags (headers) and {td} tags (table data, entries basically, and what you generally use when you use tables for layout). its just lining things up with rows and columns. so lets make a table with a row with an image, and then a row with a caption underneath.

{table border="0"}
{tr}{td}{img src="foofoo.bar"}{/td}{/tr}
{tr}{td}hello this is some text{/td}{/tr}
{/table}

now thats alot of html. with some *proper* (X)HTML and CSS, it would be much cleaner. example:

{div class="foo"}
{img src="foofoo.bar" /}
{p}some text here{/p}
{/div}

and then in your style sheet you would add whatever formatting necessary to div.foo to make it line up on the right or whatever you want.

also a *great* place to learn (or refresh yourself on) anything web-related is w3schools.org. they have tutorials for html, css, xhtml, etc etc etc. also this tutorial was how i first learned CSS, its definitely worth reading.
 
Back
Top