Solved

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

Posted on 2008-06-23
6
561 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
  • 3
  • 2
6 Comments
 
LVL 14

Expert Comment

by:ali_kayahan
Comment Utility
Whats the problem in here ?
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
>> 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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 6

Author Comment

by:JapyDooge
Comment Utility
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
Comment Utility
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
Comment Utility
Woow, great, thanks! This is exactly what i was looking for!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now