the_oliver Posted May 25, 2008 Share Posted May 25, 2008 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 https://forums.phpfreaks.com/topic/107219-basic-table-layout/ Share on other sites More sharing options...
Fadion Posted May 26, 2008 Share Posted May 26, 2008 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 https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-549855 Share on other sites More sharing options...
ToonMariner Posted May 26, 2008 Share Posted May 26, 2008 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 https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-549864 Share on other sites More sharing options...
haku Posted May 26, 2008 Share Posted May 26, 2008 The whole point of CSS is that you don't need to use tables to lay out your page when you are using CSS. So filling a whole page with a table while using CSS is counter productive. Link to comment https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-549993 Share on other sites More sharing options...
s_ff_da_b_ff Posted June 11, 2008 Share Posted June 11, 2008 The whole point of CSS is that you don't need to use tables to lay out your page when you are using CSS. So filling a whole page with a table while using CSS is counter productive. So if your not using tables then what are you using to layout the page?? Link to comment https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-563069 Share on other sites More sharing options...
haku Posted June 12, 2008 Share Posted June 12, 2008 CSS! That's what it's for. Cascading Style Sheets. They style the page. Link to comment https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-563580 Share on other sites More sharing options...
s_ff_da_b_ff Posted June 12, 2008 Share Posted June 12, 2008 Blah haku you confuse me Link to comment https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-563813 Share on other sites More sharing options...
haku Posted June 12, 2008 Share Posted June 12, 2008 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 https://forums.phpfreaks.com/topic/107219-basic-table-layout/#findComment-563830 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.