Member Avatar for anestistsoukalis

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>
  • 4 Contributors
  • 10 Replies
  • 157 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by charlijoseph
Member Avatar for Alba Ra

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).

Member Avatar for IIM

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
Member Avatar for anestistsoukalis

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 ?

Member Avatar for Alba Ra

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>
Edited by Alba Ra because: Left some of my own test code in it - deleted now...
commented: it doesnt work :-/ what iam doing wrong? I am trying to use last:child pseudoclass instead of class="right" +0
Member Avatar for IIM

then in that

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

right align to all td with id=right

Member Avatar for Alba Ra

Click Here

My code works for me on Firefox.

Member Avatar for Alba Ra

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.

Member Avatar for charlijoseph

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

use this code for solution . It will work .

Edited by charlijoseph
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.