In step 1 of this exercise, where should I create the table?

Frequently Asked Questions HTML FAQ
27

What is this? This will overlap with a bunch of data.

28

@mtf I have a question, that if screen readers get confused if we make table structure then why to learn table in very deep? and if we have to learn then till what we should cover or we should learn alternative for this so that screen readers don’t get confused as they understand more semantic elements?

29

Screen readers are just programs, so don’t ‘get confused’, as much as may have trouble parsing over-complicated table structures. We can use other methods to create what may visually look like a table but that is not a table, per se. If we make our tables simple and apply the requisite scope attributes, our table should still render accordingly. The main thing is that tabulated data should be discernible.

I wouldn’t give this topic too much pause at this point. Learn how to create a table element, and move on. A more in depth look into tables would be better left until later.

2 Likes
30

Thanks @mtf for your super easy explanation I always read your explanation on every topic !!!.

1 Like
31

the table is styled and i didn’t see the style sheet, why did they style it i think its better not style yet, and i notice something.
for an Html element to be styled there should be a <div> tag or any other tag that will have an attribute to it to be able to style the element, but in the table element there is no <div> tag or any other tag that has an attributes to it, but the table is styled.

32

All elements can have at the very least, global attributes, as apply. In the bowels of the browser can be found a default style sheet which contains the base selector rulesets of all the elements. A table has no set properties apart from maybe,

width: 0;
border: none;

Table child elements may also have the same properties. This means a table has no dimensions, and neither do TR, TH or TD.

The appropriate style rules to apply to a table would be a width property that expands the table body to match the width of its parent container, such as,

table {
    width: 100%;
}

As mentioned above, rather than spend the time giving style rules to a table and its content, we can give page styles to a wrapper div and apply only the basic styles such as width and border to the table or its children.

At this early stage it is enough to know how to construct a table and populate it with tabular data and get that to render as expected. One should not need to apply styles to it. Things like font-family, font-size and color, style, etc. can be inherited from the parent or the document body. Set any other concerns aside for the time.

33

Can i nest a table in a <div> element

34

Yes. We can nest a table in any block level element, be it a DIV, a SECTION, an LI, or an ARTICLE. We don’t have to nest it, though. I just makes it easier to apply page styles through inheritance rather than styling the table cells.

The most basic form of TABLE would be as a child of the BODY. It’s width is already full screen so when we give the TABLE a width of 100%, it will also be the width of the screen. It’s height is determined the same way it is for any unbounded DIV or other block level element, which is expanded to fit the content.

1 Like
35

does the

tag need to be indented under the div tag?

36

For all practical purposes, HTML does not need any whitespace between elements.

<div><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table></div>

The above is perfectly valid HTML. Mind, a human reader might have an issue with it. For the sake of our reader, and ourselves being one and the same, we use whitespace.

<div>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>

Above the only whitespace is the linebreaks (a new line is whitespace), but already we can see the structure. Still, this is valid HTML and may only need a tiny bit of sprucing up for the reader to be able spot the nesting (child elements).

<div>
  <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

As we cannot clearly read your question, we hope this will serve as an example.

1 Like
37

Thank you that does help. It is a bit confusing and it feels like there’s conflicting information when it’s said that W3C makes the standards for HTML5 but then there’s no official standard. Isn’t the W3C standards for indentation and whitespace the standard? Also, where we do the exercises that doesn’t always follow that either.

38

There are no standards since W3C only recommends core HTML, not authoring style guides. The developer community teaches the readability aspects as ‘best practices’, or style guides. Indentation and whitespace are not part of the specs (recommendations).

Bottom line, W3C validation does not look at indentation. Human readers are the ones to think about. Don’t use indentation as a rule, use it to denote a parent-child relationship. Keep it simple. Overuse of indentation makes markup very tedious to read. It is not a stylization tool. Clear your mind of any idea of ‘rules’ where this is concerned.

1 Like
39

I placed my <table></table> element exactly as it was shown in the problem solution, I am still getting the answer marked wrong, How do I keep this from happening?

40

Hey, are you Charles?