Geek Answers Handbook

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

I use a table to display the image, name and date. Everything works fine, and I'm happy with how it looks, but there is some space around the image, I think this is the table border / margin / padding.

I want to have an image to the left of the table, so there shouldn't be 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 demonstration.

+8
html css
source share
3 answers

enter the code below:

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

You can try the following:

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

In CSS add

 table {border: none;}
+2
source share

The W3C working draft on October 08, 2015 for HTML 5.1 lists both cellspacing and cellpadding on table elements as deprecated and should therefore be avoided.

In Section 11.2 Inappropriate Functions, you will find the following note:

The items in the following list are completely outdated and should not be used by the authors.

When adding cellpadding and cellspacing to the list

  • cellpadding on table elements
  • cellpacing on table elements

So, here are your options;

Option 1

You can add the following styles to the current style sheet:

 table { background-color: blue; border-collapse: collapse; border-spacing: 0; /* cellspacing */ } th, td { padding: 0px; /* cellpadding */ }

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

Option 2

Normalize your CSS mentioned by Vucko in the comments.

You either download or link the normalize.css file directly to GitHub or use some kind of CDN as shown 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: https://jsfiddle.net/x7a6kjvo/

.. and while you are on it

You must also set display: block; in the page style sheet for your <img> tag to remove the small space below your image.

You can also use line-height: 0; in your image container or set vertical-align: bottom; into your img tag. I also see people suggesting using vertical-align: sub; but this will not work in IE6 or IE7.

 td > img { display: block; }
+2
source share

More articles:


All Articles