PDA

View Full Version : Table Help



lukehoare
09-17-2011, 01:11 AM
Hi all,
I'm making a table of 100 squares but I need each square to be width="85" height="89" what is the easiest way to get all 100 squares the same size.

I have put together a code please could you check it over and make sure it will work. and also if you could help me put it in my code with the rest.

table {
width: 861px;
}

td {
width: 85px;
height: 89px;
overflow: hidden;
padding: 0;
border: 1px solid;
}



Thank you

Kremlin
09-17-2011, 09:26 AM
I'm not completely sure on this, but I don't think you need to / should define the width of the table. It's width will be set just by the cells themselves.

[Edit] i know nothing about tables in html and css, don't take any of my advice

Kremlin
09-17-2011, 10:57 AM
oh, did some more research and discovered the answer:

table{
table-layout:fixed;
}

vikram1vicky
09-17-2011, 11:17 AM
I suggest you to use <div>'s table if you want fixed width/height boxes and don't want to let them increase their width/height according to content.

Because by default, overflow property won't work for table cells...

lukehoare
09-17-2011, 11:43 AM
I suggest you to use <div>'s table if you want fixed width/height boxes and don't want to let them increase their width/height according to content.

Because by default, overflow property won't work for table cells...

Well idk what to put in my code. I just want all the 100 squares the same size.

vikram1vicky
09-17-2011, 11:50 AM
Following is same code, which will work in all browsers :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0;}
table {
/*border-collapse:collapse;*/
}
table td {
width:85px;
height:89px;
border:1px solid #000;
margin:10px;
}
</style>
</head>

<body>
<table>
<tr>
<td>tum kya kar rahe ho, </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

lukehoare
09-17-2011, 12:03 PM
How do you now that it works with all browers?

Kremlin
09-17-2011, 12:48 PM
did you try table-layout:fixed?

vikram1vicky
09-17-2011, 01:18 PM
How do you now that it works with all browers?


I don't think so there should be question like this. however, for your clarification, I tested in all major browsers and than posted here.

We all are here to do help or get help from each other, so we should have trust on each other :)

lukehoare
09-18-2011, 12:25 AM
Hi, So that code will work fine then, also how do I set my website so any screen size are able to see it I mean so if your on 10inch notebook your will be able to see the whole site without going left to right.