Jump to content

Basic table layout.


the_oliver

Recommended Posts

Hello,

 

Im trying to get to grips with css at the moment, but im haveing a little trouble getting a table to do what i want it to!

Im trying to create a table which takes up the whole of the browser window.  It should also have a 2px blue border down the right and left side, and leave no space at the top or bottom...

 

However i get a table which fills most of the way accross, but leaves and edge, (not blue!), and does not touch the top or bottom of the page!

 

My Code is:

<style type="text/css">
<!--
body {
background-color: #E6E6E6;
}
.main_table {
background-color: #FFFFFF;
border-left: 10px;
border-right: 10px;
border-right-color:#1A4390;
border-left-colour:#1A4390;
width: 100%;
height: 100%;
top: 0px;
}
-->
</style></head>
<body>
<table class="main_table">
  <tr>
    <td> </td>
  </tr>
</table>

 

 

Can any one point me in the right direction?

 

Many Thanks!

 

Link to comment
Share on other sites

U can set margin and padding to 0 for the body to remove all the unwanted space from the browser window:

 

body{
    margin:0;
    padding:0;
}

 

The height of an element is dynamic to the content inside that element. So setting a height:100% is pointless. There are ways to overcome this but it isnt actually a good idea. If ure using the table for tabular data then its ok, otherwise use divs for a pure css approach.

Link to comment
Share on other sites

if you are just getting started with css then I would suggest you use this opportunity to drop table based layouts also.

 

the height of an element is dictated either by an absolute value or a percentage of its parents available space - IMO height should NEVER be defined for any element that will have variable amounts of content within....

Link to comment
Share on other sites

  • 3 weeks later...

I gave you the answer you asked for! Everything on the page can be laid out using CSS. They are style sheets - they are used to style the page.

 

To see an example of what I am talking about, download firefox (if you don't already have it), then download the 'web developer toolbar' plug-in. Next go to yahoo.com, and when you are there, the in the web developer tool bar, click css -> disable styles -> all styles. This turns off the CSS for the page, and you can see what an unstyled tableless page looks like.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.