deve ser bem bobo meu problema mais estou tendo dificuldade
1 Resposta
Usando colspan
, se você pretende que uma coluna (<td>
) especifica ocupe o espaço equivalente a 3 colunas então sete na coluna desejada <td colspan="3">
, se fosse para ocupar o espaço de 4 colunas seria <td colspan="4">
Exemplo:
.tabela, .tabela td {
border: 1px solid #000;
}
.tabela {
border-collapse: collapse;
width: 100%;
}
<table class="tabela">
<tbody>
<tr>
<td colspan="3">Atendimento</td>
<td colspan="3">Público</td>
</tr>
<tr>
<td>Pres</td>
<td>Tel</td>
<td>Email</td>
<td>Est</td>
<td>Prof</td>
<td>Out</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>SP</td>
<td>Foo Bar</td>
<td>Baz Bar</td>
</tr>
</tbody>
</table>
Note que usei só <tr>
e <td>
, mas você pode separar o que é o "header" da tabela e usar TH, que seria mais por questão de semântica (também poderia usar combinado com o atributo scope=""
, o que pode ser interessante para combinar um CSS para customizar, mas isto é outra história):
.tabela, .tabela td, .tabela th {
border: 1px solid #000;
}
.tabela {
border-collapse: collapse;
width: 100%;
}
<table class="tabela">
<thead>
<tr>
<th colspan="3">Atendimento</th>
<th colspan="3">Público</th>
</tr>
</thead>
<tbody>
<tr>
<th>Pres</th>
<th>Tel</th>
<th>Email</th>
<th>Est</th>
<th>Prof</th>
<th>Out</th>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>SP</td>
<td>Foo Bar</td>
<td>Baz Bar</td>
</tr>
</tbody>
</table>
-
meu obrigado era isso mesmo...... to tendo tarde toda fazia tempo que não usava tabela vlw mesmo Commented 2/11/2019 às 21:57
-
@kauajotta obrigado. PS: acaso queira que uma coluna ocupe duas linhas ou mais (que seria o inverso da resposta) o atributo é
rowspan
;)– Syzoth ♦Commented 2/11/2019 às 22:00