Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hey Guys... I am lost trying to build this table in CSS

    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>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

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

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    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

  • #4
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to vertically align to the center you can also use

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

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

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •