# CSS Basics Exercise 1 -Table

**URL:** <https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336>\
**Category:** HTML/CSS\
**Created:** [May 18, 2023, 5:53pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336 "2023-05-18T17:53:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jinid](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jinid](https://forum.codewithmosh.com/u/jinid)\
**Post date:** [May 18, 2023, 5:53pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/1 "2023-05-18T17:53:46Z")

</div>

The table I created is identical to Mosh’s, however the footer element is grey and not blue and the text is black. The styles I applied is identical when compared to the solution, but the table isn’t the same as Mosh’s.

I used :nth-child selector to make odd rows grey, but this style is overriding the styles of the footer element…

The styles I applied is identical to his. From top to bottom and in the same order. I have made sure my html doc matches his as well. I have tried inspecting Mosh’s Table in the browser as well as mine(side to side). Cannot find the difference. I’m not sure what’s wrong.  
this is what my style sheet look like:

body{  
margin: 10px;  
}

table, td, th {  
border: 1px solid #c4dcf3;  
border-left: 0;  
border-right: 0;  
border-collapse: collapse;  
}  
td, th {  
padding: 10px;  
}  
th {  
background-color: #427fef;  
color: white;  
}  
tr:nth-child(odd){  
background-color: #eef7ff;  
}  
tfoot{  
text-align: left;

}

I have tried applying styles separately or adding it next to ‘th’ selector, but somehow the nth child is overriding.

---

<div class="post-metadata">

**Author:** ![MTownsend](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mtownsend/32/6311_2.png) [@MTownsend](https://forum.codewithmosh.com/u/MTownsend)\
**Post date:** [May 18, 2023, 9:06pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/2 "2023-05-18T21:06:49Z")

</div>

I tested the css he provided in the course with the stylesheet you provided. It looks fine on my end. See below

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/7/7d719afcedd693b8639af8bed9c4042967e288ab.png)

You should attach your html as well so others can see the entire project.

hit the \</\> button on the message editor when you reply and you can paste your code between the backticks. Below is the css from the course exercise

```auto
body {
  margin: 10px;
}

table, td, th {
  /* I've set all the borders using the border property
  and then removed the left and right border. Alternatively,
  we could set border-top and border-bottom properties but 
  that would result in the repetition of the color. If we
  want to change the border color, we have to change it in
  two places. */
  border: 1px solid #c4dcf3;
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
}

td, th {
  padding: 10px;
}

th {
  background-color: #427fef;
  color: white;
}

tr:nth-child(odd) {
  background-color: #eef7ff;
}

tfoot {
  text-align: left;
}

```

---

<div class="post-metadata">

**Author:** ![gulshan212](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/gulshan212/32/6217_2.png) [@gulshan212](https://forum.codewithmosh.com/u/gulshan212)\
**Post date:** [May 19, 2023, 4:26pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/3 "2023-05-19T16:26:19Z")

</div>

Well, your code has some syntax error; you can try the correct code below.

```auto
body {
  margin: 10px;
}

table,
td,
th {
  border: 1px solid #c4dcf3;
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
}

th {
  background-color: #427fef;
  color: white;
}

tbody tr:nth-child(odd) {
  background-color: #eef7ff;
}

tfoot tr {
  background-color: transparent;
}

tfoot {
  text-align: left;
}

```

Thanks

---

<div class="post-metadata">

**Author:** ![MTownsend](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mtownsend/32/6311_2.png) [@MTownsend](https://forum.codewithmosh.com/u/MTownsend)\
**Post date:** [May 19, 2023, 9:54pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/4 "2023-05-19T21:54:15Z")

</div>

Not sure where you are seeing syntax errors. The css is not formatted, but that will not break functionality. I copied the css that @jinid provided, downloaded the courses source html, formatted the code @jinid provided , and then ran a diff on it just to make sure it was identical. The css you provided expands on the original css. Nothing wrong with that, other than it could lead @jinid down a path that isn’t needed.

The screenshot I provided was using the course’s html, and the css from the @jinid . Maybe I am missing something, but looks the same to me. This means maybe there is something other than the css causing the issue…

My conclusion is @jinid should provide the html and all other resources that are referenced in their version of the solution.

---

<div class="post-metadata">

**Author:** ![jinid](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jinid](https://forum.codewithmosh.com/u/jinid)\
**Post date:** [May 19, 2023, 10:18pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/5 "2023-05-19T22:18:17Z")

</div>

Hi, this is what the html doc looks like.

| Country | OrderID | Order Amount |
| --- | --- | --- |
| USA | 1000 | $1300 |
| USA | 1001 | $700 |
| CA | 1002 | $2000 |
| CA | 1003 | $1000 |
| Total | $5000 |

---

<div class="post-metadata">

**Author:** ![jinid](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jinid](https://forum.codewithmosh.com/u/jinid)\
**Post date:** [May 19, 2023, 10:22pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/6 "2023-05-19T22:22:25Z")

</div>

I just copied and pasted the html code but it just turned into a table… and the ‘colspan=2’ for the footer just disappeared, where the “Total” has to expand 2 columns. but as you can see the skeleton is basically correct. I just don’t know why it isn’t working on my end. I tried the css @gulshan212 provided and it still isn’t looking right. The footer is trasparent, without color.

---

<div class="post-metadata">

**Author:** ![Binay](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@Binay](https://forum.codewithmosh.com/u/Binay)\
**Post date:** [July 4, 2023, 7:08pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/7 "2023-07-04T19:08:38Z")

</div>

I think something must be wrong with HTML then,  
**Here is my HTML code**

```auto
<body>
    <table>
        <thead>
            <tr>
            <th>Country</th>
            <th>OrderID</th>
            <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>USA</td>
            <td>1000</td>
            <td>$1,300</td>
        </tr>
        <tr>
            <td>USA</td>
            <td>1001</td>
            <td>$700</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1002</td>
            <td>$2,000</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1003</td>
            <td>$1,000</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <th></th>
                <th>$5,000</th>
            </tr>
        </tfoot>
    </table>
</body>

```

**Here is the CSS code**

```auto
table,th,td{
    border-bottom: 1px solid #c4dcf3;
    border-collapse: collapse;
}
th{
    color: white;
    background-color:#427fef;
}
td,th{
    padding: 10px;
}
tr:nth-child(odd){
    background-color:#eef7ff;
}
tfoot{
    text-align: left;
}

```

This one works perfectly fine.

---

<div class="post-metadata">

**Author:** ![Lrod949](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@Lrod949](https://forum.codewithmosh.com/u/Lrod949)\
**Post date:** [July 18, 2024, 11:52pm UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/8 "2024-07-18T23:52:00Z")

</div>

How does the tfoot know to be the dark blue color if its only on the th?

---

<div class="post-metadata">

**Author:** ![theorion](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/theorion/32/7783_2.png) [@theorion](https://forum.codewithmosh.com/u/theorion)\
**Post date:** [July 19, 2024, 3:58am UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/9 "2024-07-19T03:58:55Z")

</div>

it’s cause there is a th inside the footer

---

<div class="post-metadata">

**Author:** ![Lrod949](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@Lrod949](https://forum.codewithmosh.com/u/Lrod949)\
**Post date:** [July 19, 2024, 4:16am UTC](https://forum.codewithmosh.com/t/css-basics-exercise-1-table/20336/10 "2024-07-19T04:16:01Z")

</div>

Cool that seemed to work. I was using tr