Advanced Search

View RSS Feed

Nile

Alternative to tables, divs!

Rate this Entry
Quote Originally Posted by Nile View Post
Here's the code I came up with:
HTML Code:
<style type="text/css">
  div.advertise {
  }
  div.advertise div.row {
    clear: both;
	margin: 1px;
	padding: 1px;
	min-height: 45px;
  }
  div.advertise div.row div.ad {
    border: 1px solid #D8D6CF;
	margin: 2px;
	padding: 2px 0px 0px 0px;
	width: 117px;
	height: 45px;
	text-align: center;
	float: left;
  }
  div.advertise div.row div.ad span.text {
    color: #494949;
	font-family: arial;
	font-size: 11px;
  }
</style>
<div class="advertise">
  <div class="row">
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
  </div>
  <div class="row">
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
  </div>
  <div class="row">
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
    <div class="ad">
	  <img src="ad.png" class="image"/><br />
	  <span class="text">17 April 09 - 15 April </span>
	</div>
  </div>
</div>
Just today I made some markup that acts like a table, except it uses divs! Have fun.

Submit "Alternative to tables, divs!" to del.icio.us Submit "Alternative to tables, divs!" to StumbleUpon Submit "Alternative to tables, divs!" to Google Submit "Alternative to tables, divs!" to Digg

Updated 04-28-2009 at 10:13 PM by ddadmin

Tags: css, divs, html, tables Add / Edit Tags
Categories
CSS related

Comments

  1. molendijk's Avatar
    Doesn't work with me. Can you give me a concrete example?
    ===
    Arie.
  2. Nile's Avatar
    Sure: http://unlinkthis.net/examples/table-div.html
    I've tested it in IE, Opera, Chrome, Safari, and FF.
  3. molendijk's Avatar
    Thanks. Very nice.
    ===
    Arie
  4. jscheuer1's Avatar
    Not that this is necessarily what is happening here, but it is pointless to mimic a table for tabular data. That's what tables are for.
  5. Nile's Avatar
    Well, he was using divs before. So decided to use divs.
  6. Medyman's Avatar
    If you're going to do this, might as well use CSS-tables. The sample code would probably be more semantic as an unordered list.
  7. Nile's Avatar
    Again, I was making it for people, and why keep the idea suppressed?
  8. Schmoopy's Avatar
    Looks good Nile, divs > tables (For layout anyway).