HTML - tabelas
As tabelas HTML permitem aos autores da web organizar dados como texto, imagens, links, outras tabelas, etc. em linhas e colunas de células.
As tabelas HTML são criadas usando o <table> tag na qual o <tr> tag é usada para criar linhas de tabela e <td>tag é usada para criar células de dados. Os elementos em <td> são regulares e alinhados à esquerda por padrão
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Aqui o borderé um atributo da tag <table> e é usado para colocar uma borda em todas as células. Se você não precisa de uma borda, pode usar border = "0".
Título da Tabela
O título da tabela pode ser definido usando <th>tag. Esta tag será colocada para substituir a tag <td>, que é usada para representar a célula de dados real. Normalmente, você colocará sua linha superior como cabeçalho da tabela conforme mostrado abaixo, caso contrário, você pode usar o elemento <th> em qualquer linha. Os títulos, que são definidos na tag <th>, são centralizados e em negrito por padrão.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos de Cellpadding e Cellspacing
Existem dois atributos chamados cellpadding e cellspacing, que você usará para ajustar o espaço em branco nas células da tabela. O atributo cellspacing define o espaço entre as células da tabela, enquanto o cellpadding representa a distância entre as bordas da célula e o conteúdo dentro de uma célula.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos Colspan e Rowspan
Você vai usar colspanatributo se você deseja mesclar duas ou mais colunas em uma única coluna. De maneira semelhante, você usarárowspan se você deseja mesclar duas ou mais linhas.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Fundos de tabelas
Você pode definir o fundo da mesa usando uma das seguintes maneiras -
bgcolor atributo - você pode definir a cor de fundo para toda a tabela ou apenas para uma célula.
background atributo - você pode definir a imagem de fundo para a tabela inteira ou apenas para uma célula.
Você também pode definir a cor da borda usando bordercolor atributo.
Note- Os atributos bgcolor , background e bordercolor tornaram-se obsoletos no HTML5. Não use esses atributos.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Aqui está um exemplo de uso backgroundatributo. Aqui, usaremos uma imagem disponível no diretório / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado. Aqui, a imagem de fundo não se aplica ao cabeçalho da tabela.
Altura e largura da mesa
Você pode definir a largura e altura da mesa usando width e heightatributos. Você pode especificar a largura ou altura da tabela em termos de pixels ou em termos de porcentagem da área disponível da tela.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Legenda da Tabela
o captiontag servirá como um título ou explicação para a tabela e aparecerá no topo da tabela. Esta tag está obsoleta na versão mais recente de HTML / XHTML.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Cabeçalho, corpo e rodapé da tabela
As tabelas podem ser divididas em três partes - um cabeçalho, um corpo e um pé. A cabeça e o pé são bastante semelhantes aos cabeçalhos e rodapés de um documento processado por texto que permanecem os mesmos para todas as páginas, enquanto o corpo é o principal detentor do conteúdo da tabela.
Os três elementos para separar a cabeça, corpo e pés de uma mesa são -
<thead> - para criar um cabeçalho de tabela separado.
<tbody> - para indicar o corpo principal da tabela.
<tfoot> - para criar um rodapé de tabela separado.
Uma tabela pode conter vários elementos <tbody> para indicar diferentes páginas ou grupos de dados. Mas é notável que as tags <thead> e <tfoot> devem aparecer antes de <tbody>
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
Mesas Aninhadas
Você pode usar uma tabela dentro de outra tabela. Não apenas tabelas, você pode usar quase todas as tags dentro da tag de dados da tabela <td>.
Exemplo
A seguir está o exemplo do uso de outra tabela e outras tags dentro de uma célula da tabela.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -