How to narrow the spaces between the edges of a table in html?

Navigation
2

I have a table and would like to remove the spaces between the borders! How can I do this? 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Tabela</title>
    </head>
    <body>
        <h1>Pesquisa no banco</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>nome</th>
                    <th>sobrenome</th>
                    <th>balanço</th>
                </tr>
            </thead>
            <tbody>


                    <tr> <td>  id1</td>
                        <td> Jose</td>
                        <td> Fernando</td>
                        <td> -4000</td>
                    </tr>
                    <tr> <td>  id2</td>
                        <td> Joaquim</td>
                        <td> Macedo</td>
                        <td> 12000</td>
                    </tr>
            </tbody>
        </table>
        <br>
    </body>
</html>

I get:

But I want something like this:

    
asked by anonymous 20.09.2015 / 20:38

1 answer

4

You can change this with border-collapse like this: 

table { border-collapse:collapse };

Add this to your CSS file or to that page: 

<style>
table { border-collapse:collapse };
</style>

If you also want to reinforce border you can do for example 

border: 2px solid black;

Example: link

    
20.09.2015 / 20:52
How do I set an image in the background of the page? How to identify a change in the state of Internet connectivity to execute a method when connecting?