The problem is that i want to align at left the word "Religion" and in addition i want to align using last-child all the th to the right.

what iam doing wrong ??

<html>
    <head>
        <title>
            CSS Exercise 2
        </title>

        <!--this is a link to the css file you will make-->
        <link rel="stylesheet" type="text/css" href="exercise2.css" />

<style>
body{text-align:center;}

h3{color:#993738;}

#all{border-collapse:collapse;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border:1px solid #993738;}

#all td, #all tr{border:1px solid #993738;}

#all #top{font-weight:bold;background-color:#993738;color:white;}

tr.bgray{background-color: #F2E9EC;}\

.b{text-align:left;}


.right{text-align:right;}



</style>





    </head>
    <body>
        <h3>Geography Class</h3>
        <table id="all">
            <tr id="top">
                <th class="b">Region</th>
                <th>Percentage</th>
            </tr>
            <tr class="bgray">
                <td >New England</td>
                <td class="right">12%</td>
            </tr>
            <tr>
                <td>Mid-Atlantic</td>
                <td class="right">19%</td>
            </tr>
            <tr class="bgray">
                <td >South and Puerto Rico</td>
                <td class="right">15%</td>
            </tr>
            <tr>
                <td>Midwest and Plains States </td>
                <td class="right">12%</td>
            </tr>
            <tr class="bgray">
                <td >Southwest and Mountain </td>
                <td class="right">10%</td>
            </tr>
            <tr>
                <td>West, Alaska, and Hawaii</td>
                <td class="right">20%</td>
            </tr>
            <tr class="bgray">
                <td >Abroad</td>
                <td class="right">13%</td>
            </tr>
        </table>


</body>
</html>

Due to some lack of browser support of <colgroup> and <col> elements (1), there is at the moment no alternative to attributing each <td> element a class the way you did.

To align "Region" you should remove the backslash in the style sheet (at the end of line 21).

Write th css afer right,then i will work

Instead of

    .b{text-align:left;}
    .right{text-align:right;}

try this

.right{text-align:right;}
.b{text-align:left;}
commented: and what is the difference between them ? +0

Alba Ra ... they told me that in order to place all the percentance to the right , i have to use the "last-child" option rather than using the class="right" in each last "td" . I am trying to use last-child with no result. Maybe is a problem of the browser ? Or maybe the !DOCTYPE declaration is the problem ?

Then you should use the pseudo-class :last-child and your code would look like this (in XHTML 1.0 Strict):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Exercise 2</title><!--this is a link to the css file you will make-->
  <link rel="stylesheet" type="text/css" href="exercise2.css" />
<style type="text/css">
/*<![CDATA[*/
    body{text-align:center;}
    h3{color:#993738;}
    #all{border-collapse:collapse;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border:1px solid #993738;}
    #all td, #all tr{border:1px solid #993738;}
    #all #top{font-weight:bold;background-color:#993738;color:white;}
    #all td:last-child{text-align:right;}
    tr.bgray{background-color: #F2E9EC;}

    .left{text-align:left;}
/*]]>*/
</style>
</head>

<body>
  <h3>Geography Class</h3>

  <table id="all">
    <tr id="top">
      <th class="left">Region</th>

      <th>Percentage</th>
    </tr>

    <tr class="bgray">
      <td>New England</td>

      <td>12%</td>
    </tr>

    <tr>
      <td>Mid-Atlantic</td>

      <td>19%</td>
    </tr>

    <tr class="bgray">
      <td>South and Puerto Rico</td>

      <td>15%</td>
    </tr>

    <tr>
      <td>Midwest and Plains States</td>

      <td>12%</td>
    </tr>

    <tr class="bgray">
      <td>Southwest and Mountain</td>

      <td>10%</td>
    </tr>

    <tr>
      <td>West, Alaska, and Hawaii</td>

      <td>20%</td>
    </tr>

    <tr class="bgray">
      <td>Abroad</td>

      <td>13%</td>
    </tr>
  </table>
</body>
</html>
commented: it doesnt work :-/ what iam doing wrong? I am trying to use last:child pseudoclass instead of class="right" +0

then in that

td.right{text-align:right;}
tr#top th.left{text-align:left;}

right align to all td with id=right

Click Here

My code works for me on Firefox.

I see the problem - it appears that IE does not support the :last-child pseudo-class. Which means if "they" have asked you to use this you should change your browser.

td.right{text-align:right;} tr#top th.left{text-align:left;}

use this code for solution . It will work .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.