Récupération de données

structure HTML et mise en forme CSS pour la récupération de données d'une table

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Toutes les balises HTML et propriétés CSS à portée de main</title>
</head>
<body>
<main class="container">
    <section class="cartouche gouttiere">
        <article>
            <h2 class="titre_cartouche">Indispensables</h2>
            <p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas. Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </article>
        <article>
            <h2 class="titre_cartouche">Structuration</h2>
            <p>2 - Praesent pellentesque elit non dui finibus, malesuada tincidunt lorem laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget rhoncus justo, non consequat justo. Integer consequat sit amet mauris sed lacinia. In lobortis tincidunt odio at finibus. In in mauris ut neque aliquet efficitur sit amet eu metus.</p>
        </article>
        <article>
            <h2 class="titre_cartouche">Sans sémantique</h2>
            <p>3 - Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
        </article>
        <article>
            <h2 class="titre_cartouche">Divers</h2>
            <p>4 - Morbi a libero dictum, tempus lectus sit amet, luctus magna. Aliquam rutrum nunc eros, sed dignissim libero iaculis sit amet. Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
        </article>
        <article>
            <h2...

CSS

/* violet très foncé1 #5f479f */
/* violet très foncé2 #9c87d3 */
/* violet foncé #e7d8f9 */
/* violet clair #f7ebff */
/* rouge #f12945 */
/* bleu #008aff */
/* gris clair #f2f1f1 */

/* saumon #fee3bf */
/* violet1 #57419d */
/* violet2 #7967b1 */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
	font-family: 'zilla_slab_regularregular';
	font-size: 1.1em;
}

body{
    margin: 1em;
    line-height: 1.3;
    background-color: #f7ebff;
}

.cartouche.gouttiere{
    margin: 1rem 0;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}

.cartouche.gouttiere > *{
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
}

.cartouche > *{
    display: inline-block;
    width: 100%;
    padding: 0 1em;
}

.container{
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
}

.cartouche > *{
    padding: 1em 1em;
    background-color: #e7d8f9;
}

.titre_cartouche{
    text-align: center;
	color: #fff;
	padding: .3rem 0;
	background-color: #5f479f;
	margin: -1rem -1rem 1rem -1rem;
	font-size: 1.7rem;
}





/* ******************************** */
/* ********** RESPONSIVE ********** */
/* ******************************** */

@media (min-width: 30rem){
    .cartouche {
      -moz-column-count: 1;
           column-count: 1;
    }
}

@media (min-width: 65rem){
    .cartouche {
      -moz-column-count: 3;
           column-count: 3;
    }
}

@media (min-width: 90rem){
    .cartouche {
      -moz-column-count: 4;
           column-count: 4;
    }
}





/* ****************************************** */
/* ********** POLICES DE CARACTERE ********** */
/* ****************************************** */

@font-face {
    font-family: 'zilla_slab_boldbold';
    src: url('../fonts/zillaslab-bold-webfont.woff2') format('woff2'),
         url('../fonts/zillaslab-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'zilla_slablight';
    src:...