Table + Images

Get Started
1

I’ve added 3 pictures to my index page with a table.
I’d like to make the pictures a link + add a caption to each photo underneath.
How to i do that.
Thanks,
Barry

<table border=“1”>
<tr>
<td><img src=“indeximages/gor.jpg” alt=“arial view of the great ocean road”/></td>
<td><img src=“indeximages/pp.jpg” alt=“penguin walking up beach evening time”/></td>
<td><img src=“indeximages/yv.jpg” alt=“two ladies admiring vines in a vineyard yarra valley” /></td>
</tr>

</table>

2

Tables are really meant for tabular data, so you’d be better off using an unordered list for this. E.g.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
  body, ul, li {margin: 0; padding: 0;}
  ul {list-style: none; overflow: hidden;}
  li {float: left;}
  li img, li span {display: block; text-align: center;}
  li span {martin-top: 5px;}
</style>
	
</head>
<body>

<ul>
	<li>
		<a href=""></a><img src="indeximages/gor.jpg" alt="arial view of the great ocean road"></a>
		<span>Subtitle</span>
	</li>
	<li>
		<a href=""><img src="indeximages/pp.jpg" alt="penguin walking up beach evening time"></a>
		<span>Subtitle</span>
	</li>
	<li>
		<a href=""><img src="indeximages/yv.jpg" alt="two ladies admiring vines in a vineyard yarra valley">
	</a>
		<span>Subtitle</span>
	</li>
</ul>

</body>
</html>
3

Thanks for that,
I would like it go accross the page, it is going down.
Is it possible to get it accross without a table?
The book warns against tables i know.
Thanks,
Barry

4

The code I gave above goes across the page. Copy that code into a new .html file, run it in your browser, and you will see. If you want help to adapt this to your page, you’ll need to show us its context.