HTML Remove the space between div and table-CodePudding

I want to remove the space there and make my images looks nice, but I don't know how.

There is always space between the div and table. I tried collapse but it did not work

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    .div1{
        width: 600px;
        height: 150px;
        border: 1px solid black;
        margin: auto;
        background-image:url("images/piha1.jpg");
    }
    table tr td{
 
    }
    img{
        width: 200px;
        height: 150px;
    }

</style>
</head>

<body>
<div >
    <table>
        <tr>
            <td><img id="surfimg" src="images/piha2.jpg" alt="surf"></td>
            <td><img id="picnic" src="images/piha3.jpg" alt="picnic"></td>
        </tr>
    </table>

</div>
</body>
</html>

CodePudding user response：

Try to add border-collapse: collapse; as CSS property for table element.

table {
     border-collapse: collapse;
}

Alternatively, you can experiment with following attributes cellpadding="0" cellspacing="0" and border="0" on your table.

CodePudding user response：

Try using collapse on the table and reducing the padding from the td to zero:

table {
    border-collapse: collapse;
}

td {
    padding: 0;
}