Please enable JavaScript.
Coggle requires JavaScript to display documents.
TABELAS (Atributos (Colspan:
Adiciona uma quantidade de núcleos a mais da…
TABELAS
Definição, e tags utilizadas :
Toda a informação contida deve ficar dentro das tags table:<table> </table>
Informações em linhas utilizam a tag tr:<tr> </tr>
Informações contidas em colunas utilizam a tag td:<td> </td>
Informações no cabeçalho utilizam a tag th:<th> </th>
<table border="1">
<tr>
<th>Frutas</th>
<th>Verduras</th>
</tr>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
</table>
As tabelas são compostas de linhas e colunas cruzadas entre si e separadas por cabeçalhos. Elas são as paredes, o chão e o teto de muitas páginas.
No exemplo acima, foi usado o atributo “border”, ele dá a borda à tabela, quanto maior o valor desse atributo maior será a espessura da tabela. Esse valor varia de 0 a 7.
Atributos
Colspan:
Adiciona uma quantidade de núcleos a mais da esquerda para a direita, “comendo” os demais em seu caminho.
-
<table border="1">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>...</th>
</tr>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
<td rowspan="4"> 3 colunas</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba<td>
<td>Trigo</td>
</tr>
<tr>
<td colspan="3">3 colunas</td>
</tr>
</table>
-
<table frame="hsides">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba<td>
<td>Trigo</td>
</table>
Width e height:
Utilizados para aumentar a largura e a altura, onde o atributo “width” irá aumentar a largura, e o atributo “height”, a altura da tabela.
<table border="1">
<tr">
<th height="100">Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
<tr>
<td width="50%">Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td >Laranja</td>
<td>Beterraba<td>
<td>Trigo</td>
</table>
Align e seus respectivos valores:
O atributo serve para alinhar os objetos horizontalmente dentro da tabela. Nele, poderemos usar três valores: “left”, “right” e “center”
<table border="1">
<tr align="right">
<th height="100">Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
<tr>
<td width="50%">Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td align="center">Laranja</td>
<td>Beterraba<td>
<td>Trigo</td>
</table>
Thead, tbody e tfoot:
Dentro da tag “thead”, põe-se o cabeçalho da tabela; dentro do “tbody” põe-se o corpo da tabela; e na tag “tfoot” ficará o rodapé da tabela.
<table border="1"">
<thead>
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba<td>
<td>Trigo</td>
</tbody>
<tfoot>
<tr><td>Essa foi uma breve apresentação</tr></td>
</tfoot>
</table>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
