CSS: Align Text To top with no spacing between text lines - php

Question

I am working with a php document that has tables as well as an image, the way its set up is I have a table with 3 columns, two with text and one with a picture. The problem that I am running into is that the images are all different sizes which cause my text lines to cause spacing in between them, is there a way to format the text to retain its original formatting? Here is an example of what I am talking about http://www.cnghl.biz/cnghldb/test.php?PlayerID=2818
Here is the CSS
<style>
a {text-decoration:none;}
}
td {
vertical-align: top;
}
td img {
vertical-align: top;
}
.space {
line-height: .3 em;
}
.wrap {
float:right;
}
</style>
And here is the PHP
Echo "<td width='659'><div align='center'>";
Echo "<table width='602' border='0'>";
Echo "<tr>";
Echo "<td colspan='3'><h1>".$row['FirstName']." ".$row['LastName']."</h1> </td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td width='164'><strong>Birthdate:</strong>".$row['DOB']."</td>";
$DOB = $row[DOB]; //dd.mm.yyyy
$user_date = new DateTime($DOB);
$curr_date = new DateTime();
$age_cal = $curr_date->diff($user_date);
Echo "<td width='219'><strong>Age:</strong>".$age_cal->y;"</td>";
Echo "<td width='205' rowspan='6'><div align='center'><img src=\"http://www.cnghl.biz/cnghldb/images/".$iPlayerID.".jpg\">";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Nation:</strong>".$row['Nation']."</td>";
Echo "<td><strong>CNGHL Team:</strong>".$row['CNGHLRights']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Position:</strong>".$row['Position']. "</td>";
Echo "<td><strong>Weight:</strong>".$row['Weight']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Height:</strong>".$row['Height']. "</td>";
Echo "<td><strong>NHL Team:</strong>".$row['Team']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Draft Year:</strong>".$row['CNDraftYR']."</td>";
Echo "<td><strong>Draft Position:</strong>".$row['CNDraftPOS']."</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td height='25'><strong>Drafted By:</strong>".$row['DrTeam']."</td>";
Echo "<td><strong>Current Salary:</strong></td>";
Echo "</tr>";
Echo "</table>";
Echo "</div></td>";
Echo "<td width='141'> </td>";
Echo "</tr>";
Echo "</table>";
Echo "</div>";
I have tried to adjust the size of the image but that does not solve the problem, any help would be greatly appreciated.

Answer 1

Definitely do not use tables for layout purposes. By the way, this is the expected behavior of HTML tables, stretching their size to the content.
You can achieve this using divs, both solving your problem and having a more semantic markup, and having a cleaner markup.
I would also suggest you wrap your player's data into a Definition list (dl element) for a more semantic approach.
Example implementation

Answer 2

If the problem is the images being different sizes, you could give each image a specific width. Or if you don't want to adjust the images themselves, give the div/td that the image is in a specific width and height that is equal to the largest image and doesn't change.

Answer 3

Your rowspan is set to 6 but you have 7 <tr> in your table. The td { vertical-align: top; } is what you need for your CSS.