Coder Perfect

How can I get rid of the extra space between the rows and columns in a table?


How can I get rid of the additional space in the table between the rows and columns?

On the table, tr, and td, I’ve tried altering the margin, padding, and different border attributes.

I want all of the photos to be next to one other, as if they were one large image.

What should I do about it?


table {
  border-collapse: collapse;


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">

  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>

  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    <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 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 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 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 class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>



Asked by Zach Galant

Solution #1

To add to vectran’s response, the table element’s cellspacing property must also be set for cross-browser compatibility.

<table cellspacing="0">

EDIT (I’m expanding this 5 years later for completeness’ sake:):

Cellspacing has to be set explicitly as a table attribute in Internet Explorer 6 and 7, or else the spacing wouldn’t disappear.

The CSS property border-spacing is supported by Internet Explorer 8 and later versions, as well as all other common browsers – Chrome, Firefox, and Opera 4+.

You can use the code sample below to implement a cross-browser table cell spacing reset (supporting IE6 as a dinosaur browser):

Answered by easwee

Solution #2

Include the following CSS reset in your CSS code: (From this point)

   v2.0 | 20110126
   License: none (public domain)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
body {
    line-height: 1;
ol, ul {
    list-style: none;
blockquote, q {
    quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
table {
    border-collapse: collapse;
    border-spacing: 0;

It will effectively reset the CSS, removing the padding and margins.

Answered by vectran

Solution #3

This was effective for me:

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

Answered by pagetribe

Solution #4

Use the following for photos in td:

display: block;

For me, this frees up some room.

Answered by Jacob Bertelsen

Solution #5

Just to add to Jacob’s response, for image in td,

body {line-height: 0;}
img {display: block; vertical-align: bottom;}

Most email applications, including Gmail, support this. However, Outlook is not one of them. Two further stages are required for outlook:

table {border-collapse: collapse;}

and make each td element the same height and width as the photos it contains. As an example,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="" width="600" />

Answered by hexinpeter

Post is based on