Link to home
Start Free TrialLog in
Avatar of JapyDooge
JapyDoogeFlag for Netherlands

asked on

[HTML/CSS] Using CSS to give a table borders and a fixed width/height

I have a huge table (little example attached) that should have a lot of cells all being 100x100px with a 20px border between them.

I trought the <table> tag would be the easyst way to create this, but if it's possible doing by <div> tags thats okay for me too. The page is generated by PHP and sometimes theres a cell thats 220x220px (using 4x100px + border).

See the attached picture, there you can cleary see that my current code does'nt work, how strange...
<html>
<head>
 <title>Map</title>
 <style>
  #map{
   border-collapse: collapse;
   border-top: #000000 20px solid;
   border-right: #000000 20px solid;
   border-bottom: #000000 20px solid;
   border-left: #000000 20px solid;
  }
  td{
   border-top: #000000 20px solid;
   border-right: #000000 20px solid;
   border-bottom: #000000 20px solid;
   border-left: #000000 20px solid;
   width: 100px;
   height: 100px;
   text-align: center;
  }
 </style>
</head>
<body>
<table id="map">
<tr><td>T</td><td>E</td><td>S</td><td>T</td><td>1</td></tr>
<tr><td>T</td><td>E</td><td colspan=2 rowspan=2>S</td><td>2</td></tr>
<tr><td>T</td><td>E</td><td>3</td></tr>
<tr><td>T</td><td>E</td><td>S</td><td>T</td><td>4</td></tr>
</table>
</body>
</html>

Open in new window

wrong.png
Avatar of Ali Kayahan
Ali Kayahan
Flag of Türkiye image

Whats the problem in here ?
Avatar of hielo
>> sometimes theres a cell thats 220x220px (using 4x100px + border).
If the problem is that "big square", then the reason is because of the rowspan and the colspan. This is the table code you should be generating:
<table id="map">
<tr>
	<td>T</td>
	<td>E</td>
	<td>S</td>
	<td>T</td>
	<td>1</td></tr>
<tr>
	<td>T</td>
	<td>E</td>
	<td>S</td>
	<td>T</td>
	<td>3</td></tr>
<tr>
	<td>T</td>
	<td>E</td>
	<td>S</td>
	<td>T</td>
	<td>3</td></tr>
<tr>
	<td>T</td>
	<td>E</td>
	<td>S</td>
	<td>T</td>
	<td>4</td></tr>
</table>

Open in new window

Avatar of JapyDooge

ASKER

The big square is the good thing, thats the 220x220px cell but, those cell's are'nt 100x100, they are 102x92 or 102x83 or whatever, that's each row completely random. I need the _white space_ in a cell to be exact 100x100px or exact 220x220px for the bigger ones.
See for example the 2 and 3 row, those are'nt 100x100, the rest of the rows are neither 100x100 but 2 and 3 are the smallest.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Woow, great, thanks! This is exactly what i was looking for!