mimic table rows

flann · #1 Apr 12th, 2007, 16:12

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

karinne · #2 Apr 12th, 2007, 16:50

Well ... the simplest way would be

HTML

Code: Select all

<div class="icons">
    <img src="image.jpg" width="" height="" alt="" /><br />
    Title1
</div>

CSS

Code: Select all

.icons {
   text-align: center;
   float: left;
   width: 200px;
   height: 200px;
}

Something like this ... haven't tested but that should be close enough with a few modifications like the width and height for the class. You might want to change those.

flann · #3 Apr 12th, 2007, 17:05

wouldn't it break after each div? Or is that what the float:left is eliminating?

karinne · #4 Apr 12th, 2007, 17:06

You got it

Ryan Fait · #5 Apr 13th, 2007, 23:24

Just a note, if you want only three items per line, you can add an extra class to every third <div> so it will wrap without a container.

Code: Select all

<div class="icon">
    <img src="image1.gif" />
    Title
</div>
<div class="icon">
    <img src="image2.gif" />
    Title
</div>
<div class="icon clear">
    <img src="image3.gif" />
    Title
</div>

Code: Select all

.icon {
    width: 100px;
    text-align: center;
    float: left;
}
.clear {
    clear: left;
}

Lchad · #6 Apr 13th, 2007, 23:30

That's a good tip. Had not thought of that!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Placing pictures in rows	casho	Website Planning	9	Nov 29th, 2007 17:46
Columns and Rows	tlo5	JavaScript Forum	4	Nov 20th, 2007 16:13
mimic iframe	c010depunkk	Web Page Design	7	Aug 1st, 2007 06:30
IE Fast rows insertion.	ronen	JavaScript Forum	1	Mar 21st, 2007 22:51
Customizing table rows	AdRock	Web Page Design	2	Aug 28th, 2006 09:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
mimic table rows