...

View Full Version : Hey Guys... I am lost trying to build this table in CSS



suhayda
10-04-2004, 04:40 PM
The top part shows the table in CSS and the bottom shows the table in plain HTML. How do I get the text within the CSS table to do a center vertical alignment. I have tried vertical-align: middle; and nothing happens. I don't want to add any more DIV or SPAN or Tables into this code. Is this possible and what browsers support it?

Thanks




<style>
p, td, div {
font:10px verdana,arial,sans-serif;
color:#000000;
}
.row1{
background-color: #E4ECF3;
height: 17;
float: left;
margin-left: 1px;

}
.row2{
background-color: #EDF1F5;
height: 17;
float: left;
margin-left: 1px;
}

.rowhead{
background-color: #284386;
height: 17;
float: left;
margin-left: 1px;
}

</style>
<div class=rowhead style="width:149;"><font color="#FFFFFF" size="2">Merchant</font></div>
<div class=rowhead style="width:175;"><font color="#FFFFFF" size="2">Airline</font></div>
<div class=rowhead style="width:138;"><font color="#FFFFFF" size="2">Price
in US$</font></div>
<div class=rowhead style="width:70;"><font color="#FFFFFF" size="2">Info</font></div>
<div class=rowhead style="width:61;"><font color="#FFFFFF" size="2">Email</font></div>
<br>

<div class=row1 style="width:149;">American West Airlines</div>
<div class=row1 style="width:175;">American West Airlines</div>
<div class=row1 align=right style="width:138;"><strong>34</strong></div>
<div class=row1 align=center style="width:70;"></div>
<div class=row1 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR>

<div class=row2 style="width:149;">American West Airlines</div>
<div class=row2 style="width:175;">American West Airlines</div>
<div class=row2 align=right style="width:138;"><strong>34</strong></div>
<div class=row2 align=center style="width:70;"></div>
<div class=row2 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row1 style="width:149;">American West Airlines</div>
<div class=row1 style="width:175;">American West Airlines</div>
<div class=row1 align=right style="width:138;"><strong>34</strong></div>
<div class=row1 align=center style="width:70;"></div>
<div class=row1 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row2 style="width:149;">American West Airlines</div>
<div class=row2 style="width:175;">American West Airlines</div>
<div class=row2 align=right style="width:138;"><strong>34</strong></div>
<div class=row2 align=center style="width:70;"></div>
<div class=row2 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row1 style="width:149;">American West Airlines</div>
<div class=row1 style="width:175;">American West Airlines</div>
<div class=row1 align=right style="width:138;"><strong>34</strong></div>
<div class=row1 align=center style="width:70;"></div>
<div class=row1 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row2 style="width:149;">American West Airlines</div>
<div class=row2 style="width:175;">American West Airlines</div>
<div class=row2 align=right style="width:138;"><strong>34</strong></div>
<div class=row2 align=center style="width:70;"></div>
<div class=row2 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row1 style="width:149;">American West Airlines</div>
<div class=row1 style="width:175;">American West Airlines</div>
<div class=row1 align=right style="width:138;"><strong>34</strong></div>
<div class=row1 align=center style="width:70;"></div>
<div class=row1 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row2 style="width:149;">American West Airlines</div>
<div class=row2 style="width:175;">American West Airlines</div>
<div class=row2 align=right style="width:138;"><strong>34</strong></div>
<div class=row2 align=center style="width:70;"></div>
<div class=row2 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>


<BR><div class=row1 style="width:149;">American West Airlines</div>
<div class=row1 style="width:175;">American West Airlines</div>
<div class=row1 align=right style="width:138;"><strong>34</strong></div>
<div class=row1 align=center style="width:70;"></div>
<div class=row1 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>

<BR><div class=row2 style="width:149;">American West Airlines</div>
<div class=row2 style="width:175;">American West Airlines</div>
<div class=row2 align=right style="width:138;"><strong>34</strong></div>
<div class=row2 align=center style="width:70;"></div>
<div class=row2 align=center style="width:61;"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></div>

<br>
<table width="600" border=0 cellpadding=0 cellspacing=1 bgcolor="#ffffff" dwcopytype="CopyTableRow">
<tr bgcolor="#284386">
<td width="150" height="16"><font size=2 color="#ffffff"><strong>Merchant</strong></font></td>
<td width="180"><font size=2 color="#ffffff">Airline</font></td>
<td width="140" align="right" style="padding:2px;"><font size=2 color="#ffffff">Price
in US$&nbsp;</font></td>
<td width="70" align="center" style="padding:2px;"><font size=2 color="#ffffff">Info</font></td>

<td width="60" align="center" style="padding:2px;"><font size=2 color="#ffffff">Email</font></td>
</tr>
<tr bgcolor="#E4ECF3">
<td width="150">America West Airlines</td>
<td width="180">America West Airlines</td>
<td width="140" align="right"><strong>110&nbsp;</strong></td>
<td width="70" align="center"></td>

<td width="60" align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#EDF1F5">
<td>1800CheapSeats</td>
<td>Northwest Airlines</td>
<td align="right"><strong>118.71&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#E4ECF3">
<td>Delta Airlines</td>
<td>Northwest Airlines</td>
<td align="right"><strong>118.71&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#EDF1F5">
<td>Travelnow</td>
<td>United Airlines</td>
<td align="right"><strong>123.71&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#E4ECF3">
<td>Priceline</td>
<td>United Airlines</td>
<td align="right"><strong>123.71&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#EDF1F5">
<td>Travelocity</td>
<td>Northwest Airlines</td>
<td align="right"><strong>123&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
<tr bgcolor="#E4ECF3">
<td>Orbitz</td>
<td>Multiple Carriers</td>
<td align="right"><strong>124&nbsp;</strong></td>
<td align="center"><font size=2><strong>details</strong></font></td>

<td align="center"><img src="/emailtofriend.gif" height="10" width="10" border=0 title="Email this deal to a friend!"></td>
</tr>
</table>

Antoniohawk
10-04-2004, 10:07 PM
To vertically center the text in the css version you could use top and bottom padding of the same measurement in ems so that it would change with the text. I have no idea of your intentions with this project, but if I were you I would use the tables version because that's what tables are meant for. :)

Please place your code in the [code] tags so that it retains the formatting and makes it more readable for all.

suhayda
10-05-2004, 09:03 AM
top and bottom padding.... never thought of it. Thanks a lot.

I can't use tables... it gets real messy with them as I need to create one for each row. :(

Peter

lalo
10-05-2004, 12:31 PM
to vertically align to the center you can also use


margin-top: auto;
margin-bottom: auto;
or even


padding-top: auto;
padding-bottom: auto;

AaronW
10-05-2004, 02:00 PM
Dude, this is what tables are for... Don't just avoid them because you're unfamiliar with them...

You don't need a table for each row. Use rowspan and colspan attributes on your <td> elements to span multiple rows/columns as necessary.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum