231

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?

CSS

table {
  border-collapse: collapse;
}

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">
<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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Zach Galant
  • 2,451
  • 2
  • 15
  • 8

14 Answers14

272

Adding to vectran's answer: You also have to set cellspacing attribute on the table element for cross-browser compatibility.

<table cellspacing="0">

EDIT (for the sake of completeness I'm expanding this 5 years later:):

Internet Explorer 6 and Internet Explorer 7 required you to set cellspacing directly as a table attribute, otherwise the spacing wouldn't vanish.

Internet Explorer 8 and later versions and all other versions of popular browsers - Chrome, Firefox, Opera 4+ - support the CSS property border-spacing.

So in order to make a cross-browser table cell spacing reset (supporting IE6 as a dinosaur browser), you can follow the below code sample:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
easwee
  • 15,757
  • 24
  • 60
  • 83
99

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   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'll reset the CSS effectively, getting rid of the padding and margins.

Will Richardson
  • 7,780
  • 7
  • 42
  • 56
vectran
  • 1,961
  • 1
  • 14
  • 17
  • 17
    There is a comment if you read saying: /* tables still need 'cellspacing="0"' in the markup */ – easwee Feb 17 '10 at 09:34
  • 2
    what happens if you are using a lot of css in you page and you don't want to reset it? – Robert Johnstone Oct 18 '11 at 15:47
  • 1
    It's probably best practice to use a reset or some sort of framework and build from there. However in this case you will have to reset each style ie. table { padding: 0px; border: 0px; border-collapse: collapse; etc }.... Checkout http://www.quirksmode.org/css/tables.html for more. – vectran Oct 28 '11 at 09:59
  • You can skip a lot of them since it's only for the tables. – Cai Haoyang Jun 13 '15 at 02:33
  • 49
    This is excessive, doesn't answer the question, and isn't even a full reset. Perhaps isolate the code that's relevant, explain it, and then suggest using a reset. – Sandy Gifford Aug 17 '16 at 16:52
  • `border-spacing` works only if `border-collapse: separate`. So, adding it is not required: https://www.w3schools.com/cssref/pr_border-spacing.asp – Kevin Aug 28 '19 at 09:03
  • why `border-spacing: 0` ? it has no effect when `border-collapse: collapse` – tommybernaciak Jul 08 '20 at 07:48
  • This answer is a god-send. There is so much white space in html that is given to you whether or not you want it or ask for it, and it becomes confusing to deal with. Shouldn't the default be that there is no white space and that you add it as you need it rather than assuming everyone will want what is given to them? – jho Jul 03 '23 at 09:54
76

This worked for me:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}
pagetribe
  • 15,031
  • 3
  • 24
  • 18
58

For images in td, use this for images:

display: block;

That removes unwanted space for me

Jacob Bertelsen
  • 589
  • 4
  • 2
13

Just adding on top of Jacob's answer, for img in td,

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

This works for most email clients, including Gmail. But not Outlook. For outlook, you need to do two steps more:

table {border-collapse: collapse;}

and set every td elements to have the same height and width as its contained images. For example,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>
hexinpeter
  • 1,470
  • 1
  • 16
  • 14
9
table 
{
    border-collapse: collapse;
}

will collapse all borders separating the table columns...

or try

<table cellspacing="0" style="border-spacing: 0;">

do all cell-spacing to 0 and border spacing 0 to achieve same.

have a fun!

Markus Hedlund
  • 23,374
  • 22
  • 80
  • 109
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70
8

For standards compliant HTML5 add all this css to remove all space between images in tables:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}
totallytotallyamazing
  • 2,765
  • 1
  • 20
  • 26
6

Try this,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}
Rakesh Vadnal
  • 975
  • 1
  • 10
  • 22
5

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

Vijay
  • 5,331
  • 10
  • 54
  • 88
5

All I had to do was add:

line-height: 0px;

in my

<tr ...>
Ángel Ramírez Isea
  • 61
  • 3
  • 6
  • There are other answers that provide the OP's question, and they were posted some time ago. When posting an answer, please make sure you add either a new solution, or a substantially better explanation, especially when answering older questions. – help-info.de Oct 01 '19 at 20:10
3

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
Ikeanyi kenechukwu
  • 51
  • 2
  • There are other answers that provide the OP's question, and they were posted some time ago. When posting an answer, please make sure you add either a new solution, or a substantially better explanation, especially when answering older questions. – help-info.de Oct 01 '19 at 20:11
2

adding this line to the beginning of the file s worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

modifying the css to set the proper border properties did not work until i added the above line

Albert S
  • 2,552
  • 1
  • 22
  • 28
  • 1
    This is the ONLY thing that worked for me! +1 and THANK YOU! I had it set to Strict instead of transitional. – SMBiggs Mar 15 '15 at 17:53
1

I had this problem and none of the suggestions from several posts worked, I tried them all. My problem turned out that the table I was creating is nested in another table, inheriting on its properties. I needed to override the container table.

In this example, SuColTable is class on the table.

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

The border-collapse, border:none and border-spacing get rid of table/row/column line. The padding 0 calls get rid the padding from the container table. I had to including !important on every style for it work, in order override the container table styles.

I have padding_top, left and bottom (instead of only padding) because I have two other classes that control the padding_right.

line-height: 0px;

Line-height zero makes the row one line high. If you have several lines, they are compressed into one line.

George
  • 307
  • 1
  • 5
  • 12
0

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
  • 12,234
  • 11
  • 45
  • 68