Member Avatar for RJFoster79

Index.php

<?php include ('Secure_Page_Script.php'); ?>
<!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>Crusade Gaming | Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<br />
<br />
	<table id="Header"  border="0">
		<tr>
			<?php include ('template/Sub_Header_1.php'); ?>
			<?php include ('template/Sub_Header_2.php'); ?>
		</tr>
	</table>
<br />
<br />
<table id="MainBody" border="0">
  <tr>
    <td id="Side_Menu_1"><?php include ('template/Menu/Menu_1.php'); ?></td>
	<td id="News"><?php  include ('template/Body/News.php'); ?></td>
	<td id="Google_AD"><?php  include ('template/Google/AD.php'); ?></td>
  </tr>
</table>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

body {
	background: #000000 url('template/images/BodyBg.png') repeat-x scroll top left;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #555555;
}

#Header{
width:96%;
margin-left:2%;
margin-right:2%;
background:none
}

#Sub_Header_1 {
	background:none;
	width:50%;
	height:90;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #555555;
}

#Sub_Header_2 {
	background:#BDB3B3;
	width:50%
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #555555;
}

#MainBody {
width:96%;
margin-left:2%;
margin-right:2%;
background:none;
}

#Google_AD {
	width:15%;
	background:#B7B2B2;
	font-size: 13px;
}

#Side_Menu_1 {
width:15%;
background:#B7B2B2;
}

#News {
width:66%;
background:#B7B2B2;
}

Sub_Header_1

<td id="Sub_Header_1"><a href=""><img src="" alt="CrusadeGaming" longdesc="" border="0" /></a></td>

Sub_Header_2

<td id="Sub_Header_2"><div align="center">Google AD Space</div></td>

Menu_1.php

<div align="center">Menu</div>

News.php

<div align="center">
  <p>News</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

AD.php

<div align="center">Google AD Space</div>

ok so, I gave you all of this code before because I am having a bit of a problem designing. In index.php there is

<table id="MainBody" border="0">
  <tr>
    <td id="Side_Menu_1"><?php include ('template/Menu/Menu_1.php'); ?></td>
        <td id="News"><?php  include ('template/Body/News.php'); ?></td>
        <td id="Google_AD"><?php  include ('template/Google/AD.php'); ?></td>
  </tr>
</table>

I would like more spacing in-between all of theses I have tried and tried but couldn't find a way if someone wouldn't mind looking at my code and helping me figure this out that would be sweet

  • 2 Contributors
  • 1 Reply
  • 203 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Jaseva

Dani AI

Generated

Quick recap: the page uses a three-column table for layout and you want visible spacing between the columns. is right — adding internal spacing is the simplest fix — but there are a few ways to do it and a couple of CSS bugs in the posted stylesheet that can break things unexpectedly.

Immediate fixes (no markup rewrite)

  • If you want gaps between the table cells without changing the cell backgrounds, use table-level spacing rather than only cell padding:
#MainBody {
  border-collapse: separate;
  border-spacing: 12px; /* space between cells (horizontal and vertical) */
}

Note: border-spacing shows the table’s background through the gap. If you want each cell to keep its background color and have the interior content inset, wrap cell contents in a little inner container and add padding to that container:

.cellInner { padding: 12px; }

Then place your content inside <div class="cellInner">...</div> inside each td.

Two quick stylesheet gotchas to fix

  • Missing semicolons or units will cause the browser to ignore rules. For example, add px to numeric heights and make sure each declaration ends with a semicolon so the parser doesn’t skip following properties.

Longer‑term suggestion

  • Tables for layout are brittle. Converting the structure to CSS Flexbox or Grid gives precise spacing (via gap) and easier responsive behavior. Small steps: replace the outer table with a container display: flex, give the two side columns fixed widths and let the center flex-grow. That will make the layout easier to maintain and mobile-friendly.

Final tips

  • After changes, validate the CSS/HTML and test different viewport widths. Also check that the sum of your percentage widths plus gaps doesn’t force wrapping — reduce column widths slightly if you see overflow.
Member Avatar for Jaseva

You could add padding to the table cells.

#MainBody td { padding: 10px; }

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.