I did it: Complete! and I used CSS

HTML & CSS
103

See posts #84 and #85 for one possibility.

104

Can you show me an example on jsfiddle of doing this code without utilizing a table? https://jsfiddle.net/eqhdzz73/54/1 I still donā€™t get it.

105

If itā€™s not in a table I donā€™t understand how you would center it in the middle then.

106

Can you reply back to question 98?

107

Important comparison - The vocal objections are to the <table> element and related tags being used to frame and contain non-tabular content. No one is objecting to table behaviors. That is a very significant thing to remember.

You are not displaying tabular data. You are displaying content is a matrix style layout.

Look at the ā€œjust for funā€ code in posts 84 and 85 for that difference.

108

Whatā€™s the name for the kind of table it is?

109

Iā€™m sorry, I do not know which layout you are referring to.

110

This one: https://jsfiddle.net/eqhdzz73/54/

111

OK.

It is a literal table layout. That means it is made using HTML <table> tags.

The big deal is that HTML table tags have semantic significance and are expected to be used to contain tabular data.

You can use other elements (such as divs as shown in posts 84 and 85) and endow them with table behaviors using CSS, that will act just like a table but will not use literal HTML <table> tags. divs have no semantic meaning. (disclaimer: Iā€™m not pushing divs. There may be other tags that are more semantically appropriate, depending on the content. Iā€™m going for neutral territory right now.)

Doing so will calm the circling wildcats and restore a defined balance in the world.

2 Likes
112

I got this far in making a grid without using a table. What am I doing wrong, and can you clean it up? https://jsfiddle.net/eqhdzz73/56/

113

So, then. thatā€™s not a nested table then? Iā€™m not using one?

114

My viewā€¦

Please do not overweigh the concept of ā€œnestedā€ tables. That really is not important at this moment. HTML tables holding non-tabular content is the primary issue. Nesting HTML tables is an extension of that issue. It should not be considered an issue unto itself at this point in the discussion. It distracts from the primary issue of avoiding semantically inappropriate tags for content. Personally, I would downplay the ā€œnested tableā€ bruhaha right now in favor of focusing on the value of using semantically appropriate tags for content. Keep it focussed.

I do not wish to use the code that you posed in #112 to explain the issue. I would like to use one of your table layouts or the ā€œjust for funā€ code instead and continue a longer, focussed converationā€¦ without jumping around.

I will deal with every question that you ask in a methodical manner, but I am not a blinkinā€™ kangaroo. Please respect that.

2 Likes
115

I donā€™t expect an answer right away, I understand you have to look at the code and try to decipher it different ways until you think itā€™s right, and that doesnā€™t happen right away on a flip of a coin.

116

I just wanted to know what the technical terminology would be for that kind of table set up.

117

The content for your layouts is within an HTML table. In order to vertically middle that content box, you placed another table around it whose sole purpose is to vertically middle the inner table. That constitues a ā€œnested tableā€. Hardly worth an uproar since the outer (framing) HTML table can be replace by a <div> or more semantic HTML tag very easily.

So the primary issue that I see is the use of the [inner] table to hold non-tabular content.

118

Can I see an example of that? https://jsfiddle.net/eqhdzz73/54/ Iā€™m sure this would be very useful for other people also.

119

yea, without the the outer table align, it doesnā€™t stay in place. thatā€™s what keeps it in place.

<table align='center' height='100%'>
  <tr>
    <td valign='middle'>
1 Like
120

isnā€™t it the outer table that holds the stuff inside steady?

This isnā€™t outer table?

<table align='center' height='100%'>
  <tr>
    <td valign='middle'>
121

Step one is to delete everything in the HTML that you put there to define the layout of the page and replace it all with tags that define what the content of the page is.

Everything that defines the layout of the page goes in the CSS file - not in the HTML one.

2 Likes
122

I would like to ask you to look at the code that I posted in #84 (not the fiddle in #85). The fiddle does not show the html and body tags and they are an important part of the functionality. That is why I post ā€œworking pagesā€.

Please notice in the CSS that the html and body tags are assigned {height:100%}. With the height of the page defined as being 100%, one can create the 100% tall .outer frame. The child of .outer is styled with table-cell behaviors so it will vertically middle the inner content box the same way that your outer table did. It is the same concept made possible with a simple conversion of tags.

Take your time. Humor me and look at the code in post 84. Does this make sense, please?