<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>CSS : Réaliser un tableau avec des div</title>
        <style type="text/css">
            .tableau {
            	display: table;/*Mode tableau*/
            	border-spacing: 10px;/*Espace entre les cellules*/
            	width: 500px;
            }
            .ligne {
            	display: table-row;/*Mode ligne*/
            }
            .cellule {
            	display: table-cell;/*Mode cellule*/
            	background-color: red;
            	padding: 20px;
            }
            .cellule h2 {
            	white-space: nowrap;/*empêche le retour à la ligne automatique*/
            }
            /*Pour les cellules de la 1re ligne du tableau*/
            .ligne:first-child .cellule {
            	background-color: yellow;
            }
            /*Pour les cellules de la 1re colonne du tableau*/
            .cellule:first-child {
            	background-color: gray;
            }
            
            /*Classes pour les différents alignements verticaux*/
            .haut {
            	vertical-align: top;
            }
            .milieu {
            	vertical-align: middle;
            }
            .bas {
            	vertical-align: bottom;
            } 
        </style>
    </head>
    <body>
        <h1>CSS : Réaliser un tableau avec des div</h1>
        <div class="tableau">
        	<div class="ligne">
        		<div class="cellule">
        			Titre
        		</div>
        		<div class="cellule">
        			Titre
        		</div>
        		<div class="cellule">
        			Titre
        		</div>
        	</div>
        	<div class="ligne">
        		<div class="cellule haut">
        			<h2>Cellule 1</h2>
        			bla bla bla bla bla bla bla bla bla bla bla
        			bla bla bla bla bla bla bla bla bla bla bla
        		</div>
        		<div class="cellule milieu">
        			<h2>Cellule 2</h2>
        			bla bla bla
        		</div>
        		<div class="cellule bas">
        			<h2>Cellule 3</h2>
        			bla bla bla
        		</div>
        	</div>
        	<div class="ligne">
        		<div class="cellule haut">
        			<h2>Cellule 4</h2>
        			bla bla bla
        		</div>
        		<div class="cellule haut">
        			<h2>Cellule 5</h2>
        			bla bla bla bla bla bla bla bla bla bla bla
        			bla bla bla bla bla bla bla bla bla bla bla
        		</div>
        		<div class="cellule haut">
        			<h2>Cellule 6</h2>
        			bla bla bla
        		</div>
        	</div>
        </div>
    </body>
</html>