Como usar HTML para criar elementos de gráfico de Gantt

Não há uma tag HTML específica para criar um gráfico de Gantt, mas é possível criar um gráfico de Gantt utilizando uma combinação de tags HTML e CSS.

Um gráfico de Gantt é um tipo de gráfico de barras que é frequentemente usado para ilustrar o cronograma de um projeto. Para criar um gráfico de Gantt em HTML e CSS, você precisará seguir estes passos:

1. Crie uma tabela com as seguintes colunas: Tarefa, Início, Duração e Término.

2. Para cada tarefa, crie uma linha na tabela e preencha as informações relevantes em cada coluna.

3. Use CSS para estilizar a tabela e as células, incluindo as cores das barras do gráfico e a largura das células para representar a duração de cada tarefa.

4. Adicione interatividade ao gráfico de Gantt usando JavaScript, se necessário.

Aqui está um exemplo simples de como criar um gráfico de Gantt usando HTML e CSS:

<table>
  <thead>
    <tr>
      <th>Tarefa</th>
      <th>Início</th>
      <th>Duração</th>
      <th>Término</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tarefa 1</td>
      <td>1/1/2023</td>
      <td>5 dias</td>
      <td>1/5/2023</td>
    </tr>
    <tr>
      <td>Tarefa 2</td>
      <td>1/6/2023</td>
      <td>3 dias</td>
      <td>1/9/2023</td>
    </tr>
    <tr>
      <td>Tarefa 3</td>
      <td>1/10/2023</td>
      <td>7 dias</td>
      <td>1/16/2023</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    border-collapse: collapse;
  }

  td, th {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }

  tr:nth-child(odd) {
    background-color: #f2f2f2;
  }

  tr:nth-child(even) {
    background-color: #ffffff;
  }

  .tarefa1 {
    background-color: #ffcc00;
    width: 20%;
  }

  .tarefa2 {
    background-color: #0099cc;
    width: 12%;
  }

  .tarefa3 {
    background-color: #cc3300;
    width: 28%;
  }
</style>

Neste exemplo, cada tarefa é representada por uma linha na tabela e cada célula de duração é estilizada com uma cor diferente para representar a duração de cada tarefa. O resultado será uma tabela simples com um gráfico de Gantt básico.