Tabelas HTML

TAG <table>

Utilizada para criar uma tabela no HTML.

Uma tabela HTML consiste em um elemento <table> e um ou mais elementos <tr>, <th> e <td>.

O elemento <tr> define uma linha da tabela, o elemento <th> define um cabeçalho da tabela e o elemento <td> define uma célula da tabela.

Etiquetas de Tabela HTML

<table> - Define a tabela

<th> - Define cabeçalho da célula na tabela

<tr> - Define a linha na tabela

<td> - Define a célula na tabela

<caption> - Define um título pra tabela

<colgroup> - Especifica um grupo de uma ou mais colunas em uma tabela para formatação.

<col> - Especifica propriedades de coluna para cada coluna dentro de um elemento <colgroup>

<thead> - Agrupa o conteúdo do cabeçalho em uma tabela

<tbody> - Agrupa o conteúdo do corpo em uma tabela

<tfoot> - Agrupa o conteúdo do rodapé em uma tabela

A tag <colgroup> é útil para aplicar estilos a colunas inteiras, em vez de repetir os estilos para cada célula, para cada linha.

Observação: a tag <colgroup> deve ser filha de um elemento <table>, depois de qualquer elemento <caption> e antes de qualquer elemento <thead>, <tbody>, <tfoot> e <tr>.

Dica: Para definir propriedades diferentes para uma coluna dentro de um <colgroup>, use a tag <col> dentro da tag <colgroup>.

Exemplo de código:

<table>
      <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
        <!--
          span -> define número de colunar que terá este estilo
          style -> definições de estilo
        -->
      </colgroup>
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>

MESCLAR CÉLULAR

Basta utilizar os atributos nas tags <td> ou <th> rowspan para mesclar as célular na vertical ou colspan para mesclar célular na horizontal.

  <!--MECLAR CABEÇALHO NA HORIZONTAL-->
  <tr>
      <th colspan="3">Mesclando linha</th>
  </tr>
  OU
  <!--MESCLAR CÉLUAS NA VERTICAL-->
  <tr>
      <td rowspan="3">Mesclando células</td>
      <td>My first HTML</td>
      <td>$53</td>
  </tr>