PDA

View Full Version : Cell size in table



yoda69
Apr 9th, 2010, 05:04 PM
Hey,

Is there a way to make a cell in a table smaller than 1px over 1px. I have a really large table that I need to show (10,000 cells) and the page just take too long to load.

example can be seen here:

http://www.smilebga.com/big/big.php

Thanks

VIPStephan
Apr 9th, 2010, 06:27 PM
It doesn’t have anything to do with the visible size of cells, it’s a matter of filesize, i. e. the pure amount of cells. Currently your page is about 1MB big which is really pretty big for an HTML file. May I ask what the purpose of the whole thing is?

Excavator
Apr 9th, 2010, 06:44 PM
Hello yoda69,
You should try this on a smaller scale and get it working better. Like VIP says, the HUGE filesize is going to load slow no matter what but the errors can't be speeding it up any.

Validator crashed on it but just by my eye I count over 20,000 errors :eek:


All those id's should be classes. An id gets used once per page, that's how it works.
Your 1680 px wide table is blowing out past your 800px wide form and #container.
These cells are 10px by 15px. Have you tried 1px by 1px? Have you ever tried clicking on a 1x1 cell?

yoda69
Apr 9th, 2010, 08:22 PM
Okay guys,
Thanks for your replies.

I'm a psychologist and I'm creating this page as part of an online experiment that I am planning to run soon. So cooding is unfortunately not one of my strongest abilities.

As to the specifications of my experiment. I need to have 10,000 cells in that table. Each one of them will enable a user to select several colors that will be assigned to the cell.

I will try using your help. However, Excavator, I don't understand why you say that my cells are 10px by 15px. I am sure that my style sheet specifies 1px over 1px, but maybe I am missing something?

Thanks

Excavator
Apr 9th, 2010, 08:37 PM
Excavator, I don't understand why you say that my cells are 10px by 15px. I am sure that my style sheet specifies 1px over 1px, but maybe I am missing something?

Thanks

This is the CSS I see on my end -
/*
Design by Bugy
*/

* {

}

body {
background:#9999FF;
}

#container {
width:800px;

}

#cell {
width:10px;
height:10px;
border:solid 1px #000000;
}


a#test {
display:block;
width:10px;
height:10px;
text-align:center;
text-decoration:none;
padding-top:5px;
font-family:arial;
font-size:16px;
color:#ffffff;
}

a#test:hover {
background:#ffffff;
color:#000000;
}

You can see your 10px square #cell is overrun by the extra 5px padding you put on the anchor... which makes each cell 10px wide by 15px high.

=======================

Make your cells 1px wide by 1px high by making these changes I've highlighted in red -
/*
Design by Bugy
*/

* {

}

body {
background:#9999FF;
}

#container {
width:800px;

}

#cell {
/*width:10px;
height:10px;*/
border:solid 1px #000000;
}


a#test {
display:block;
width:1px;
height:1px;
text-align:center;
text-decoration:none;
/*padding-top:5px;*/
font-family:arial;
font-size:16px;
color:#ffffff;
}

a#test:hover {
background:#ffffff;
color:#000000;
}

The /* */ marks are comments (http://www.w3schools.com/Css/css_syntax.asp). Everything inside those marks is ignored.

yoda69
Apr 10th, 2010, 12:50 AM
Okay thanks, will work on it tonight and let you know how it came out!