...

View Full Version : Table Help



lukehoare
09-17-2011, 12: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, 08: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, 09:57 AM
oh, did some more research and discovered the answer:

table{
table-layout:fixed;
}

vikram1vicky
09-17-2011, 10: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, 10: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, 10: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, 11:03 AM
How do you now that it works with all browers?

Kremlin
09-17-2011, 11:48 AM
did you try table-layout:fixed?

vikram1vicky
09-17-2011, 12: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-17-2011, 11:25 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum