www.webdeveloper.com
Results 1 to 4 of 4

Thread: Basic newb question about CSS table formatting

  1. #1
    Join Date
    Mar 2012
    Posts
    1

    Basic newb question about CSS table formatting

    How can I place a black border line above the "total" row in this table?

    <html>
    <head>
    <style type="text/css">
    #customers
    {
    width:100%;
    border-collapse:collapse;
    font-family: Tahoma;
    font-size:13px;
    }
    #customers td, #customers th
    {
    padding:3px 7px 2px 7px;
    background-color:#ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    }
    #customers th
    {
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#ffffff;
    }
    #customers tr.alt td
    {
    color:#000000;
    background-color:#ffffff;
    }
    #customers th.centerh
    {
    text-align:center;
    }
    #customers td.centerd
    {
    text-align:center;
    }
    </style>
    </head>





    <body>
    <table id="customers">
    <tr>
    <th>Item</th>
    <th>Manufacturer</th>
    <th>Size</th>
    <th class="centerh">Unit Price</th>
    <th class="centerh">Quantity</th>
    <th class="centerh">Total Price</th>
    </tr>
    <tr>
    <td>Corn Flakes</td>
    <td>Kellogg's</td>
    <td>18 oz.</td>
    <td class="centerd">2.50</td>
    <td class="centerd">1</td>
    <td class="centerd">2.50</td>
    </tr>
    <tr class="alt">
    <td>Solid White Tuna</td>
    <td>Starkist</td>
    <td>5 oz</td>
    <td class="centerd">2.79</td>
    <td class="centerd">2</td>
    <td class="centerd">5.58</td>
    </tr>
    <tr>
    <td>Cream of Mushroom Soup</td>
    <td>Campbell's</td>
    <td>10.75 oz</td>
    <td class="centerd">1.00</td>
    <td class="centerd">2</td>
    <td class="centerd">2.00</td>
    </tr>
    <tr class="alt">
    <td>2% Lowfat Milk</td>
    <td>Safeway</td>
    <td>0.5 gal</td>
    <td class="centerd">1.99</td>
    <td class="centerd">1</td>
    <td class="centerd">1.99</td>
    </tr>
    <tr>
    <td>Extra-Wide Egg Noodles</td>
    <td>Golden Grain</td>
    <td>12 oz</td>
    <td class="centerd">0.87</td>
    <td class="centerd">3</td>
    <td class="centerd">2.61</td>
    <tr>
    <td>Total</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="centerd">9</td>
    <td class="centerd">14.68</td>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Use:
    HTML Code:
    <tr style="border-top-style:solid;">
        <td>Total</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="centerd">9</td>
        <td class="centerd">14.68</td>
    </tr>

  3. #3
    Join Date
    Nov 2002
    Posts
    2,632
    HTML Code:
    <tr id="total">
        <td colspan="4">Total</td>
        <td class="centerd">9</td>
        <td class="centerd">14.68</td>
    </tr>
    Externally link the CSS.

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    Also this...

    Code:
    #customers th.centerh
    {
    text-align:center;
    }
    #customers td.centerd
    {
    text-align:center;
    }
    Should be this...

    Code:
    .center
    {
    text-align:center;
    }
    No reason to get extra fancy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles