Tabelas

Uma tabela é composta por linhas e células.

As tabelas começam com a tag <table>, as linhas da tabela são definidas pela tag tr (table row). Dentro das linhas temos as células, elas são definidas pela tag td(table data).

Vamos ao nosso primeiro exemplo de tabela:

código:

<table>
    <tr>
        <td>campo1</td><td>campo2</td><td>campo3</td>
    </tr>
    <tr>
        <td>campo1</td><td>campo2</td><td>campo3</td>
    </tr>
    <tr>
        <td>campo1</td><td>campo2</td><td>campo3</td>
    </tr>
</table>

resultado:

Eu tive que abrir mão de um pouco de CSS para mostrarmos as bordas de cada célula e dar um “respiro” com o padding.

td {
    border: 1px solid #999;
    padding: 5px;
}
table {
    border-collapse: collapse;
}

Exercício

1. Ative o console de seu navegador (tecla F12) e altere as propriedades de borda e preenchimento (padding) das células (td).
2. Desative a propriedade border-collapse da tabela e observe o resultado.