I tried this code but I still have a small space between my 3 images what should I add more to remove those spaces

user_16581879 0
Viewed 32

I tried this code but I still have a small space between my 3 images what should I add more to remove those spaces. Here is the code below

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img_test</title>
<style type="text/css">
    
    table {
        border: none;
    border-collapse: collapse;
            }
</style>
</head>

<body>
    <table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><img src="Sans titre-1.jpg" alt="" height="auto" width="100%"/></td>
    </tr>
    <tr>
      <td><img src="Sans titre-1.jpg" alt="" height="auto" width="100%"/></td>
    </tr>
    <tr>
      <td><img src="Sans titre-1.jpg" alt="" height="auto" width="100%"/></td>
    </tr>
  </tbody>
</table>

</body>
</html>
css html
3 Answers

One of the ways to do this is to make the images in the table a block level element. This will remove the white space, try this:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>img_test</title>
  <style type="text/css">
    table {
      border: none;
      border-collapse: collapse;
    }
    
    table img {
      display: block;
    }
  </style>
</head>

<body>
  <table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
      </tr>
      <tr>
        <td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
      </tr>
      <tr>
        <td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
      </tr>
    </tbody>
  </table>

</body>

</html>

ps: If you are using table purely for design, then please don't. Use <div> and style it accordingly. When you do mobile responsiveness, you'll be really happy that you used <div>. <table> should be used to display data and not for design purposes.

user_31555270

add line-height:0 to td

table td {line-height: 0;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img_test</title>
<style type="text/css">
    
    table {
        border: none;
    border-collapse: collapse;
            }
</style>
</head>

<body>
    <table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0" >
  <tbody>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" alt="" height="auto" width="100%"/></td>
    </tr>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" alt="" height="auto" width="100%"/></td>
    </tr>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" alt="" height="auto" width="100%"/></td>
    </tr>
  </tbody>
</table>

</body>
</html>

user_124752850 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img_test</title>
<style type="text/css">
    
    table {
        border: none;
        border-collapse: collapse;
    }
    .lineZero{
        line-height: 0;
    }   
            
</style>
</head>

<body>
    <table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0">
      <tbody class="lineZero">
        <tr>
          <td><img src="a.jpg" alt="" height="auto" width="100%"/></td>
        </tr>
        <tr>
          <td><img src="a.jpg" alt="" height="auto" width="100%"/></td>
        </tr>
        <tr>
          <td><img src="a.jpg" alt="" height="auto" width="100%"/></td>
        </tr>
      </tbody>
    </table>
</body>
</html>

You can add a "lineZero" class to tbody tag. it will work fine

user_162279150
Related