Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Tables HTML Tables

Posted by Kathryn Notson
Kathryn Notson
25,941 Points

HTML Table Challenge Question 4: Put 2 header cells with any text inside row just created.

Here is my code:

Question 2: Add table heading tag to table. (Table heading tag element inserted under "Vegetables".) Question 3: Add row inside table header. (See table row tag element around "Meat" & "Dairy". This is inside the table header tag element.) Question 4: Put 2 header cells with any text inside row just created. (The table row element without text I created in response to the previous question is around the "Meat" & "Dairy" table heading elements. Perhaps I should insert another table row tag element separately around "Dairy".)

"Bummer! Header cells must be inside of a table row & have text in them."

I don't see my error. Perhaps the words "header" & "heading" are confused.

10/9/14 Nick Pettit: I'm still getting the "Bummer!" message when I do Question 4 of 8. It doesn't matter if I do it as A) below, B) separate the "Meat" & "Dairy" table headings in 2 separate table rows, or C) use the "Table Header" tag instead of the "Table Heading" tag as below, or D) separate the "Meat" & "Dairy" as in B except using "Table Header" tags.

Please show me your code. I don't know what I'm missing or misunderstanding. I can't finish the test if I don't code the answer correctly. It won't let me skip to Questions 5-8.

10/10/14 Nick Pettit: I did exactly as you did on Question 4 & I still got the "Bummer!" message. See my coding below.

<!DOCTYPE html>
<html
  <head>
    <title>HTML Tables Challenge</title>
  </head>
  <body>
    <h1>HTML Tables Challenge</h1>

    <!-- Write your code below -->
    <table border="1">
      <thead>
        <tr>
          <th>Food Groups</th>
        </tr>
        <tr>
          <th>Any</th>
          <th>Text</th>
        </tr>
      </thead>
      <tr>
        <th>Fruits</th>
        <th>Vegetables</th>
        <th></th>
      </tr>
      <tr>
        <td>Apples</td>
        <td>Carrots</td>
      </tr>
      <tr>
        <td>Bananas</td>
        <td>Potatoes</td>
      </tr>
    </table>
  </body>
</html>

```<!DOCTYPE html> <html> <head> <title>HTML Tables Challenge</title> </head> <body> <h1>HTML Tables Challenge</h1>

<!-- Write your code below -->
<table border="1">
  <thead>
    <tr>
      <th>Food Groups</th>
    </tr>
    <tr>
      <th>Meat</th>
      <th>Dairy</th>
    </tr>
  </thead>
    <tr>
      <th>Fruits</th>
      <th>Vegetables</th>
      <th></th>
    </tr>
    <tr>
      <td>Apples</td>
      <td>Carrots</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Potatoes</td>
    </tr>
</table>

</body> </html>

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Hi Kathryn,

I think you might be getting confused by the <thead> tag w/ the <th></th> table header tags. The W3 schools website defines the <thead> tag as, "[an] element [that] is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer)," whereas the <th> tags specify that the CELL is a table header.

Maybe try laying your table out something like this with just the <th> tags (and without the <thead> tags), first:

<table>
   <tr> <!-- top row -->
        <th  colspan="3" > Food Groups </th> <!-- Add the "colspan" to span this row across all 3 columns -->
  </tr>

   <tr> <!-- second row -->
      <th> Veggies </th> <!-- column 1-->
      <th> Meat & Dairy </th> <!-- column 2-->
      <th> Fruits  </th> <!-- column 3-->
   </tr>

   <tr> <!-- third row -->
      <td> Carrots</td> <!-- column 1-->
      <td> Milk </td> <!-- column 2-->
      <td> Apples </td> <!-- column 3-->
   </tr>
</table>

If your lesson is, in fact, wanting you to use the <thead> tags, I would add them here:

    <thead>
          <tr> <!-- top row -->
              <th  colspan="3" > Food Groups </th> <!-- Add the "colspan" to span this row across all 3 columns -->
          </tr>

          <tr> <!-- second row -->
              <th> Veggies </th> <!-- column 1-->
              <th> Meat & Dairy </th> <!-- column 2-->
              <th> Fruits  </th> <!-- column 3-->
          </tr>
</thead>

8 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Kathryn,

I decided to record a screencast to help walk you through task 4 of the code challenge. I don't normally do this, because it would be impossible for me to do it for all 90,000 of our students, but I can tell you're determined to learn. You haven't given up even after trying so many times, and as long as that's true, I won't give up on you either. :)

I hope this video helps, but if not, please feel free to reply with any additional questions and I'll do my best to answer.

Kathryn Notson
Kathryn Notson
25,941 Points

11/5/14 Nick Pettit: Thanks for completely clearing up the confusion! I understand it now.

Yes, what confused me was the way the test was written.

First question should have stated, "Create a table element on the page" or "table tag on the page," not "create a table on the page." Yes, I thought I had to create an entire table from scratch. (I made it more of a challenge as a result.)

Second question should have stated, "Add a table header element or tag" not "table heading" as table header is <thead></thead> & table heading is <th></th>.

The terms "table header" & "table heading" were used interchangeably & should not have been used interchangeably. It creates confusion.

Question three: "Add table row inside of table header."

Question 4: This should have stated, "Put two heading cells with any text inside row just created," instead of "Put two header cells with any text inside row just created."

"Table header" & "table heading" were used interchangeably a second time in this question, but should not have been used interchangeably. It creates confusion.

I hope my explanation of my thinking helps you understand why this HTML Tables Challenge quiz was more challenging to me than I expected. I couldn't see why my coding was incorrect. I thought I was understanding the questions correctly & I wasn't. I just used more coding that you wanted me to use & that was my entire problem. I didn't understand that from the other people who responded to my query, either. That's why I was stumped.

Whew! Now I can go onward from here!

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Awesome, glad I was able to clear that up for you Kathryn Notson! Thanks for being patient. :)

Eiyad Ziyadah
Eiyad Ziyadah
19,250 Points
Eiyad Ziyadah
Eiyad Ziyadah
19,250 Points

you got confused with "Put 2 header cells with any text inside row just created" and created two header rows instead. anyways I would suggest the below table for you. one more thing, you used the first "th" element to create a title for your table, its better to use "caption" element instead.

<table>
 <caption>Food Groups</caption>
 <thead>
  <tr>
   <th>Meat & Diary</th>
   <th>Fruits</th>
   <th>Vegetables</th>
  </tr>
 </thead>
 <tbody>  
   <tr>
     <td>Chicken breasts</td>
     <td>bananas</td>
     <td>Potatos</td>
   </tr>
   <tr>
     <td>Low Fat Milk</td>
     <td>Apples</td>
     <td>Tomato</td>
   </tr>
  </tbody>
</table>
Kathryn Notson
Kathryn Notson
25,941 Points

I tried it this way & it didn't work. There is no caption tag element in the HTML Table Challenge Quiz or in the previous lesson material. I haven't encountered it in any HTML lesson.

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

You are having trouble with question 4 of 8? Is that correct?

If so, you just need to add two <th></th> tags with words inside of them to get the challenge correct, I don't know what any of your code after that is for, as you haven't gotten that far into the code challenge yet.

I would suggest you just do what the code challenge is asking, step by step like this:

Step 1: Create a table.

<table>
</table>

Step 2: Add a table heading tag

 <table>
      <thead>
      </thead>
 </table>

Step 3: Now add a row inside of the table header

    <table>
      <thead>
        <tr></tr>
      </thead>
    </table>

Step 4: 

    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
    </table>

As you can see, the code challenge doesn't have to look exactly like the lesson videos, it is just using the same skills you just learned and applying them.

Kathryn Notson
Kathryn Notson
25,941 Points

I am using the table header, table heading, & table row tag elements appropriately. There's nothing in the HTML Table Challenge quiz about using the column span tag or the top, second, or third row designations.

This doesn't answer my question.

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

I'm sorry I must have misunderstood you, what is your question?

Edit: Maybe if you delete the first <tr></tr> and just have the one with the two <th></th> tags then it won't mark you wrong. I think it is just seeing the one th tag in the first row and immediately marking it wrong, therefore, ignoring the rest of your content.

Kathryn Notson
Kathryn Notson
25,941 Points

Kate: I posted the exact HTML Table Challenge questions before showing the code I typed up to the point when I got the "Bummer!" message. I followed the directions explicitly. I was supposed to add the table row inside the table header without text in Question 3. It's Question 4 that gives me the "Bummer!" message & I can't figure out why according to what I typed in code.

So far, no one has given me the correct answer. I don't think people are checking their own code to see if what they tell me is correct.

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

I did though, if you just typed:

<table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
</table>

for Question 4, you would get the correct answer. I retook the challenge before answering you the first time. That's why I said I didn't know why you had all of that extra code. It does not pertain to the code challenge.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Kathryn Notson,

I just tried this code for steps 1-4 and it worked fine for me. Are you seeing an error message on steps 1-4?

Sara Hitchcock
Sara Hitchcock
12,296 Points

Thank you for clearing up the first 4 steps.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

Kate: I'm not seeing my error still. All the code I included were answers to the HTML Table Challenge questions 1-4. It's the 4th question that I can't get the correct answer & I've done it 3 different ways & still get the "Bummer!" message.

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Literally just put this: 

    <!-- Write your code below -->
    <table>
      <thead>
        <tr>
          <th>Text</th>
          <th>Text</th>
        </tr>
      </thead>
    </table>

Nothing else, nothing more, nothing less. (except the code provided in the very beginning). Just type that and see if it works.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

Nick Pettit: Questions 1-3 are correct. It's question 4 that I get the "Bummer!" message. I tried 3 different ways to answer Question 4 & I still got the "Bummer!" message.

Does this mean that my answer was correct after all, but the Quiz 4 question "Bummer!" message is wrong? Leave it to me to find a quirk somewhere!

Do you want me to take the HTML Table Challenge Quiz over again & see if Question 4 still gives me the "Bummer!" message again? I'll do that & let you know the results.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Kathryn Notson,

Sorry for the slow reply. I just used my administrative privileges on Treehouse to log into your account and test that task 4 on that code challenge, and I was able to pass it just fine. Here's the code I had typed in by task 4.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Tables Challenge</title>
  </head>
  <body>
    <h1>HTML Tables Challenge</h1>

    <!-- Write your code below -->
    <table>
      <thead>
        <tr>
          <th>test</th>
          <th>123</th>
        </tr>
      </thead>
    </table>

  </body>
</html>

Can you please go through the challenge again and copy and paste that code into step 4? I'm not sure what it is at this point, but if that doesn't work, I'll pull in one of our developers to investigate the challenge further.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

10/22/14 Nick Pettit: My code is exactly like yours on HTML Deep Dive HTML Tables Question 4: Put 2 header cells with any text inside of the row you just created. I still get "Bummer! Header cells must be inside of the table row & have text in them." & Preview & Recheck Work buttons I red.

I thought maybe because I initially added a table border that wasn't required that messed up my coding, so I left it out this time. That didn't affect it at all.

I'm adding code according to the directions at the beginning of the quiz in order to build on the code I create. I did cut & paste the code you wrote in your posting. I still got the "Bummer!" message.

It's time to get a developer to look at this. This issue has been a problem for me for 1 month now. I've been using the same computer @ SE Works the entire time I've been taking the Web Design course. I'm using Microsoft Windows 7 Professional & Internet Explorer 9, (Multnomah County Library has Microsoft Windows 7 Enterprise) & I haven't had any problems (except doing and extraction function to transfer the image file to my Workspace instead of selecting the file & dragging & dropping it on Workspace on an earlier lesson.) I don't know if you using Apple MacIntosh OS X & Google Crome or Safari web browser makes difference. If you look at all the other posts here in response to this question, it seems everyone else is successfully getting their code correct as you have, but it still looks like I should be getting the "green" answer too, because my coding is correct, instead of the "red" "Bummer!" response. I would appreciate knowing what the developer finds is the problem with this question. I know I can't fix it. This is my brick wall with this course, & I can't finish this portion of the course until I can get the "green" answer & complete the other 3 questions without another problem.

I received an e-mail from Team Treehouse telling me I have to finish this course by January 1, 2015, but with this issue blocking me, I don't know that I can finish this course by then. I'm limited to using the SE Works computers or Multnomah County Library computers only. I need to be able to spend some time to catch up very soon so I can make an attempt to finish this course on time.

Thanks for your help. I appreciate any feedback you could give me.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Challenge</title>

<!--Write your code below-->
<table>
  <thead>
    <tr>
     <th>Food Groups</th>
    </tr>
    <tr>
     <th>test</th>
     <th>123</th>
    </tr>
  </thead>
    <tr>
     <th>Fruits</th>
     <th>Vegetables</th>
     <th></th>
    </tr>
    <tr>
     <td>Apples</td>
     <td>Carrots</td>
    </tr>
    <tr>
     <td>Bananas</td>
     <td>Potatoes</td>
    </tr>
  </table>

 </body>
</html>
Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Kathryn Notson,

I'm sorry you're having so much trouble with this challenge. Looking at the code you posted, it looks like you have way more than what's needed in task 4. When you successfully reach that task in the code challenge, please follow these steps:

  1. Delete all your code from the challenge.

  2. Copy and paste this code into the challenge and then check the answer:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Tables Challenge</title>
  </head>
  <body>
    <h1>HTML Tables Challenge</h1>

    <!-- Write your code below -->
    <table>
      <thead>
        <tr>
          <th>test</th>
          <th>123</th>
        </tr>
      </thead>
    </table>

  </body>
</html>

I just tried this using your account on a computer running IE9, and I was able to complete it successfully. If you can do that for me, it will help us narrow down the problem.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

10/23/14 Nick Pettit: I did Question 4 two different ways. The 1st time I did my usual code except I eliminated the "Vegetable" table heading & the "Carrots", & "Potatoes" table data. That actually worked. I got the "Well done! You're doing great!" message. Then I did it again & somehow I got a popup communication error, then hit the button to go back to my Question 4 (there were 2 buttons), then I got the "Bummer!" message again. I started over again & then on Question 4, I deleted all my code copied & pasted your code into the challenge space & I got the "Bummer!" message again.

Now what? Do I try to do it repeatedly until it lets me get past Question 4? There still seems to be something weird about this question since I got a popup communication error as if it was rethinking my reduced code & changed it's mind about it being correct or not. I know I'm using correct code in the correct sequence & proper place, but other than that, I just don't know what's going on behind this question.

Thanks for your reply.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Kathryn,

Yes, please retry the challenge again later with the code that worked for you. The communication popup is a separate and unrelated issue that can occur from time to time depending on the network connection.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

10/30/14 Nick Pettit: Here's my code:

<!DOCTYPE html>
 <html>
   <head>
    <title>HTML Tables Challenge</title>
   </head>
     <body>
      <h1>HTML Tables Challenge</h1>

      <!--Write your code below-->
   <table>
    <thead>
     <tr>
      <th>Food Groups</th>
     </tr>
     <tr>
      <th>Any</th>
      <th>Text</th>
     </tr>
    </thead>
     <tr>
      <th>Fruit</th>
      <th></th>
     </tr>
     <tr>
      <td>Apples</td>
     </tr>
   </table>
  </body>
</html>

I still get the "Bummer!" message as I have multiple times before.

A new problem occurred, too. The "Preview Code" button doesn't work now. I can't preview my code before I click on the "Check Work" button. Is this a developer problem to be fixed? Thank you for your help.