HTML Table, question colspan

Je suis en train de créer une table comme celui-ci HTML Table, question colspan

Et voici ce que je reçois quand je lance mon code HTML

La largeur de la colonne est pas de même pour toutes les colonnes même après avoir réglé le colspan. Probablement attribut "colspan" ne fonctionne pas selon mes attentes. Qu'est-ce que je fais mal?

Mon code:

<table border="5" width="400" height = "400" table-layout = "auto"> 
 
    <tr> 
 
    <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td> 
 
    </tr> 
 
    <tr></tr> 
 
    <tr></tr> 
 
    <tr> 
 
    <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
    <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3" style="width: 75%;"> colspan = 3</td> 
 
    <td style="width: 25%;"> colspan = 1 </td> 
 
    </tr> 
 
</table>

Source

2017-10-06 Sarvin

Il serait utile si vous supprimiez les [erreurs détectables par la machine] (https://validator.nu) de votre HTML. – Quentin

Cela n'a rien à voir avec colspan. Le colspan fonctionne correctement. Ce n'est pas "direct" parce que vos colonnes sont de tailles différentes. Si vous voulez qu'ils soient de la même taille, vous devez spécifier des largeurs. – Liam

avez-vous vérifié mon code? –

Si vous utilisez bootstrap alors cela fonctionne automatiquement mais sous le code est 100% fonctionne pour vous

<table border="5"> 
 
     <tr> 
 
     <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td> 
 
     </tr> 
 
     <tr> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td> 
 
     </tr> 
 
     <tr></tr> 
 
     <tr></tr> 
 
     <tr> 
 
     <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
     <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="3" style="width: 75%;"> colspan = 3</td> 
 
     <td style="width: 25%;"> colspan = 1 </td> 
 
     </tr> 
 
    </table>

Source

2017-10-06 13:21:07

Je veux dire que cela fonctionne, mais c'est de loin la solution la moins élégante. Être comme vous pouvez résoudre cela avec littéralement une ligne. – Liam

td{ 
 
    min-width:100px; 
 
    text-align: center; 
 
}

<table border="5" width="400" height="400" table-layout="auto"> 
 
    <tr> 
 
    <td colspan="4" align="center">Colspan = “4”</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td rowspan="3" colspan="1"> col1 </td> 
 
    <td rowspan="3" colspan="1"> col2 </td> 
 
    <td rowspan="3" colspan="1"> col3 </td> 
 
    <td rowspan="3" colspan="1"> col4 </td> 
 

 
    </tr> 
 

 
    <tr></tr> 
 
    <tr></tr> 
 
    <tr> 
 
    <td colspan="2"> colspan = 2 </td> 
 
    <td colspan="2"> colspan = 2 </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td colspan="3"> colspan = 3</td> 
 
    <td> colspan = 1 </td> 
 
    </tr> 
 
</table>

Vous devez définir min-width de table.

Explication

Avant explication, je ne suis pas bon en anglais, donc si vous ne pouvez pas comprendre mon explication, s'il vous plaît répondre.

Vous voulez faire la même widthtd de chaque table.

Et votre table width est 400, column est 4. Par conséquent, chaque width doit être défini 100px.

Il est résultat que vous devez définir min-width: 100px

Source

2017-10-06 13:12:50 zynkn

Merci beaucoup. Cela a fonctionné comme un charme. Le livre que je suis ne précise pas la largeur minimale. Ne comprends pas pourquoi ce code fonctionne pour eux – Sarvin

@Sarvin C'est mon plaisir :) Mais je pense que 'largeur: 25%' est la meilleure façon de résoudre. – zynkn

-1

occasion ci-dessous je viens d'ajouter cellpadding = 0 et cellspacing = 0 et a changé border = 1

<table cellpadding="0" cellspacing="0" border="1" width="400" height = "400" table-layout = "auto"> 
 
     <tr> 
 
      <td colspan = "4" align="center">Colspan = “4”</td> <!--First row of the table-->  
 
     </tr> 
 
     
 
     <tr> 
 
      <td rowspan ="3" colspan = "1" > col1 </td> 
 
      <td rowspan ="3" colspan = "1"> col2 </td> 
 
      <td rowspan ="3" colspan = "1"> col3 </td> <!--Second group of rows of the table consisting 3 rows--> 
 
      <td rowspan ="3" colspan = "1"> col4 </td> 
 
     
 
     </tr> 
 
     
 
     <tr></tr> <!--occupied by the second group of rows of the table--> 
 
     <tr></tr> <!--occupied by the second group of rows of the table--> 
 
     
 
     <tr> 
 
      <td colspan = "2"> colspan = 2 </td> <!--3rd row which should contain 2 
 
               equal columns--> 
 
      <td colspan ="2" > colspan = 2 </td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
 
              contain 3 cols and the second col is 1--> 
 
      <td > colspan = 1 </td> 
 
     </tr> 
 
     </table>

Source

2017-10-06 13:13:46 sheraz

Qui produit des résultats identiques – Liam

@liam expliquez-moi.qui est identique pour le code de la mine .. il y a un résultat différent par rapport à la question. parce que cellpadding et cellspacing génèrent de l'espace et du padding sur la table j'ai ajouté ces attribut a également changé la largeur de la frontière. – sheraz

J'ai ajouté l'extrait (à nouveau) appuyez sur Exécuter le code. Il ressemble à celui de la question. le problème est la largeur des cols, pas la frontière, etc. – Liam

Il n'y a rien de mal avec votre colspan attributes. A colspan simply says this columns should be x columns wide in relation to the other columns in this table.

Cet attribut contient une valeur entière non négative qui indique pour combien de colonnes la cellule s'étend. Sa valeur par défaut est 1. Les valeurs supérieure à 1000 sera considéré comme incorrect et sera réglé sur la valeur par défaut (1)

Il ne dit pas la largeur d'une colonne. Vous devez spécifier que vous souhaitez que vos colonnes soient espacées uniformément. Vous pouvez specify a width in pixels. L'inconvénient de ceci est que si vous agrandissez votre table, elle ne sera plus jamais égale.Une meilleure solution est de dire que vous attendez d'une colonne standard à 25% de largeur (100%/4). vous pouvez le faire en utilisant le CSS:

td{width:25%}

<table border="5" width="400" height = "400" table-layout = "auto"> 
 
\t <tr> 
 
     <td colspan = "4" align="center">Colspan = “4”</td> <!--First row of the table-->  
 
    </tr> 
 
    
 
    <tr> 
 
     <td rowspan ="3" colspan = "1" > col1 </td> 
 
     <td rowspan ="3" colspan = "1"> col2 </td> 
 
     <td rowspan ="3" colspan = "1"> col3 </td> <!--Second group of rows of the table consisting 3 rows--> 
 
     <td rowspan ="3" colspan = "1"> col4 </td> 
 
     
 
    </tr> 
 
    
 
    <tr></tr> <!--occupied by the second group of rows of the table--> 
 
    <tr></tr> <!--occupied by the second group of rows of the table--> 
 

 
    <tr> 
 
     <td colspan = "2"> colspan = 2 </td> <!--3rd row which should contain 2 
 
              equal columns--> 
 
     <td colspan ="2" > colspan = 2 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
 
             contain 3 cols and the second col is 1--> 
 
     <td > colspan = 1 </td> 
 
    </tr> 
 
    </table>

Note: Même si certaines de vos lignes ont moins de 4 colonnes de 25% fonctionne toujours parce que le navigateur ajoutera les lignes colspan jusqu'à calculer la colspan width, donc un colspan de 2 avec une largeur de 50%, etc.

Source

2017-10-06 13:25:27 Liam

Souhaite que je puisse le marquer comme une autre réponse aussi! Merci beaucoup – Sarvin

HTML Table, question colspan

Répondre

Questions connexes