Comment puis-je afficher des lignes dans les lignes d'une table?

Question

J'essaie de donner l'effet de titres généraux dans ce tableau, puis de subdiviser ce titre en trois catégories. La table devrait continuer cette subdivisions tout le chemin jusqu'à la fin. Je vois que je peux probablement insérer une table dans une insertion de ligne, mais je ne veux pas me saturer avec des tables. Existe-t-il un moyen d'obtenir cet effet de manière plus simple?

Answer 1

Vous pouvez utiliser les attributs colspan et rowspan pour déterminer la distance de chaque cellule traverse les lignes et les colonnes.

Par exemple:

<table> 
    <tbody> 
    <tr> 
     <td rowspan="2">Top Left Header</td> 
     <td colspan="3">Call Standard</td> 
    </tr> 
    <tr> 
     <td>Flagged</td> 
     <td>Percent</td> 
     <td>Days</td> 
    </tr> 
    </tbody> 
</table> 

Notez que la table se retrouve avec 4 colonnes. La première ligne définit une colonne qui traverse 2 lignes et une colonne qui traverse 3 colonnes.

La deuxième ligne ne fait que remplir dans les colonnes « manquantes »; ignorer le premier parce qu'il a été défini précédemment.

Answer 2

Colspan, Rowspan ou Table-Nesting *.

* table de nidification est haïssable, mais parfois il est plus facile de travailler avec de série compliquée de colspans et rowspans.

Answer 3

Que diriez-vous à l'aide du « colspan » tel que défini par le HTML standard? Vous l'appliqueriez à la cellule appelée "standard d'appel" et définiriez qu'il devrait s'étendre sur 3 cellules.

Answer 4

Vous ne devez pas avoir une autre table interne ... vous pouvez avoir la ligne courte comme une ligne de table complète, et avoir des cellules d'en-tête qui ne subdivisent pas rowspan pour l'étendre (et utilisent par conséquent colspan ci-dessus et ci-dessous les cellules).

Answer 5

Vous pouvez utiliser rowspan et colspan pour y parvenir:

<table> 
    <tr> 
     <td rowspan="2">Column 1 Heading</td> 
     <td colspan="3">Call Standard</td> 
     <td rowspan="2">Column 3 Heading</td> 
    </tr> 
    <tr> 
     <td>Flagged</td> 
     <td>Percent</td> 
     <td>Days</td> 
    </tr> 
    <tr> 
     <td>Column 1 Value</td> 
     <td>4</td> 
     <td>1%</td> 
     <td>6</td> 
     <td>Column 3 Value</td> 
    </tr> 
</table>