How to layout my html page, Tables html/div/html5/css ?

vmars316 · August 16, 2015

Hello & Thanks ,

Need some help on how to layout my html page .

Html/table vs div vs html5/table vs css/table .

Basically , I want Page to look like .

Table:

[ Cell ]

[ Cell ] [ Cell ]

[Cell] [ Cell ]

[ Cell ]

I'd rather not use Headers H1............H6 .

Of 'Tables html/div/html5/css' which is most compatible for all browsers ,

And which may have the most longivity , as far as standards go ?

I would like to be able to pick one (html/div/html5/css) and stick with it down the road .

Thanks...Vern

Ingolme · August 16, 2015

You seem to be making distinctions where there aren't any. CSS isn't expected to change for a long time. The names of the HTML elements you use don't have any effect on the layout as long as you're using CSS properly

You should be using <h1> - <h6> elements to structure your content, Google and other search engines will give you a better ranking if you use them properly. If you don't like their default style, just change its appearance with CSS.

The most modern practice for layout is to use float, width, margin and padding to lay things out on the page. Be sure to use the appropriate elements for the context, such as <section>, <article>, <p>, <figure> and so on.

dsonesuk · August 16, 2015

Tables should only be used to show data in tabular layout, so div would be better option, but with html5 you have new header, aside, footer, section elements which would be better option than the div elements if these are used for these specific areas.I don't understand about headers, these should only be used as main title (h1) and lower sub title importance for content of the page, these also help for SEO purposes.

dauruk0512 · August 16, 2015

i suggest to you using div cause div can customize what we what but you should understand

CSS selector
TAG HTML

Then if you are getting progress let's move html5 like moderator above said using tag header, article, footer it standar for designer

vmars316 · August 16, 2015

Tables should only be used to show data in tabular layout, so div would be better option, but with html5 you have new header, aside, footer, section elements which would be better option than the div elements if these are used for these specific areas.

The most modern practice for layout is to use float, width, margin and padding to lay things out on the page. Be sure to use the appropriate elements for the context, such as <section>, <article>, <p>, <figure> and so on.

Ok , it seems that you are both aiming me at html5 . Is this correct ?

With the code below , I get pretty much what I want .

<!DOCTYPE html><html><head><style>table, th, td {    border: 1px solid black;}</style></head><body><table style="width:100%">  <tr>    <th>Welcome to myFavs Bookmark Manager !</th>       </tr></table><table style="width:100%">  <tr>    <td width="40%">myFavs.png</td>    <td width="60%">The width attribute is not supported in HTML5. Use CSS instead. </td>  </tr></table><table style="width:100%">  <tr>    <td width="10%">Home<br>About<br>Links</td>    <td width="90%">The width attribute is not supported in HTML5. Use CSS instead.</td>  </tr></table><table style="width:100%">  <tr>    <td width="100%">The width attribute is not supported in HTML5. Use CSS instead.</td>  </tr></table><p>The width attribute is not supported in HTML5. Use CSS instead.</p></body></html>

But will my above code be obsolete someday ?

And could it be frowned upon by Google or others ?

Likewise for html5 . ?

Also , can html,css,html5,javascript,dhtml,xhtml

all be used in the same webpage ?

Thanks...Vern

dsonesuk · August 16, 2015

Again tables should not be used for layout of webpage, only for showing informatoin in tabular format, it renders differently to other elements by processing/showing table cell content only when closig table tag </table> is rendered.Html is used in all webpages including recent doctypes x/html 4 which was then superceded by html5, dhtml is dynamic html usually refers to a webpage using code such as javscript to produce content or enhance the website.CSS is used for presentational purposes, using css externally, preferably NOT inline as you have, using id or class to reference specific elements that makes design easier to maintain.

vmars316 · August 17, 2015

Thanks dsonesuk , I am starting to get the picture .

Could you show me a simple html/css presentation of the following structure :

[ Cell ]

[ Cell ] [ Cell ]

[Cell] [ Cell ]

[ Cell ]

Thanks...vm

dsonesuk · August 17, 2015

<!DOCTYPE html><html><head><style>body, html {margin:0; padding: 0}body {background-color: yellow;}#wrapper {width: 80%; max-width: 1280px; margin: 0 auto; }header {    background-color:black;    color:white;    text-align:center;    padding:5px;	 }section {        background-color:#eeeeee;overflow: hidden;          padding:10px;}footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px;	 	 }.two_col {width: 50%; float: left; background-color: lime; }.two_col + .two_col {background-color: blue;}.two_col > * {padding: 10px; }</style></head><body><div id="wrapper"><header><h1>City Gallery</h1></header><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><footer>Copyright © W3Schools.com</footer></div></body></html>

vmars316 · August 17, 2015

Thanks dsonesuk , this is a great help ! ...vm

vmars316 · August 18, 2015

Hi dsonesuk ,

I have spent the entire day scouring the internet trying to figure out what all this means .

.two_col {width: 50%; float: left; background-color: lime; }.two_col + .two_col {background-color: blue;}.two_col > * {padding: 10px; }

I see the results of course , but don't understand what applies to what .

And I am quite surprised that <div and <p don't cause a line break , or <br> or some such .

Can you explain all that to me , or aim me at a w3schools example .

Thanks...vm

Ingolme · August 18, 2015

When a block element has float applied to it, it can be placed horizontally next to other elements.

As for the meaning of the CSS selectors, they're all explained in the selectors reference.

vmars316 · August 18, 2015

Thanks Ingolme ,

Just what I needed !

...vm

vmars316 · August 18, 2015

Hello & Thanks ,

Still learning via dsonesk 's example code .

I want to modify it so it looks like this:

So partial code looks like this (full code follows);

<header><h1>City Gallery</h1></header><section><nav>       <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About Us</a></li>            <li><a href="#">Contact Us</a></li>        </ul></nav><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section></section><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><footer>

Full code here :

<!DOCTYPE html><html><head><style>body, html {margin:0; padding: 0}body {background-color: yellow;}#wrapper {width: 80%; max-width: 1280px; margin: 0 auto; }header {    background-color:black;    color:white;    text-align:center;    padding:5px;	 }nav {    line-height:30px;    background-color:#eeeeee;    height:300px;<!--     width:100px;  -->    width:25%    float:left;    padding:5px; }section {        background-color:#eeeeee;          overflow: hidden;          padding:10px;<!--		  float:left; -->}footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px;	 	 }.two_col {width: 50%; float: left; background-color: lime; }.two_col + .two_col {background-color: blue;}.two_col > * {padding: 10px; }</style></head><body><div id="wrapper"><header><h1>City Gallery</h1></header><section><nav>       <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About Us</a></li>            <li><a href="#">Contact Us</a></li>        </ul></nav><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section></section><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><footer>Copyright © W3Schools.com</footer></div></body></html>

Can I do this with just the header, nav, section, footer (& maybe aside) elements .

Or do I have to use something like .section1 , section2

Thanks..vm

vmars316 · August 18, 2015

This code is closer to

But as soon as i add another section

I want to modify it so it looks like this:

It shows shows as

Pls , how can I fix this ?

<!DOCTYPE html><html><head><style>header {    background-color:black;    color:white;    text-align:center;    padding:5px; }nav {    line-height:30px;    background-color:#eeeeee;    height:300px;    width:100px;    float:left;    padding:5px; }section {    width:350px;    float:left;    padding:10px; }footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px; }</style></head><body><header><h1>City Gallery</h1></header><nav>       <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About Us</a></li>            <li><a href="#">Contact Us</a></li>        </ul>London<br>Paris<br>Tokyo<br></nav><section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><footer>Copyright © W3Schools.com</footer></body>

Thanks..vm

vmars316 · August 18, 2015

Here's the layout that i am looking for .

Except i want the aside on the left side .

http://www.developer.com/imagesvr_ce/3977/Figure01.png

Thanks...vm

Hilal · August 24, 2015

You can make layout on table which is visually same as dive 80%.

vmars316 · August 24, 2015

Thanks Hilal .

I tried all sorts of table , div's etc., combinations but nuttin' worked for me .

By nuttin' worked , I mean it didn't outline correctly .

By outline I mean , the outline of html5/css3 that the browser makes in order to read the info correctly , especially search engines .

I will make a general reply (below) to All those who have helped me .

Here is the site I submitted my html to , in order to get an Outline of my html .

https://gsnedders.html5.org/outliner/

..vm

vmars316 · August 24, 2015

Thanks All ,

I have been studying up on html5/css3 . See my resulting code below .

Here are the pages I find most useful :

http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

http://learnlayout.com/toc.html

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

https://gsnedders.html5.org/outliner/

For the examples above , though they are greatly appreciated , I find using the div's andthe two_cols , and table's approach , very confusing . The sequence/positioning of the html code for two_cols I find baffling .

So I eventually tried to create an html.page using only the html5 sectioning elements .

The acid test of course is , does it Outline correctly (the way I want it to) ?

Here is the output of the Outliner (https://gsnedders.html5.org/outliner/) followed by my code .

1st header City Gallery

nav
1st section London

2nd section Paris

1st article
2nd article

[*]3rd section Tokyo

3rd article Places to see

[*]1st footer [*]2nd header City Gallery

nav
1st section London

2nd section Paris

[*]3rd section Tokyo

3rd article Places to see

[*]2nd footer

Sorry about the intermittent large font , I couldn't fix it .

Here is the code :

<!DOCTYPE html><html><head><style>header {    background-color:black;    color:white;    text-align:center;    padding:5px; }nav {    line-height:30px;    background-color:#eeeeee;    height:300px;    width:20%;    float:left;    padding:5px; }section {    width:20%;    float:left;    padding:10px; 	position:relative;}footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px; }</style></head><body><header><h1>1st header of  'City Gallery'</h1></header><nav >    <h1>nav</h1>       <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About Us</a></li>            <li><a href="#">Contact Us</a></li>        </ul></nav><section><h1>1st section London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><section>  <h1>2nd section Paris</h1>  <article>    <h1>1st article</h1>  </article>  <article>    <h1>2nd article</h1>  </article></section><section>  <h1>3rd section Tokyo</h1>  <article>      <h1>3rd article  Places to see</h1>  <aside>  <h1>aside contacts</h1></aside> </section><footer>  <h1>1st footer</h1>Copyright © W3Schools.com</footer>  <br> <p>Needs  'nav' above and a new 'header' here (as coded without div s) in order to use a 2nd 'nav' . <br> Of course I could just make the 1st 'footer' invisible . </p>  <br><header><h1>2nd header of  'City Gallery'</h1></header> <nav>    <h1>nav</h1>       <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About Us</a></li>            <li><a href="#">Contact Us</a></li>        </ul></nav><section><h1>1st section London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><section>  <h1>2nd section Paris</h1>  <article>    <h1>1st article</h1>  </article>  <article>    <h1>2nd article</h1>  </article></section><section>  <h1>3rd section Tokyo</h1>  <article>      <h1>3rd article  Places to see</h1>  <aside>  <h1>aside contacts</h1></aside> </section><footer>  <h1>2nd footer</h1>Copyright © W3Schools.com</footer></body>

I would expect that google would read it ok , and not penalize that page .

If anyone sees any fault with my code , please eplain it to me .

Thanks All ..Vern

aside contacts

1st article
2nd article

aside contacts

Edited August 24, 2015 by vmars316

How to layout my html page, Tables html/div/html5/css ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in