3

Preciso sudividir o TD das colunas Etapas e Circuitos em duas partes. A idéia é que apareça no TH a palavra "Etapas" e os valores inseridos nessa coluna serão divididos em <30 e > 30.

 Etapas
<30   >30
 1      2
 5      6

Como faço essa subdivisão semanticamente? Estou usando o bootstrap para fazer o layout.

<div>
    <table>
        <thead>
            <tr>
                <th>
                    Fase
                </th>

                <th>
                    Descricão
                </th>
                <th>
                    Etapas
                </th>
                <th>
                    Circuitos
                </th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

2 Respostas 2

5

Você deve usar o colspan e rowspan para mesclar as colunas que necessitar, e criar uma sublinha <tr> para os subtítulos das colunas. Algo similar a isso:

<div>
    <table border="1px">
        <thead>
            <tr>
                <th rowspan="2">Fase</th>
                <th rowspan="2">Descricão</th>
                <th colspan="2">Etapas</th>
                <th rowspan="2">Circuitos</th>
            </tr>
            <tr>
                <th>>30</th>
                <th><30</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>valores > 30</td>
                <td>valores < 30</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

Explicação da solução:

  • Extendemos as celulas de titulo que não contém subtitulo em 2 rowspan, ou seja, informamos que está celula irá ocupar o espaço de 2 rows;
  • Extendemos as celulas de titulo que contém subtitulo para a quantidade de subtitulos que ele terá, em nosso caso 2 colspan, ou seja, informamos que está celula irá ocupar o espaço de 2 columns;
  • Por fim, criamos uma nova row (<tr>) para os subtitulos, onde ele irá se alocar nas columns que não foram ocupados por rowspan, em nosso caso as 3° e 4° colunas;

Conceitos:

  • colspan: Este atributo contém um valor inteiro não negativo que indica em quantas colunas a célula se estende. Seu valor padrão é 1; se o seu valor for definido como 0, este se estende até o final do , eventualmente definido implicitamente, a célula pertence. Valores superiores a 1000 são truncados até 1000.*¹
  • rowspan: Este atributo contém um valor inteiro não negativo que indica em quantas linhas a célula se estende. Seu valor padrão é 1; se o seu valor for definido como 0, este se estende até o final da seção de table (<thead>, <tbody>, <tfoot>, eventualmente definido implicitamente) a célula pertence. Valores maiores que 65534 são truncados para baixo para 65534.*¹

*¹Tradução da definação de rowspan e colspan do MDN. Fonte.

3

Você deve usar o colspan que mescla 2 ou mais colunas:

<div>
    <table border="1px">
        <thead>
            <tr>
                <th>Fase</th>
                <th>Descricão</th>
                <th colspan="2">Etapas</th>
                <th colspan="2">Circuitos</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>< 30</td>
                <td>> 30</td>
                <td>< 30</td>
                <td>> 30</td>
            </tr>
        </tbody>
    </table>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .