{"absolute_url": "/fallinov/css-tableau-avec-des-div/", "blog_post": false, "code": "\n\n \n \n CSS : Réaliser un tableau avec des div\n \n \n \n

CSS : Réaliser un tableau avec des div

\n
\n \t
\n \t\t
\n \t\t\tTitre\n \t\t
\n \t\t
\n \t\t\tTitre\n \t\t
\n \t\t
\n \t\t\tTitre\n \t\t
\n \t
\n \t
\n \t\t
\n \t\t\t

Cellule 1

\n \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n \t\t
\n \t\t
\n \t\t\t

Cellule 2

\n \t\t\tbla bla bla\n \t\t
\n \t\t
\n \t\t\t

Cellule 3

\n \t\t\tbla bla bla\n \t\t
\n \t
\n \t
\n \t\t
\n \t\t\t

Cellule 4

\n \t\t\tbla bla bla\n \t\t
\n \t\t
\n \t\t\t

Cellule 5

\n \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n \t\t
\n \t\t
\n \t\t\t

Cellule 6

\n \t\t\tbla bla bla\n \t\t
\n \t
\n
\n \n", "created": "2012-04-27T09:18:44", "description": null, "description_rendered": "None", "embed_url": "https://snipt.net/embed/732daf3bb7336a5b599c131cbe3dc87b/", "full_absolute_url": "/fallinov/css-tableau-avec-des-div/", "id": 39196, "lexer": "html", "line_count": 90, "log_entries": [], "meta": null, "modified": "2019-06-17T05:46:33.768796", "publish_date": null, "raw_url": "/raw/732daf3bb7336a5b599c131cbe3dc87b/", "resource_uri": "/api/public/snipt/39196/", "slug": "css-tableau-avec-des-div", "stylized": "
 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n71\n72\n73\n74\n75\n76\n77\n78\n79\n80\n81\n82\n83\n84\n85\n86\n87\n88\n89\n90
<!DOCTYPE html>\n<html lang="fr">\n    <head>\n        <meta charset="UTF-8">\n        <title>CSS : Réaliser un tableau avec des div</title>\n        <style type="text/css">\n            .tableau {\n            \tdisplay: table;/*Mode tableau*/\n            \tborder-spacing: 10px;/*Espace entre les cellules*/\n            \twidth: 500px;\n            }\n            .ligne {\n            \tdisplay: table-row;/*Mode ligne*/\n            }\n            .cellule {\n            \tdisplay: table-cell;/*Mode cellule*/\n            \tbackground-color: red;\n            \tpadding: 20px;\n            }\n            .cellule h2 {\n            \twhite-space: nowrap;/*empêche le retour à la ligne automatique*/\n            }\n            /*Pour les cellules de la 1re ligne du tableau*/\n            .ligne:first-child .cellule {\n            \tbackground-color: yellow;\n            }\n            /*Pour les cellules de la 1re colonne du tableau*/\n            .cellule:first-child {\n            \tbackground-color: gray;\n            }\n            \n            /*Classes pour les différents alignements verticaux*/\n            .haut {\n            \tvertical-align: top;\n            }\n            .milieu {\n            \tvertical-align: middle;\n            }\n            .bas {\n            \tvertical-align: bottom;\n            } \n        </style>\n    </head>\n    <body>\n        <h1>CSS : Réaliser un tableau avec des div</h1>\n        <div class="tableau">\n        \t<div class="ligne">\n        \t\t<div class="cellule">\n        \t\t\tTitre\n        \t\t</div>\n        \t\t<div class="cellule">\n        \t\t\tTitre\n        \t\t</div>\n        \t\t<div class="cellule">\n        \t\t\tTitre\n        \t\t</div>\n        \t</div>\n        \t<div class="ligne">\n        \t\t<div class="cellule haut">\n        \t\t\t<h2>Cellule 1</h2>\n        \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n        \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n        \t\t</div>\n        \t\t<div class="cellule milieu">\n        \t\t\t<h2>Cellule 2</h2>\n        \t\t\tbla bla bla\n        \t\t</div>\n        \t\t<div class="cellule bas">\n        \t\t\t<h2>Cellule 3</h2>\n        \t\t\tbla bla bla\n        \t\t</div>\n        \t</div>\n        \t<div class="ligne">\n        \t\t<div class="cellule haut">\n        \t\t\t<h2>Cellule 4</h2>\n        \t\t\tbla bla bla\n        \t\t</div>\n        \t\t<div class="cellule haut">\n        \t\t\t<h2>Cellule 5</h2>\n        \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n        \t\t\tbla bla bla bla bla bla bla bla bla bla bla\n        \t\t</div>\n        \t\t<div class="cellule haut">\n        \t\t\t<h2>Cellule 6</h2>\n        \t\t\tbla bla bla\n        \t\t</div>\n        \t</div>\n        </div>\n    </body>\n</html>\n
\n
", "tags": [{"absolute_url": "/public/tag/css/", "id": 20, "name": "css", "resource_uri": "/api/public/tag/20/", "snipts": "/api/public/snipt/?tag=20"}, {"absolute_url": "/public/tag/html/", "id": 67, "name": "html", "resource_uri": "/api/public/tag/67/", "snipts": "/api/public/snipt/?tag=67"}, {"absolute_url": "/public/tag/table/", "id": 375, "name": "table", "resource_uri": "/api/public/tag/375/", "snipts": "/api/public/snipt/?tag=375"}, {"absolute_url": "/public/tag/display/", "id": 1803, "name": "display", "resource_uri": "/api/public/tag/1803/", "snipts": "/api/public/snipt/?tag=1803"}, {"absolute_url": "/public/tag/vertical-align_1/", "id": 10968, "name": "vertical-align", "resource_uri": "/api/public/tag/10968/", "snipts": "/api/public/snipt/?tag=10968"}, {"absolute_url": "/public/tag/table-row_1/", "id": 14198, "name": "table-row", "resource_uri": "/api/public/tag/14198/", "snipts": "/api/public/snipt/?tag=14198"}, {"absolute_url": "/public/tag/table-cell/", "id": 14199, "name": "table-cell", "resource_uri": "/api/public/tag/14199/", "snipts": "/api/public/snipt/?tag=14199"}], "title": "CSS - Tableau avec des div", "user": {"absolute_url": "/fallinov/", "email_md5": "aeac65860865f1b9ff5c1b7db55d6874", "id": 8203, "resource_uri": "/api/public/user/8203/", "snipts": "/api/public/snipt/?user=8203", "snipts_count": 1, "username": "fallinov"}}