Uma tabela é um componente essencial em HTML para exibir dados em um formato estruturado com linhas e colunas. Em HTML, as tabelas são criadas usando as tags <table>, <tr> e <td>.
A tag <table> representa o contêiner da tabela principal, que contém todas as linhas e colunas. As linhas são definidas usando a tag <tr>(linha da tabela), enquanto as células dentro das linhas são definidas usando a tag <td>(dados da tabela). Além disso, você pode usar a tag <th>(cabeçalho da tabela) para definir as células do cabeçalho da tabela.
Você pode usar atributos como colspan e rowspan para mesclar células na tabela ou estender células em várias linhas e colunas. Além disso, você pode aplicar propriedades CSS para personalizar a aparência e o layout da tabela.
Tabela( <table>)
- O <table> elemento é usado para criar uma tabela em HTML.
- Os dados são colocados em linhas( <tr>) e colunas( <td> ou <th>).
- Cada célula de dados é colocada dentro dos elementos <td>(célula de dados) ou <th>(célula de cabeçalho).
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Cabeçalho da coluna( <th>)
- O <th> elemento é usado para criar cabeçalhos de coluna em uma tabela.
- Normalmente colocado na primeira linha da tabela.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Linhas de Dados( <tr>):
- O <tr> elemento é usado para criar linhas de dados em uma tabela.
- As células de dados( <td>) ou células de cabeçalho( <th>) são colocadas dentro desses <tr> elementos.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Abrangência de colunas( colspan)
O colspan atributo é usado para determinar o número de colunas que uma célula de dados ou célula de cabeçalho abrangerá na tabela.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Abrangência de linha( rowspan)
O rowspan atributo é usado para determinar o número de linhas que uma célula de dados ou célula de cabeçalho abrangerá na tabela.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Mesclando Células( colspan e rowspan)
Você pode combinar atributos colspan e rowspan para mesclar células em uma tabela.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border propriedade
- A border propriedade especifica a espessura da borda da tabela.
- O valor de border é um número inteiro não negativo.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding propriedade
- ,A cellpadding propriedade especifica a distância entre o conteúdo da célula e a borda da célula na tabela.
- O valor de cellpadding é um número inteiro não negativo
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing propriedade
- A cellspacing propriedade especifica o espaçamento entre as células da tabela.
- O valor de cellspacing é um número inteiro não negativo.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Esses atributos e elementos permitem que você crie e personalize tabelas em HTML de acordo com suas necessidades. Você pode usá-los para exibir dados de maneira clara e organizada em seu site.