Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 157
  • 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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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