Etiqueta de tabela HTML é usado para exibir dados em formato tabular (linha * coluna). Pode haver muitas colunas seguidas.

Podemos criar uma tabela para exibir dados em formato tabular, usando

Em cada tabela, a linha da tabela é definida portag, o cabeçalho da tabela é definido por, e os dados da tabela são definidos porTag.

Tabelas HTML são usadas para gerenciar o layout da página, por exemplo. seção de cabeçalho, barra de navegação, conteúdo do corpo, seção de rodapé, etc. Mas é recomendado usar a tag div sobre a tabela para gerenciar o layout da página.

Tags de tabela HTML

Exemplo de tabela HTML

Vamos ver o exemplo da tag de tabela HTML. A saída é mostrada acima.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Saída:

mapa iterativo java

Na tabela HTML acima, existem 5 linhas e 3 colunas = 5 * 3 = 15 valores.

Tabela HTML com Borda

Existem duas maneiras de especificar bordas para tabelas HTML.

1. Por atributo border da tabela em HTML
2. Por propriedade de borda em CSS

1) Atributo HTML Border

Você pode usar o atributo border da tag da tabela em HTML para especificar a borda. Mas não é recomendado agora.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Saída:

2) Propriedade CSS Border

Agora é recomendado usar a propriedade border do CSS para especificar a borda na tabela.

 table, th, td { border: 1px solid black; } 

Você pode recolher todas as bordas em uma borda pela propriedade border-collapse. Isso reduzirá a fronteira em uma só.

força de limpeza de cache npm

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Saída:

Tabela HTML com preenchimento de célula

Você pode especificar o preenchimento para o cabeçalho e os dados da tabela de duas maneiras:

1. Ao atributo cellpadding da tabela em HTML
2. Preenchendo propriedade em CSS

O atributo cellpadding da tag de tabela HTML está obsoleto agora. Recomenda-se usar CSS. Então vamos ver o código do CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Saída:

Largura da tabela HTML:

Podemos especificar a largura da tabela HTML usando o Largura CSS propriedade. Pode ser especificado em pixels ou porcentagem.

Podemos ajustar a largura da nossa mesa conforme nossa necessidade. A seguir está o exemplo para exibir a tabela com largura.

 table{ width: 100%; } 

Exemplo:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Saída:

Tabela HTML com colspan

Se quiser fazer com que uma célula ocupe mais de uma coluna, você pode usar o atributo colspan.

Ele dividirá uma célula/linha em várias colunas, e o número de colunas dependerá do valor do atributo colspan.

Vamos ver o exemplo que abrange duas colunas.

Código CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

Código HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Saída:

Tabela HTML com rowspan

Se quiser fazer com que uma célula ocupe mais de uma linha, você pode usar o atributo rowspan.

gerador de valor aleatório em java

Isso dividirá uma célula em várias linhas. O número de linhas divididas dependerá dos valores de rowspan.

Vamos ver o exemplo que abrange duas linhas.

Código CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

Código HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Saída:

Tabela HTML com legenda

A legenda HTML é exibida acima da tabela. Deve ser usado somente após a tag da tabela.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Estilizando células pares e ímpares da tabela HTML

Código CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Saída:

NOTA: Você também pode criar vários tipos de tabelas usando diferentes propriedades CSS em sua tabela.

Navegadores de suporte

Elemento	cromada	Ou seja	Raposa de fogo	Ópera	Safári
	Sim	Sim	Sim	Sim	Sim