Trying to create a "table" with CSS, <div> and <span>

HTML & CSS
1

Ok, here is what I am trying to do, basically:

http://iwearyourshirt.com/about-us

Here is my site:

http://billboardfamily.com/?page_id=2

I have done somethign similar to their site with <div>, and <span> tags, and some css, but I am not getting the same layout. I do have an additional “column”, which can be displayed BELOW the top 2. Any help on this would be great, my brain is very tired…lol.

about_us.php

<?php
/*
Template Name: About Us
*/
?>


<?php include("header.php"); ?>
<?php include ('sidebar_aboutus.php'); ?>



<div class="table" style="background: url(&quot;<?php bloginfo('template_url'); ?>/assets/images/map.png&quot;) no-repeat scroll 0% 0% transparent; padding-top: 390px;">

<div class="config" style="margin-right: 10px;">
<h3 class="h3">Carl Martin</h3>

<div class="about">
<div class="row"><span class="row-head">Height:</span> 				<span class="rowinfo">6'0</span></div>
<div class="row"><span class="row-head">Weight:</span> 				<span class="rowinfo">250lbs</span></div>
<div class="row"><span class="row-head">Middle Name:</span> 			<span class="rowinfo">Eugene</span></div>
<div class="row"><span class="row-head">Age:</span> 				<span class="rowinfo">32</span></div>
<div class="row"><span class="row-head">Eye Color:</span> 			<span class="rowinfo">Brown</span></div>

<div class="row"><span class="row-head">Favorite Website:</span> 		<span class="rowinfo"><a href="http://www.apple.com" target="_blank">Apple</a></span></div>
<div class="row"><span class="row-head">Favorite Activity:</span> 		<span class="rowinfo">Driving</span></div>
<div class="row"><span class="row-head">Favorite Color:</span> 			<span class="rowinfo">Red</span></div>

<div class="row"><span class="row-head">Shirt Size:</span> 			<span class="rowinfo">3XL</span></div>
<div class="row"><span class="row-head">Shoe Size:</span> 			<span class="rowinfo">10</span></div>
<div class="row"><span class="row-head">First Car:</span> 			<span class="rowinfo">BMW 325ic</span></div>
<div class="row"><span class="row-head">Dream Job:</span> 			<span class="rowinfo">Professional T-Shirt Wearer</span></div>

<div class="clear">&nbsp;</div>

</div>
<p><b>Carl Martin</b> has always been interested in three thing: cars, comupters, and business. Now he has combined two of the three to create The Billboard Family. He holds a B.S. in Computer Science, with an emphysis on Application Development, a degree in Automotive Technology and Repair from UTI/Hot Rod U, and is the former owner of Martin Metals, LLC, a successful metal recycling company. The idea to wear t-shirts for a living was inspired by his desire to make a respectable living, and spend the maximum amount of time possible with his family.</p>
<p>Carl's future plans include adding more children to his family, bringing his other business ideas to life, and owning a vacation home in Alaska.</p>
</div>

<div class="config" style="margin-right: 10px;">
<h3 class="h3" style="visibility: visible;">Amy Martin</h3>

<div class="about">
<div class="row"><span class="row-head">Height:</span> 				<span class="rowinfo">5'3</span></div>
<div class="row"><span class="row-head">Weight:</span> 				<span class="rowinfo">She Is Pregnant!</span></div>
<div class="row"><span class="row-head">Middle Name:</span> 			<span class="rowinfo">Lynn</span></div>
<div class="row"><span class="row-head">Age:</span> 				<span class="rowinfo">26</span></div>
<div class="row"><span class="row-head">Eye Color:</span> 			<span class="rowinfo">Blue</span></div>

<div class="row"><span class="row-head">Favorite Website:</span> 		<span class="rowinfo"><a href="http://www.babiesrus.com" target="_blank">Babies R Us</a></span></div>
<div class="row"><span class="row-head">Favorite Activity:</span> 		<span class="rowinfo">Spending Time With Her Family</span></div>
<div class="row"><span class="row-head">Favorite Color</span> 			<span class="rowinfo">Blue</span></div>

<div class="row"><span class="row-head">Shirt Size:</span> 			<span class="rowinfo">XL</span></div>
<div class="row"><span class="row-head">Shoe Size:</span> 			<span class="rowinfo">5 &amp; 1/2</span></div>
<div class="row"><span class="row-head">First Car:</span> 			<span class="rowinfo">Never Had A Driver's License</span></div>
<div class="row"><span class="row-head">Dream Job:</span> 			<span class="rowinfo">Day Care Owner</span></div>

<div class="clear">&nbsp;</div>

</div>
<p><b>Amy Martin</b> always wanted to have a great husband, wonderful children, and an amazing life. Now she does! She is the mother of two young children: Layne, 4 &amp; Kaitlyn, 3, and is expecting child number three sometime in December. She can't wait! The idea of wearing t-shirts for a living, and spreading the word about companies and products she uses and believes in, is something she is very passionate about. She is looking forward to trying new products for her family, and telling the world about them.</p>

<p>Amy's future plans include adding more children to her family, owning a day care, and spending time with her family at her vacation home in Alaska.</p>
</div>

<div class="config" style="margin-right: 10px;">
<h3 class="h3" style="visibility: visible;">The Children</h3>

<div class="about">
<div class="row"><span class="row-head">Names:</span> 				<span class="rowinfo">Layne, Kaitlyn &amp; One On the Way </span></div>
<div class="row"><span class="row-head">Height:</span> 				<span class="rowinfo">36" &amp;25"</span></div>
<div class="row"><span class="row-head">Weight:</span> 				<span class="rowinfo">45lbs &amp; 35lbs</span></div>
<div class="row"><span class="row-head">Age:</span> 				<span class="rowinfo">4 &amp; 3</span></div>
<div class="row"><span class="row-head">Eye Color:</span> 			<span class="rowinfo">Blue &amp; Blue</span></div>

<div class="row"><span class="row-head">Favorite Website:</span> 		<span class="rowinfo"><a href="http://www.nickjr.com" target="_blank">Nick Jr.</a> &amp; <a href="http://www.fisherprice.com" target="_blank">Fisher Price</a></span></div>
<div class="row"><span class="row-head">Favorite Activity:</span> 		<span class="rowinfo">Being Artists</span></div>
<div class="row"><span class="row-head">Favorite Color</span> 			<span class="rowinfo">Green &amp; Pink</span></div>

<div class="row"><span class="row-head">Shirt Size:</span> 			<span class="rowinfo">5T &amp; 4T</span></div>
<div class="row"><span class="row-head">Shoe Size:</span> 			<span class="rowinfo">13 &amp; 10</span></div>
<div class="row"><span class="row-head">First Car:</span> 			<span class="rowinfo">Power Wheels</span></div>
<div class="row"><span class="row-head">Dream Vacation:</span> 			<span class="rowinfo">Disney World</span></div>

<div class="clear">&nbsp;</div>

</div>
<p><b>The Children</b> are very energetic, and intelligent. They spend the majority of their day playing, being creative, and surprising their parents with unexpected quotes. Layne prides himself on being able to circumvent any security device on Earth. Kaitlyn is an avid clothes changer, and insect lover. But most of all, they are brother &amp; sister. Layne loves to protect his little sister, Kaitlyn, and Kaitlyn loves to create reasons for Layne to protect her. They are a perfect team!</p>

<p>The Children's future plans include attending a top-notch private school, going on family vacations wearing a new t-shirt every day, and playing with their future brother/sister.</p>
</div>
</div>
<?php get_footer(); ?>

style.css

/** BEGIN About Us Table **/
#table{
	background:#000000;
	width: 500px;
	}
	#table .config {
		margin: 0;
		padding: 5px;
	}
	#table .table h3 {
		font-style: bold;
		color: #00AFEF;
	}
	#table .table about{
		float:left;
		padding-left:1px;
		width:134px;
	}
	#table .table .about row{
		float:left;
		padding:3px 0;
	}
	#table .table .about rowinfo{
		float:left;
		padding:3px 0;
	}
/** END About Us Table **/
2

You can make a table look however you want it to look.

You can set whatever border you want on whatever side of <td>s and <th>s you want. You could have a blue border on the left of <th>s, a red border on the right of <td>s and a dotted border on the top of <td>s and <th>s. You can have extra padding and spacing or you can collapse the borders together. It doesn’t have to be the uniform ridged look that we got used to twelve years ago… :cool:

As others have said, this is a prime example of when you should be thinking about using a <table>, as it is tabular data - but equally, a <dl> is perfectly good for name–value pairs like this.

And another tip - you don’t need to put a class on each and every element! In particular, <h3 class=“h3”> … are there any <h3>s that are not class=“h3”? If not, or if not many of them are, you don’t need that class.

You can use descendent selectors in the CSS, so that if all the <div>s that are within <div class=“about”> have class=“row”, you can get rid of class=“row”, and in the CSS, replace div.row with div.about div.

You can go further and replace
.config with .table div
.about with .table div div
.row with .table div div div
Note - be careful if you go down this road, because anything you define aimed at .table div will also apply to .table div div and so on. In theory you could get around this by using the child selector (ie .table > div), but this isn’t supported by IE.

3

Bad news (but it’s good news!). Chuck everything you’ve written. To be absolutely honest, the way you (and the T-shirt site) are using divs right now, you might as well use a table and get the layout you want. The reasons the standardistas tell folks not to use tables… well, you’re negating almost all those reasons with your div-imitations. (Although yeah, you could get the two groups sitting side-by-side by having each group of key-value pairs in floated boxes…)

I’ll be honest about the site you’re trying to imitate: I don’t think they made terribly good code choices. I would not use divs and spans. I really would either use a table (could that data sit comfortably in an Excel sheet? Sure could!) or a definition list. Only thing holding me back from the definition list really is styling… I’ve had trouble getting underlines and bottom borders lining up nicely like that cross-browser with definition lists.

A definition list is otherwise the more awesome choice, because it represents a list of key-value pairs.

Name: Chris

“Chris” is the “name”.

Height: 5’3

“5’3” is the “height”. The two bits of data have a relationship with each other, semantically. A table or a dl would be able to show that relationship. The T-shirt site is relying on people being sighted and having graphical browsers to show the relationship, but the markup language should be doing that too.

As a definition list:


<h3>Jason Sadler</h3>
<dl>
  <dt>Height: </dt> 
    <dd>6'5</dd>
  <dt>Weight: </dt> 
    <dd>240lbs</dd>
  <dt>Middle Name: </dt> 
    <dd>Neal</dd>
  <dt>Favorite Ice Cream: </dt> 
    <dd>Rocky Road</dd>
  <dt>Favorite Website: </dt> 
    <dd>Google.com</dd>
  <dt>Years Wearing Shirts: </dt> 
    <dd>27ish</dd>
  <dt>Shirt Size: </dt> 
    <dd>X-Large</dd>
  <dt>Favorite Color: </dt> 
    <dd>Periwinkle Blue</dd>
  <dt>Shoe Size: </dt> 
    <dd>15</dd>
  <dt>First Job: </dt> 
    <dd>Produce Boy</dd>
  <dt>Eye Color: </dt> 
    <dd>Blue</dd>
  <dt>Dream Job: </dt> 
    <dd>Lottery Winner</dd>
</dl>

A wrapping div could then also encompass the additional info that’s in paragraphs below.

By default, the dt’s and dd’s will each start a new line (like the dl itself, they are blocks). To get them to line up like in the T-shirt site, you’d float the dt’s and give them a set width that’s at least as wide as the widest dt text. The dd’s can either just hang out afterwards, have an explicit left margin that’s a hair wider than the width of the dt’s, or you can float everyone and have each trailing dt clear: both (while this ensures the dd’s always line up with their dt’s regardless of how long the dt grows, it means telling IE6 and 7 float: none because of a bug they have… and these dt’s don’t look like they ever grow).

As a two-column table, which I’m less in favour of:


(you can either do this:
<h3>Jason Sadler</h3>
<table>
  <caption>Important facts about Jason</caption>
  <thead>....
or this:
<table>
  <caption>Important facts about Jason</caption>
  <colgroup span="2">Jason Sadler</colgroup> )
...

  <thead>
    <tr>
      <th scope="col">Properties</th>
      <th scope="col">Stats</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">Height:</td>
      <td>6'5</td>
    </tr>
    <tr>
      <td scope="row">Weight: </td>
      <td>240lbs</td>
    </tr>
    <tr>
      <td scope="row">Middle Name: </td>
      <td>Neal</td>
    </tr>
    <tr>
      <td scope="row">Favorite Ice Cream: </td>
      <td>Rocky Road</td>
    </tr>
    <tr>
      <td scope="row">Favorite Website: </td>
      <td>Google.com</td>
    </tr>
    <tr>
      <td scope="row">Years Wearing Shirts: </td>
      <td>27ish</td>
    </tr>
    <tr>
      <td scope="row">Shirt Size: </td>
      <td>X-Large</td>
    </tr>
    <tr>
      <td scope="row">Favorite Color: </td>
      <td>Periwinkle Blue</td>
    </tr>
    <tr>
      <td scope="row">Shoe Size: </td>
      <td>15</td>
    </tr>
    <tr>
      <td scope="row">First Job: </td>
      <td>Produce Boy</td>
    </tr>
    <tr>
      <td scope="row">Eye Color: </td>
      <td>Blue</td>
    </tr>
    <tr>
      <td scope="row">Dream Job: </td>
      <td>Lottery Winner</td>
    </tr>
  </tbody>
</table>

Or, the td scope=“row” could also be a th instead, I suppose. Anyway, you see how the table is more code (esp when done correctly). Or, a single table with both guys in it. In general, I suppose I’d use a definition list when it’s just a relationship between two kinds of data, and use a table if it’s more than 2 columns-worth.

Avoid bad inline code as seen on the T-shirt site.
<div class=“config” style=“margin-right: 10px;”>
<h3 class=“h3” style=“visibility: visible;”>

No no no. Visible is default. Saying it inline in the HTML is like old drunks talking to themselves in the park. Nobody listens, just clutters up the universe with bad luck and three-legged cats.

Edit:

Well, looks like the sweet time I took writing all this allowed Ray to ninja good answers in there : )

4

I would be OK with using a DL (definition list) for that since it looks like you just have one answer for each item.
You can also have more than one DD (definition description) with a DT (definition term) but most of the time it will be one.

Something like this might get you pointed in the right direct and clean things up a bit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DL demo</title>
<style type="text/css">
dl {
    margin: 1.25em;
    padding:0;
    width: 50&#37;; /*demo only */
}
dt {
    float: left;
    width:10em;
}
dd {
    margin-left: 0; /* removes the default indent */
    padding-left: 10em; /* makes room for the dt */
    font-weight:bold;
    border-bottom: 1px solid #000;
}

</style>
</head>
<body>

<dl>
    <dt>Height:</dt><dd>6'0</dd>
    <dt>Weight:</dt><dd>250lbs</dd>
    <dt>Middle Name:</dt><dd>Eugene</dd>
    <dt>Age:</dt><dd>32</dd>
    <dt>Eye Color:</dt><dd>Brown</dd>
</dl>

</body>
</html>
5

I see how that would work. thanks. I did figure out how to get it correct with the div tags, though, while waiting for replies to this topic. I just tinkered with it until it looked right. I appreciate all the help, from everyone. thanks.

6

It’s exactly the same … you can set a background-image on the th and td just as you do on the div.

Or, if all you’re after is a dotted border, how about:

th, td {border-bottom:1px dotted #bbb;}
7

I wanted to use the borders (lines under the rows) that I am using on the page now. everyone wanted me to use a table, but I did not know how to do that and get these lines to be part of the table. because of this, I had to stick with the <div> method.

8

Not sure what you’re referring to on that site as “graphical borders”, can you elucidate?

Essentially no, graphical borders are not part of any current CSS spec. There are possible ways round it, by having a background on one element, and then have another element within that having a solid (white?) background and a bit of margin to allow some of the background of the outer element to show around the outside.

That approach can be OK if you have a generically tiled image, but if you’ve got say a series of repeated images, unless you specify the size in px (bad!) you can’t guarantee that the images will line up nicely, and you could end up with them overlapping the edge of the element.

9

can you have graphical borders? That is how it would have to be to duplicate what they have on the www.iwearyourshirt.com borders of the table

10

I’d go with the table, but not with SP’s table since it’s adding unnecessary info, and is missing styling hooks… The elements that should be TH are obvious…


<table class="personInfo">
	<caption>Jason Sadler</caption>
	<tr>
		<th>Height:</th>
		<td>6'5</td>
	</tr><tr>
		<th>Weight:</th>
		<td>240lbs</td>
	</tr><tr>
		<th>Middle Name:</th>
		<td>Neal</td>
	</tr><tr>
		<th>Favorite Ice Cream:</th>
		<td>Rocky Road</td>
	</tr><tr>
		<th>Favorite Website:</th>
		<td>Google.com</td>
	</tr><tr>
		<th>Years Wearing Shirts:</th>
		<td>27ish</td>
	</tr><tr>
		<th>Shirt Size:</th>
		<td>X-Large</td>
	</tr><tr>
		<th>Favorite Color:</th>
		<td>Periwinkle Blue</td>
	</tr><tr>
		<th>Shoe Size:</th>
		<td>15</td>
	</tr><tr>
		<th>First Job:</th>
		<td>Produce Boy</td>
	</tr><tr>
		<th>Eye Color:</th>
		<td>Blue</td>
	</tr><tr>
		<th>Dream Job:</th>
		<td>Lottery Winner</td>
	</tr>
</table>

That’s all you need for markup on that and more than enough styling hooks are present too.

Even if you were to do it with thead/tbody and the extra fields as Stomme Poes did, those first column TD have ZERO reason to have the ‘scope’ attribute (not even sure what’s trying to be accomplished with that since past the first one scope should be pointless) they should be TH… since they are a heading for the data in the next field. You could then differentiate them from the ones in thead by the fact they are in thead, not tbody.

Besides, if on a flat table you are resorting to a colspan=“2” for a heading type element, you’ve probably screwed up somewhere.

Personally - I’d go with the table as the more semantic of the two because it’s not a list of terms and definitions; but then I have rarely seen a website where DL’s made the least bit of sense semantically… Though that’s probably because the #1 and #2 uses of DL’s tends to be the “tables are evil” nutjobs or the people who don’t understand how to use LABEL and just slap it around form elements instead of a table.

11

Well, looks like the sweet time I took writing all this allowed Ray to ninja good answers in there : )

Your efforts were not in vain, you provided some good explanations. :wink:

12

I personally have no issues with tables, per se. I am doing it this way because I think it may not look as good with a table (I am not sure how to do all the lines, etc with a table like on their site), and I genuinely want to learn to do it this way just in case. I really need some help on this one, I am obviously not getting it. Any help would be appreciated, thanks!

13

Hi,
Before you get to involved with that you need to realize that tables are not evil when they are used properly.

They are intended for tabular data but the abuse starts when people use them to layout complete webpages.

From looking at your html content it does indeed appear to be tabular data so a table would be the proper element to use here.

It could go as a Definition List too, I would do that before I started in on divitis.