• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 161
  • Last Modified:

Tables a thing of the past?

so I have been reading that tables are no longer encouraged in html.  Why is this and what should be used instead?
0
flashactions
Asked:
flashactions
  • 2
1 Solution
 
zeroxpCommented:
table is still a very important and useful element. it's perfect for tabular data.

i think what you've read is just not recommend use that for layout. that is because table will keep the table layout even when the stylesheet is disabled or not attached. you can try use stylesheet to layout your page. but you still can use table because it is so easy and it also able to produce some clean layout markup.
0
 
flashactionsAuthor Commented:
how are style sheets used exactly to take the place of tables?  the code centers and stuff like that?  ist it somethine an individual font setting for eash style sheet?  im not sure.
0
 
zeroxpCommented:
there are many things you can do with css stylesheet. have a look on www.w3schools.com. that is a good source of information for web dev. there are many tutorials on css as well as on other web standards.

this is a very simple page layout you can do with css. sure there could be mant tweaks you can do on this page:

<html>
<head>
<title>Simple Layout Test</title>
<style type="text/css">
body {margin:0; padding:0; font-family:arial; font-size:12px;}
#mainWrapper {text-align:center;}
#innerWrapper {text-align:left; margin-left: auto; margin-right: auto; width:90%;}
#headerContainer {background-color:#206ba4; color:#000;}
#footerContainer {background-color:#e7e4d3; color:#000;}
#contentContainer
{
   background-color:#999;
   color:#000;
}
#layoutBlock_01
{
   width:20%; background-color:#bedf5d; color:#000;
   float:left; margin-left:0;

}
#layoutBlock_02
{
   width:80%;
   float:left; margin-left:0;
}
#contentContainer:after
{
   clear:both; content:'&nbsp'; display:block; height:0; visibility:hidden;
}
#contentContainer
{
   display: inline-block;
}
/*\*/
#contentContainer
{
   display:block;
}


</style>
</head>
<body>
<div id="mainWrapper">
<div id="innerWrapper">
   <div id="headerContainer">header</div>
   <div id="contentContainer">
      <div id="layoutBlock_01">
         <p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
      </div>
      <div id="layoutBlock_02">
         Main Content
      </div>
   </div>
   <div id="footerContainer">
   footer
   </div>
</div>
</div>
</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now