web-dev-qa-db-fra.com

Puis-je étaler 2 cellules sur 3 lignes dans un tableau HTML?

Je sais qu'il est possible d'étaler une cellule sur plusieurs lignes à l'aide de l'attribut rowspan. Toutefois, est-il possible d'étaler deux cellules de manière uniforme sur plusieurs lignes, sans recourir à une table imbriquée?

htmltable
4
sanity

On dirait que c'est ce que vous recherchez:

+----------+--------------------+
|          |                    |
|          |       row 1        |
|    A     |                    |
|          +--------------------+
|          |                    |
+----------+       row 2        |
|          |                    |
|          +--------------------+
|    B     |                    |
|          |       row 3        |
|          |                    |
+----------+--------------------+

Si tel est le cas, non, techniquement parlant, cela n’est pas possible en HTML, mais c’est uniquement à cause de la façon dont nous pensons des lignes.

Au lieu de 3 lignes, si cette table était en réalité de 6 lignes, cela fonctionnerait si vous ajustiez les champs de lignes à:

où rs# est rowspan="#"

+----------+--------------------+  ------
|          |                    |      <- Row 1  
|          |       rs2          |  ------
|    rs3   |                    |      <- Row 2
|          +--------------------+  ------
|          |                    |      <- Row 3
+----------+       rs2          |  ------
|          |                    |      <- Row 4
|          +--------------------+  ------
|    rs3   |                    |      <- Row 5
|          |       rs2          |  ------
|          |                    |      <- Row 6
+----------+--------------------+  ------
11
scunliffe

Sûr. rowspan respectera la largeur définie pour la colonne dans laquelle elle est utilisée. En d'autres termes, si la première colonne de l'exemple ci-dessous a une largeur de 200 pixels, toute cellule de tableau de cette colonne, même si elle utilise rowspan aura également une largeur de 200 pixels.

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

Voici un exemple avec une cellule s'étendant sur plusieurs lignes et colonnes

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3" colspan="2">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

Cette page est ancienne mais explique quand même comment cela fonctionne très bien.

Si ce n'est pas ce que vous recherchez, nous aurons besoin de mieux expliquer pourquoi rangspan n'est pas ce que vous recherchez.

7
John Conde