How to remove the default table border/spacing/padding?

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.

add attribute to the table tag cellspacing="0" cellpadding="0" — Girdhar Singh Rathore, Jan 04 '16 at 13:39
@MuhammadSohailArif Sorry I kinda failed, I already prepared a demo but forgot to add it in the question. — RiesvGeffen, Jan 04 '16 at 13:40
@staypuftman That's what I thought, but I couldn't find anything similar to this that solved my problem. — RiesvGeffen, Jan 04 '16 at 14:00
@DanMan not really, none of their answers solves the problem I had. While the answers to this question worked. — RiesvGeffen, Jan 04 '16 at 15:21

score 4 · Accepted Answer · answered Jan 04 '16 at 13:36

4

make your code as below:

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

answered Jan 04 '16 at 13:36

Prajwal Shrestha

524
3
12

This worked great! ``
– RiesvGeffen Jan 04 '16 at 13:56
@Goldenowner great!!! :) – Prajwal Shrestha Jan 04 '16 at 14:02
If you chose to adopt this, then do take note that both cellspacing and cellpadding on table element are both entirely obsolete, and as such their usage should be avoided. – Rune Vikestad Jun 13 '18 at 09:36

score 3 · Answer 2 · edited May 23 '17 at 11:52

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; 
}

Just a note, it's good to use some CSS reset, like [normalize.css](https://github.com/necolas/normalize.css/blob/master/normalize.css#L409) which contains those table styles. — Vucko, Jan 04 '16 at 14:23

score 1 · Answer 3 · answered Jan 04 '16 at 13:36

1

You can try this:

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

In CSS, add

table {border: none;}

answered Jan 04 '16 at 13:36

Rahul Tripathi

168,305
31
280
331

1

Worth noting that `cellpadding` and `cellspacing` are made obsolete in HTML5. [This](http://stackoverflow.com/questions/6048913/in-html5-with-respect-to-tables-what-replaces-cellpadding-cellspacing-valign) answer goes over what you should use instead. – Ieuan Stanley Jan 04 '16 at 13:44

How to remove the default table border/spacing/padding?

3 Answers3