Below is the code snippet that I am working with. I am trying to figure out a way to eliminate the space between the buttons both horizontally and vertically. Can someone guide me on how to achieve this?
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Main Page</title>
</head>
<body>
<table>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
</table>
</body>
The CSS code below can be applied for styling:
root
{
display: block;
}
button
{
background-image:url('darkSquare.jpg');
width:50px;
height:50px;
}
This code needs to be modified in order to remove spacing between the buttons in both directions.