Início » Tutoriais » Tutorial HTML |
Exemplo de tabela no HTML
Tabelas HTMLAs tabelas são definidas com a tag <table>. A tabela está dividida em linhas com o <tr> tag. (tr — table raw—, significa linha da tabela) A linha é dividida em células de dados com o <td> tag. (td — table data —, significa dados da tabela) A linha também pode ser dividido em assinatura com o <th> tag. (th — table head — significa cabeçalho da tabela) Os elementos <td> são os recipientes de dados na tabela. Os elementos <td> pode conter todos os tipos de elementos HTML, como texto, imagens, listas, outras tabelas, etc A largura da tabela pode ser definida usando o CSS. <table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Uma tabela HTML com um atributo borderSe você não especificar uma borda para a tabela, ele será exibido sem borda. A borda pode ser adicionado usando o atributo boder: <table border="1" style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Nota: Usar o atributo border em uma tabela é obsoleto, hoje se usa o CSS. <style> table,th,td{ border:1px solid black; } </style> Lembre-se de definir as bordas, tanto para a tabela e as células da tabela. Uma tabela HTML com bordas collapsadoSe você quer que as fronteiras a entrar em colapso em uma beira, adicione border-collapse ao seu CSS: <style> table,th,td{ border:1px solid black; border-collapse:collapse } </style> Uma tabela HTML com Preenchimento da célulaEnchimento da célula especifica o espaço entre o conteúdo da célula e de suas fronteiras. Se você não especificar um preenchimento, as células da tabela será exibida sem estofamento. Para definir o preenchimento, use a propriedade preenchimento CSS: th,td{ padding:15px; } Cabeçalhos da tabela HTMLO cabeçalho da tabela são definidas com a tag <th>. Por padrão, todos os principais navegadores exibir títulos da tabela como negrito e centralizado: <table style="width:300px"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Para alinhar à esquerda os títulos da tabela, use a propriedade text-align CSS: th{ text-align:left; } Uma tabela HTML com espaçamento entre as célulasO espaçamento da célula especifica o espaço entre as células. Para definir o espaçamento de célula para a tabela, use a propriedade CSS border-spacing : table{ border-spacing:5px; } Tags da tabela HTML
Em caso de dúvida, você pode tirar nos comentários. | ||||||||||||||||||||||||||||||||||||||
Visualizações: 2022 | |
Total de comentários: 0 | |