I'm from the old school way of making websites using tables. I'm trying to show an icon and then right underneath the icon show a title. Similar to how it is on your desktop. I'm pulling the data out of a database, so I have no idea how many items there will be.
Normally I would use tables for this, however, people are always telling me I should learn to use just
css, so i'm trying. I was able to use a span element to simply show the icon and it worked great, but I can't figure out where to look to try and get the title to align nicely underneath. I'll show you my "table way".
- Code: Select all
<table>
<tr>
<td>
<table>
<tr>
<td><img src='image1.gif'></td>
</tr>
<tr>
<td>Title1</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img src='image2.gif'></td>
</tr>
<tr>
<td>Title2</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img src='image3.gif'></td>
</tr>
<tr>
<td>Title3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><img src='image4.gif'></td>
</tr>
<tr>
<td>Title4</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img src='image5.gif'></td>
</tr>
<tr>
<td>Title5</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img src='image6.gif'></td>
</tr>
<tr>
<td>Title6</td>
</tr>
</table>
</td>
</tr>
</table>
i would really appreciate a good
css explanation on how to accomplish this.
Thank you