Why does the example have an empy `<th>`?


Could someone please take a look at this? I’ve been stressing out over the table headings lesson for over an hour to no avail. Could someone let me know what im doing wrong? https://www.codecademy.com/courses/learn-html/lessons/tables/exercises/table-headings this is the lesson.

I’ve also seen something about a tag but it mentions nothing about this in the lesson.

The empty TH element could be the problem.

1 Like

I only did that because the lesson on the left had put it too.
However I’ve tried it without and still doesn’t work.

At some point the instructions might have asked for a THEAD?

Eg.

  <table>
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Number of Items to Ship</th>
        <th>Next Action</th>
      </tr>
    </thead>

Ive gone back through the instructions twice and it at no point mentioned a thead, however the solution you just gave me worked so i’ll make a note of it and carry on with the lessons. Thankyou very much sir.

2 Likes

I’m answering for posterity to help other learners. The example uses an empty <th> to create a blank space in the upper left corner. This will create a table like below.

image

23 Likes

Just to add: I think the example mentions the empty TH for this reason:

The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to.

Which stumbled me up as well. Remove that empty TH and the lesson completes.
Perhaps the lesson/example needs updating.

The lesson may complete but the outcome will be a malformed table.

For all the beginners out there, I would like to tell you that you must add border=1 inside the

element in order to add a border to your table because if not you will not have a border for your table. Inside Codecademy it is added without border=1 outside it will not be added. Try and tell me.

remove the empty th and replace the scope with row :slight_smile:

You’ve added 4 headings and they’ve only asked for 3 and I think you should add the heading tags without any attributes :slight_smile:

Yeah, but we are not up to that lesson. We don’t know what it Border=1 means. It’s not written in that part of the lesson. We shouldn’t be learning new tags/codes/etc from a forum, that’s the codeacademy’s job.

It says in the information to add

as an empty heading that aligns the columns in place.

That information was given as an example for our understanding whereas to complete that section of the exercise you don’t have to add an 4th heading. To complete an exercise we’re bound to follow the instructions. That’s why you shouldn’t add attributes. :smiley:

2 Likes

Catower,

The answer that you gave, i found it out by actually “fiddling” around to see the effect of adding the empty header code and hence saw the output and accordingly corrected it myself.

I noticed that many of the questions related to the lessons on this portal are similar to this one…which in my view…could be avoided if, for example, in the lesson “Table Headings - Introduction to HTML, page 5/13” (to which this question is related).

In this lesson, the corresponding HTML code is shown as an example, the above table could also have been depicted below the HTML code for the benefit of the learners to understand how the output would look like once the HTML code is run.

Hence, in general, wherever HTML coding is depicted in the lessons as examples there should be a corresponding output of that coding shown in the lesson for a better understanding of what is taught in that lesson and this may minimise such questions on the forum. This in effect would help various levels of learners registered for various courses on this website.