Question
In step 1 of this exercise, where should I create the table?
Answer
Add opening and closing <table> tags after the <div> element on line 17.
20 Likes
Why after div, why not after line 6?
2 Likes
I’m pretty new to this and could very well be wrong. I would think you would want it in the body of the html rather than in the head. We want the table to show as content in the body rather than metadata in the head. If someone with more experience could shed some light that would be great.
15 Likes
Newbie here so maybe a dumb question, should the <table> element be nested in the <div> or should it have the same indentation as the <div> nested within the <body>?
3 Likes
Please post a link to the exercise so we may better advise.
A table is a block level element so does not need a container, although giving it a wrapper means some of the page styling can be handed off to the that element, and style the table as needed for its own purpose.
5 Likes
Exercise: Create a table. link: https://www.codecademy.com/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-tables/lessons/tables/exercises/create-table . Thanx for the quick response @mtf
4 Likes
As I’ve written it (mind, one needs to review the instructions) there is no container DIV. The TABLE is a sibling of ‘search’ and ‘nav’ elements.
6 Likes
Thank you sir. It seems obvious now (Im a few lessons down the road). Both your answers have very much cleared things up.
2 Likes
You’re welcome.
Aside
Even while this exercise creates a styled page, per se, the time devoted to learning about un-styled tables would be advisable, and well spent. The course explores things like colspan and rowspan, thead, th, and such, but only in brief on the grand scale of things. One would be well advised to delve into tables in full detail, before moving forward.
There is a lot to be learned with regard to composition, accessibility, dissemination by robots, and so forth. Truly, there is a lot to learn and know, even without CSS in the picture. Recall that robots and specialized user agents like screen readers don’t give two farthings when it comes to style. Making tables that they can understand is a goal at all times, front and center.
For lack of another example, forgive that I use my own from an earlier topic on the subject…
A robot or screen reader will look first at the CAPTION. Next they will create an index of the headings. Those with scope will be mapped to their column or row. A screen reader could answer the user as to what other items are on the same row, or in the same column.
We can go right down the rabbit hole in terms of how to make a table a truly beautiful thing to behold; would we really? The point I make is that there is always the usability and accessibility concern before us, as developers. Studying the TABLE element in the raw, as it were, is probably the best way to learn. A well constructed table needs no style sheet. It won’t be pretty, but it won’t be ugly, either. It will stand on its own.
We (the dev community) definitely discourage using any HTML attributes to give direction to presentation, meaning that while we could introduce borders, padding, and so on in HTML, it is so passe in today’s terms I wouldn’t even want to venture down that path.
I still say, don’t bring style into the frame until you’ve constructed many, many tables of all types and constructs to really have a feel for how they work. They’re malleable to an extent. Learn that extent. Define with markup and later shape with CSS.
25 Likes
Well, why we are using CSS code here…Though CSS code isn’t showing here and I think it doesn’t necessary in Beginner HTML 
1 Like
Who would create div tag in the head tag?
1 Like
The thing is that the default code provided includes lines 17,18 that go as follows:
<div class="search">Search the table</div>
The way I interpret it (and I’m a beginner), is that a division has already been created to distinguish the table in the layout. So, if I am adding code pertaining to that table, wouldn’t it make sense for that too to be contained within the div element?
I tried both versions, nesting the table element within the div element, as well as placing it independently after the div element at the same level within the body. Both versions were accepted by the system. So, I guess the question is more about best practice?
Thank you in advance.
1 Like
Best practice, usability and accessibility aside, the biggest decisions are design based as well as work flow. There is no hard and fast rule and very often things come out looking the same way. What we don’t see right off is the behavior and how CSS can be implemented to serve our design. Above I mention giving a table a wrapper element to separate table styling from page styling. That’s not a rule, but s a suggestion to separate concerns within the page structure. We don’t want to make a data table a style element owing to its practical nature. We can make it fit the page by styling its container.
Bottom line, in the early stages toss away the so called rule book. Learn how the pieces fit together, how to build up structure that presents like an outline, how to work with minimum structure and CSS, how to, how to, how to. Forget about the why’s and wherefore’s.
4 Likes
So I was able to determine where to place the . The thing is, I do not know when to make it a child or not. When I checked my solution it was directly under the
.
So when is something a child of something and when is it not? Can someone explain this a bit better for me to understand?
Children are any elements anywhere in the tree that descends from the selected ancestor. To illustrate,
<body>
<main>
<section>
<article>
<header></header>
<main>
<section>
<h1></h1>
<p></p>
</section>
and so on. We can see how this could play out. Every element above is a child of <body>.
The ancestor of everything is <html></html>. The mother ship.
On the whole, our entire document is treated as a family tree. The parent is the element that contains an element, the child. This is what brings about the underpinnings of CSS, inheritance. Children inherit from their parents, including ancestors.
Consider,
html {
font-size: 100%;
}
body {
font-size: 1em;
}
The font-size of the P element nested way down there will be 1em as inherited from BODY. The H1 will be relative to BODY, but double, as the default style sheet dictates.
In this example we tell HTML to poll the user style sheet and system settings for the font size that is set on the local machine. That becomes the reference point so the user can expect the same size standard in this UX. 100% means one to one correlation. If the user’s font is set to 32px, the base font-size for the UX is the same. That now becomes the definition of 1em, which is the adopted font-size of the BODY. Unless directed otherwise by their closer parents, the entire document will inherit this size reference.
2 Likes
Do you have any good resources for more complex table practice? I can get where you are coming from when you say we need to know this well. Thank you.
1 Like
Hahahah I know right? 
I agree I was trying to figure out where the stylesheet it was referencing was located - it isn’t showing up as a separate file, I can’t even see the little folder icon on this exercise, so where is it?