Search code examples
htmlcsscss-tables

html table w/css - I can't change spacing between elements in row


I'm creating my first basic website using html and css, it's just a simple custom link tree type website where my socials will be laid out on the screen. I'm trying to create 2 columns with 3 rows. Every element in the row is spaced super far away from each other and I can't figure out how to fix this.

HTML Code:

<body class="body">
    <div class="container">
        <table>
            <tr class="row-1">
                <td><img src="images/twitch-popout.png"></td>
                <td><img src="images/youtube-popout.png"></td>
            <tr class="row-2">
                <!--<td class="tiktok-popout"><img src="images/tiktok-popout.png"></td>
                <td class="twitter-popout"><img src="images/twitter-popout.png"></td> -->
            <!--<tr class="link-images">
                <td class="instagram-popout"><img src="images/instagram-popout.png"></td>
                <td class="discord-popout"><img src="images/discord-popout.png"></td>
            </tr> -->
        </table>
    </div>
</body>

CSS File:

*{
    margin: 0;
    padding: 0;
}

body {
    background: url("images/background.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.container{
    display: block;
    height: 91%;
    border: 3px solid red;
    position: relative;
}

.container td{
    margin: 0;
}

.container img{
    width: 40%;
}

.row-1{
    position: absolute;
    align-items: center;
}

I have tried many different things and nothing I have done works

Edit: I'm attaching a picture to show what it looks like as wellenter image description here


Solution

  • As per my comment, here is a way of creating a grid with 2 columns using CSS grid.

    .container {
      border: 3px solid red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    
    .container img {
      width: 100%;
      height: 80px;
    }
    <div class="container">
      <img src="images/twitch-popout.png">
      <img src="images/twitch-popout.png">
      <img src="images/twitch-popout.png">
      <img src="images/twitch-popout.png">
      <img src="images/twitch-popout.png">
      <img src="images/twitch-popout.png">
    </div>