Jump to content

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


vmars316
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

<!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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hello & Thanks ,

Still learning via dsonesk 's example code .

 

I want to modify it so it looks like this:

<header >

<nav><section>

<section >

<footer >

 

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

Link to comment
Share on other sites

This code is closer to

But as soon as i add another section

I want to modify it so it looks like this:

<header >

<nav><section>

<section >

<footer >

It shows shows as

<header >

<nav><section><section>

<footer >

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

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Thanks All ,

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

Here are the pages I find most useful :

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 .

 

 

  1. 1st header City Gallery
    1. nav
    2. 1st section London
    3. 2nd section Paris
      1. 1st article
      2. 2nd article

      [*]3rd section Tokyo

      1. 3rd article Places to see

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

        1. nav
        2. 1st section London
        3. 2nd section Paris

          [*]3rd section Tokyo

          1. 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

        4. aside contacts
    4. 1st article
    5. 2nd article
aside contacts
Edited by vmars316
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...