How to remove the default table border/spacing/padding? [duplicate]

Question

I'm using a table to display an image, title and date. Everything is working great and I'm happy with how it looks, but around the image is some space I think it is the table border/margin/padding.

I want to have the image against the left of the table, so no more blue between it.

HTML:

<table style="background-color: blue;">
  <tbody>
    <tr>
      <td><img src="http://revistasindromes.com/images/100x100.gif"></td>
      <td>Hello world!</td>
      <td>Hello world!</td>
    </tr>
  </tbody>
</table>

Here is a demo.

Answer 1

The W3C Working Draft 08 October 2015 for HTML 5.1 lists both cellspacing and cellpadding on table elements as obsolete, and as such its usage should be avoided.

Under section 11.2 Non-conforming features you'll find the following note;

Elements in the following list are entirely obsolete, and must not be used by authors

With both cellpadding and cellspacing added to the list

• cellpadding on table elements
• cellspacing on table elements

So here's your options;

Option 1

You can add the following styles to your current stylesheet;

table { 
  background-color: blue; 
  border-collapse: collapse; border-spacing: 0; /* cellspacing */
}

th, td { 
  padding: 0px;  /* cellpadding */
}

This solution will look something like this fiddle; https://jsfiddle.net/z9tz4Lcb/

Option 2

Normalize your CSS as mentioned by Vucko in the comments.

You'll either download and bundle the normalize.css file directly from GitHub, or use some sort of CDN as seen below

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">

This solution will look something like this fiddle; https://jsfiddle.net/x7a6kjvo/

.. and while you're at it

You should also set display: block; in the page stylesheet for your <img> tag to remove the tiny space below your image.

You can also use line-height: 0; on your image container, or set vertical-align: bottom; on your img tag. I also see people suggesting that you use vertical-align: sub;, but this won't work in IE6 or IE7.

td > img { 
  display: block; 
}

Answer 2

make your code as below:

<table style="background-color: blue;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    </td>
  </tr>
</table>

Answer 3

You can try this:

<table cellspacing="0" cellpadding="0">

In CSS, add

table {border: none;}