tags:

views:

417

answers:

5

how do I remove the extra space between the rows and columns in the table.

I've tried changing the margin, padding, and various border properties on the table and tr and td.

I want the pictures to all be right next to each other to look like one big image.

how should I fix this?

style.css

table {
    border-collapse:collapse;

}

index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Tera Byte Video Game Creation Camp</title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
  </head>
  <body>
      <table class="mytable" align="center">
         <tr class = "header"><td colspan="3"><img src="images/home_01.png" /></td></tr>
         <tr class = "top"><td colspan="3"><img src="images/home_02.png" /></td></tr>
         <tr class = "link-row">
             <td><img src="images/home_03.png" /></td>
             <td><img src="images/home_04.png" /></td>
             <td><img src="images/home_05.png" /></td>
         </tr>
         <tr class = "link-row">
              <td><img src="images/home_07.png" /></td>
              <td><img src="images/home_06.png" /></td>
              <td><img src="images/home_08.png" /></td>
          </tr>
          <tr class = "link-row">
               <td><img src="images/home_09.png" /></td>
               <td><img src="images/home_10.png" /></td>
               <td><img src="images/home_11.png" /></td>
           </tr>
           <tr class = "link-row">
                <td><img src="images/home_12.png" /></td>
                <td><img src="images/home_13.png" /></td>
                <td><img src="images/home_14.png" /></td>
            </tr>
            <tr class = "bottom"><td colspan="3"><img src="images/home_15.png"/ ></td></tr>
      </table>

  </body>
</html>
A: 

Have you tried removing the TRs that have a colspan and see if it changes anything?

I have experienced colspans and rowspans to be pretty nasty when it comes down to accurate table-designs. If your images look alright without the colspan-TRs, I'd start from there and build a nested tableset.

Also your style.css doesn't seem to be complete, maybe there's something wrong there? I'd at least add padding: 0; margin: 0; to the table (or to the class "mytable"). Make sure, your images don't have spaces and/or borders, too (e.g. by adding img { border: 0; } to your stylesheet).

Select0r
removing the TR's with a colspan does nothing. adding the padding and margin does nothing either
zgalant
A: 

setting Cellpadding and cellspacing to 0 will remove the unnecessary space between rows and columns...

kvijayhari
+1  A: 

Add this CSS reset to your CSS code: http://meyerweb.com/eric/tools/css/reset/reset.css

It'll reset the CSS effectively, getting rid of the padding and margins.

vectran
thanks. that worked.
zgalant
There is a comment if you read saying:/* tables still need 'cellspacing="0"' in the markup */
easwee
yeah, that was part of it too. thanks
zgalant
+1  A: 

You have to set cellspacing on table element in the markup.

<table cellspacing="0">
easwee
that fixed part of it. thanks
zgalant
A: 

This worked for me:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}
pagetribe