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

Asked

Viewed 2,621 times

2

I have a table and would like to remove the spaces between the edges! 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 have as a result:
inserir a descrição da imagem aqui

But I want something like this:
inserir a descrição da imagem aqui

html css layout
  • 1

    Do you want to table { border-collapse:collapse };? Take a look here: http://jsfiddle.net/572k8Lv3/

  • @Interesting Sergio! This code ,table { border-Collapse:Collapse },is a css? Called via a link to the stylesheet?

  • 1

    And with border: http://jsfiddle.net/572k8Lv3/1/, that’s what you’re looking for?

  • 1

    Yes, it’s CSS. You can have it in a file external to the page or on the page inside tags <style>

  • 1

    @Sergio Obrigado!!

1 answer

4


You can change that with border-Collapse thus:

table { border-collapse:collapse };

put it in your CSS file or inside that page like this:

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

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

border: 2px solid black;

Example: http://jsfiddle.net/572k8Lv3/1/

  • 1

    Now yes!! Thanks for the valuable reply!! Thank you!!

Browser other questions tagged html css layout

You are not signed in. Login or sign up in order to post.