Solved

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

Posted on 2008-06-23
6
567 Views
Last Modified: 2011-10-19
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
0
Comment
Question by:JapyDooge
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 21847246
Whats the problem in here ?
0
 
LVL 82

Expert Comment

by:hielo
ID: 21847365
>> 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

0
 
LVL 6

Author Comment

by:JapyDooge
ID: 21848454
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.
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 6

Author Comment

by:JapyDooge
ID: 21848468
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.
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21848547
See if this is what you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
 
 
<html>
<head>
 <title>Map</title>
<style type="text/css">
<!--
table{background-color:black;}
td{background-color:white;width:100px;height:100px;border-color:black;}
-->
</style>
</head>
<body>
<table id="map" border=1 cellspacing="20" bordercolor="#000000">
<tr><td>Tfsdfsdfsf fd sf fsdfsdafsdfdfafds fsd</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

0
 
LVL 6

Author Closing Comment

by:JapyDooge
ID: 31469797
Woow, great, thanks! This is exactly what i was looking for!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question