Cours IT Bases CSS 029_Listes et Tableaux - Notes techniques de zhaoJian

Listes

En CSS, vous pouvez optimiser le style des listes avec les propriétés list-style-type list-style-image list-style-position.

Type de liste

Définit le type de liste, y compris les listes non ordonnées, les listes ordonnées et les listes de définition. none aucun affichage, disc point, circle cercle, square carré, decimal chiffres, lower-alpha lettres minuscules, upper-alpha lettres majuscules, decimal-leading-zero chiffres précédés de 0, lower-roman chiffres romains minuscules, upper-roman chiffres romains majuscules, etc.

Exemple :

1
.ul-none{
2
    list-style-type: none;
3
}
4
.ul-disc{
5
    list-style-type: disc;
6
}
7
.ul-circle{
8
    list-style-type: circle;
9
}
10
.ul-square{
11
    list-style-type: square;
12
}
13
.ul-decimal{
14
    list-style-type: decimal;
15
}
16
.ul-lower-alpha{
17
    list-style-type: lower-alpha;
18
}
19
.ul-upper-alpha{
20
    list-style-type: upper-alpha;
21
}
22
.ul-decimal-leading-zero{
23
    list-style-type: decimal-leading-zero;
24
}
25
.ul-lower-roman{
26
    list-style-type: lower-roman;
27
}
28
.ul-upper-roman{
29
    list-style-type: upper-roman;
30
}

1
    <ul class="ul-none">
2
        <li>Démonstration du type de liste</li>
3
        <li>Démonstration du type de liste</li>
4
        <li>Démonstration du type de liste</li>
5
    </ul>
6
    <ul class="ul-disc">
7
        <li>Démonstration du type de liste</li>
8
        <li>Démonstration du type de liste</li>
9
        <li>Démonstration du type de liste</li>
10
    </ul>
11
    <ul class="ul-circle">
12
        <li>Démonstration du type de liste</li>
13
        <li>Démonstration du type de liste</li>
14
        <li>Démonstration du type de liste</li>
15
    </ul>
16
    <ul class="ul-square">
17
        <li>Démonstration du type de liste</li>
18
        <li>Démonstration du type de liste</li>
19
        <li>Démonstration du type de liste</li>
20
    </ul>
21
    <ul class="ul-decimal">
22
        <li>Démonstration du type de liste</li>
23
        <li>Démonstration du type de liste</li>
24
        <li>Démonstration du type de liste</li>
25
    </ul>
26
    <ul class="ul-lower-alpha">
27
        <li>Démonstration du type de liste</li>
28
        <li>Démonstration du type de liste</li>
29
        <li>Démonstration du type de liste</li>
30
    </ul>
31
    <ul class="ul-upper-roman">
32
        <li>Démonstration du type de liste</li>
33
        <li>Démonstration du type de liste</li>
34
        <li>Démonstration du type de liste</li>
35
    </ul>
36
    <ul class="ul-decimal-leading-zero">
37
        <li>Démonstration du type de liste</li>
38
        <li>Démonstration du type de liste</li>
39
        <li>Démonstration du type de liste</li>
40
    </ul>
41
    <ul class="ul-lower-roman">
42
        <li>Démonstration du type de liste</li>
43
        <li>Démonstration du type de liste</li>
44
        <li>Démonstration du type de liste</li>
45
    </ul>
46
    <ul class="ul-upper-roman">
47
        <li>Démonstration du type de liste</li>
48
        <li>Démonstration du type de liste</li>
49
        <li>Démonstration du type de liste</li>
50
    </ul>

Effet : Effet de l'exemple

Marqueur de liste

Définit la position du marqueur des éléments de liste (intérieur ou extérieur). inside intérieur, outside extérieur

Exemple :

1
.ul-inside{
2
    list-style-position: inside;
3
}
4
.ul-outside{
5
    list-style-position: outside;
6
}
7
li{
8
    background-color: aquamarine;
9
}

1
    <ul class="ul-inside">
2
        <li>Démonstration du marqueur de liste</li>
3
        <li>Démonstration du marqueur de liste</li>
4
        <li>Démonstration du marqueur de liste</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>Démonstration du marqueur de liste</li>
8
        <li>Démonstration du marqueur de liste</li>
9
        <li>Démonstration du marqueur de liste</li>
10
    </ul>

Effet : Effet de l'exemple

Image de liste

Définit l’image du marqueur de liste, qui peut être définie comme l’URL d’une image.

Exemple :

1
.ul-image1{
2
    list-style-image: url("li1.png");
3
}
4
.ul-image2{
5
    list-style-image: url("li2.png");
6
}
7
.ul-image3{
8
    list-style-image: url("li3.png");
9
}

1
    <ul class="ul-image1">
2
        <li>Démonstration du marqueur de liste</li>
3
        <li>Démonstration du marqueur de liste</li>
4
        <li>Démonstration du marqueur de liste</li>
5
    </ul>
6
    <ul class="ul-image2">
7
        <li>Démonstration du marqueur de liste</li>
8
        <li>Démonstration du marqueur de liste</li>
9
        <li>Démonstration du marqueur de liste</li>
10
    </ul>
11
    <ul class="ul-image3">
12
        <li>Démonstration du marqueur de liste</li>
13
        <li>Démonstration du marqueur de liste</li>
14
        <li>Démonstration du marqueur de liste</li>
15
    </ul>

Effet :

Effet de l'exemple La taille définie via ul peut entraîner un étirement ou une compression de l’image, il est donc préférable d’utiliser un outil d’édition pour définir la taille originale de l’image. Si vous souhaitez ajuster la taille d’affichage de l’image dans l’élément de liste sans modifier l’image elle-même, vous pouvez utiliser background-image (image d’arrière-plan) de li pour contrôler de manière flexible l’image de la liste.

Exemple :

1
li{
2
    list-style-type: none;
3
    background-image: url("li1.png");
4
    background-size: 10px 10px;
5
    background-repeat: no-repeat;
6
    background-position: 2px center;
7
    padding-left: 20px;
8
}

1
    <ul>
2
        <li>Démonstration du marqueur de liste</li>
3
        <li>Démonstration du marqueur de liste</li>
4
        <li>Démonstration du marqueur de liste</li>
5
    </ul>

Effet : Effet de l'exemple Forme abrégée : La propriété list-style permet de définir simultanément les trois propriétés de style du marqueur de liste : list-style-type, list-style-position et list-style-image. Des valeurs peuvent être omises, mais l’ordre ne peut pas être modifié.

Exemple :

1
ul{
2
    list-style: square inside url('li1.png');
3
}

Tableaux

En CSS, vous pouvez contrôler l’apparence et la mise en page des tableaux avec plusieurs propriétés comme border.

`border`

Définit la bordure du tableau, permettant de configurer la largeur, la couleur et le style de la bordure.

Exemple :

1
table {
2
    border: 1px solid red;
3
}

1
<table>
2
    <tr>
3
        <td>Démonstration de tableau 1</td>
4
        <td>Démonstration de tableau 2</td>
5
        <td>Démonstration de tableau 3</td>
6
        <td>Démonstration de tableau 4</td>
7
    </tr>
8
    <tr>
9
        <td>Démonstration de tableau 1</td>
10
        <td>Démonstration de tableau 2</td>
11
        <td>Démonstration de tableau 3</td>
12
        <td>Démonstration de tableau 4</td>
13
    </tr>
14
    <tr>
15
        <td>Démonstration de tableau 1</td>
16
        <td>Démonstration de tableau 2</td>
17
        <td>Démonstration de tableau 3</td>
18
        <td>Démonstration de tableau 4</td>
19
    </tr>
20
</table>

Effet :

Effet de l'exemple

`th` `td`

En CSS, th et td permettent de contrôler le style de l’en-tête, des lignes et des cellules de données du tableau.

Exemple :

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Définir la couleur de fond de l'en-tête */
6
    color: #333; /* Définir la couleur du texte de l'en-tête */
7
    font-weight: bold; /* Mettre le texte de l'en-tête en gras */
8
    padding: 10px; /* Définir le padding de l'en-tête */
9
    text-align: center; /* Centrer le texte */
10
}
11
td {
12
    border: 1px solid green; /* Définir la bordure inférieure entre les lignes */
13
    padding: 8px; /* Définir le padding de la cellule */
14
    text-align: center; /* Centrer le texte */
15
}

1
    <table>
2
        <tr>
3
            <th>Démonstration de tableau 1</th>
4
            <th>Démonstration de tableau 2</th>
5
            <th>Démonstration de tableau 3</th>
6
            <th>Démonstration de tableau 4</th>
7
        </tr>
8
        <tr>
9
            <td>Démonstration de tableau 1</td>
10
            <td>Démonstration de tableau 2</td>
11
            <td>Démonstration de tableau 3</td>
12
            <td>Démonstration de tableau 4</td>
13
        </tr>
14
        <tr>
15
            <td>Démonstration de tableau 1</td>
16
            <td>Démonstration de tableau 2</td>
17
            <td>Démonstration de tableau 3</td>
18
            <td>Démonstration de tableau 4</td>
19
        </tr>
20
    </table>

Effet :

Effet de l'exemple

`border-collapse`

Propriété permettant de contrôler la fusion des bordures adjacentes d’un tableau.

separate : ne fusionne pas les bordures, les bordures du tableau restent indépendantes.
collapse : fusionne les bordures, les bordures du tableau sont fusionnées ensemble.

Exemple :

1
.table1 {
2
    border: 2px solid red;
3
    border-collapse: separate;
4
}
5
.table2 {
6
    border: 2px solid red;
7
    border-collapse: collapse;
8
}

1
    <table class="table1">
2
        <tr>
3
            <td>Démonstration de tableau 1</td>
4
            <td>Démonstration de tableau 2</td>
5
            <td>Démonstration de tableau 3</td>
6
            <td>Démonstration de tableau 4</td>
7
        </tr>
8
        <tr>
9
            <td>Démonstration de tableau 1</td>
10
            <td>Démonstration de tableau 2</td>
11
            <td>Démonstration de tableau 3</td>
12
            <td>Démonstration de tableau 4</td>
13
        </tr>
14
        <tr>
15
            <td>Démonstration de tableau 1</td>
16
            <td>Démonstration de tableau 2</td>
17
            <td>Démonstration de tableau 3</td>
18
            <td>Démonstration de tableau 4</td>
19
        </tr>
20
    </table>
21
    <table class="table2">
22
        <tr>
23
            <td>Démonstration de tableau 1</td>
24
            <td>Démonstration de tableau 2</td>
25
            <td>Démonstration de tableau 3</td>
26
            <td>Démonstration de tableau 4</td>
27
        </tr>
28
        <tr>
29
            <td>Démonstration de tableau 1</td>
30
            <td>Démonstration de tableau 2</td>
31
            <td>Démonstration de tableau 3</td>
32
            <td>Démonstration de tableau 4</td>
33
        </tr>
34
        <tr>
35
            <td>Démonstration de tableau 1</td>
36
            <td>Démonstration de tableau 2</td>
37
            <td>Démonstration de tableau 3</td>
38
            <td>Démonstration de tableau 4</td>
39
        </tr>
40
    </table>

Effet :

Effet de l'exemple

`border-spacing`

Définit l’espacement des bordures du tableau, permettant de configurer l’espace entre les bordures.

Exemple :

1
table {
2
    border: 1px solid red;
3
    border-spacing: 10px;
4
}

1
    <table>
2
        <tr>
3
            <td>Démonstration de tableau 1</td>
4
            <td>Démonstration de tableau 2</td>
5
            <td>Démonstration de tableau 3</td>
6
            <td>Démonstration de tableau 4</td>
7
        </tr>
8
        <tr>
9
            <td>Démonstration de tableau 1</td>
10
            <td>Démonstration de tableau 2</td>
11
            <td>Démonstration de tableau 3</td>
12
            <td>Démonstration de tableau 4</td>
13
        </tr>
14
        <tr>
15
            <td>Démonstration de tableau 1</td>
16
            <td>Démonstration de tableau 2</td>
17
            <td>Démonstration de tableau 3</td>
18
            <td>Démonstration de tableau 4</td>
19
        </tr>
20
    </table>

Effet :

Effet de l'exemple

`table-layout`

Définit le mode de mise en page du tableau.

auto : mise en page automatique, la largeur et la hauteur du tableau sont déterminées par le contenu.
fixed : mise en page fixe, la largeur et la hauteur du tableau sont déterminées par les valeurs spécifiées.

Exemple :

1
.table1 {
2
    border: 1px solid red;
3
    table-layout: auto;
4
    width: 100%;
5
}
6
.table2 {
7
    border: 1px solid red;
8
    table-layout: fixed;
9
    width: 100%;
10
}
11
th, td {
12
    border: 1px solid red;
13
}

1
    <table class="table1">
2
        <tr>
3
            <td>Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1</td>
4
            <td>Démonstration de tableau 2</td>
5
            <td>Démonstration de tableau 3</td>
6
            <td>Démonstration de tableau 4</td>
7
        </tr>
8
        <tr>
9
            <td>Démonstration de tableau 1</td>
10
            <td>Démonstration de tableau 2</td>
11
            <td>Démonstration de tableau 3</td>
12
            <td>Démonstration de tableau 4</td>
13
        </tr>
14
        <tr>
15
            <td>Démonstration de tableau 1</td>
16
            <td>Démonstration de tableau 2</td>
17
            <td>Démonstration de tableau 3</td>
18
            <td>Démonstration de tableau 4</td>
19
        </tr>
20
    </table>
21
    <br>
22
    <table class="table2">
23
        <tr>
24
            <td>Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1</td>
25
            <td>Démonstration de tableau 2</td>
26
            <td>Démonstration de tableau 3</td>
27
            <td>Démonstration de tableau 4</td>
28
        </tr>
29
        <tr>
30
            <td>Démonstration de tableau 1</td>
31
            <td>Démonstration de tableau 2</td>
32
            <td>Démonstration de tableau 3</td>
33
            <td>Démonstration de tableau 4</td>
34
        </tr>
35
        <tr>
36
            <td>Démonstration de tableau 1</td>
37
            <td>Démonstration de tableau 2</td>
38
            <td>Démonstration de tableau 3</td>
39
            <td>Démonstration de tableau 4</td>
40
        </tr>
41
    </table>

Effet :

Effet de l'exemple

`caption-side`

Définit la position de la légende du tableau, avec les valeurs suivantes :

top : la légende est en haut du tableau.
bottom : la légende est en bas du tableau.

Exemple :

1
.table1 {
2
    border: 1px solid red;
3
    caption-side: top;
4
}
5
.table2 {
6
    border: 1px solid red;
7
    caption-side: bottom;
8
}

1
    <table class="table1">
2
        <caption>Démonstration de l'en-tête ABC123</caption>
3
        <tr>
4
            <td>Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1</td>
5
            <td>Démonstration de tableau 2</td>
6
            <td>Démonstration de tableau 3</td>
7
            <td>Démonstration de tableau 4</td>
8
        </tr>
9
        <tr>
10
            <td>Démonstration de tableau 1</td>
11
            <td>Démonstration de tableau 2</td>
12
            <td>Démonstration de tableau 3</td>
13
            <td>Démonstration de tableau 4</td>
14
        </tr>
15
        <tr>
16
            <td>Démonstration de tableau 1</td>
17
            <td>Démonstration de tableau 2</td>
18
            <td>Démonstration de tableau 3</td>
19
            <td>Démonstration de tableau 4</td>
20
        </tr>
21
    </table>
22
    <br>
23
    <table class="table2">
24
        <caption>Démonstration de l'en-tête ABC123</caption>
25
        <tr>
26
            <td>Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1Démonstration de tableau 1</td>
27
            <td>Démonstration de tableau 2</td>
28
            <td>Démonstration de tableau 3</td>
29
            <td>Démonstration de tableau 4</td>
30
        </tr>
31
        <tr>
32
            <td>Démonstration de tableau 1</td>
33
            <td>Démonstration de tableau 2</td>
34
            <td>Démonstration de tableau 3</td>
35
            <td>Démonstration de tableau 4</td>
36
        </tr>
37
        <tr>
38
            <td>Démonstration de tableau 1</td>
39
            <td>Démonstration de tableau 2</td>
40
            <td>Démonstration de tableau 3</td>
41
            <td>Démonstration de tableau 4</td>
42
        </tr>
43
    </table>

Effet : Effet de l'exemple

Listes

Type de liste

Marqueur de liste

Image de liste

Tableaux

border

th td

border-collapse

border-spacing

table-layout

caption-side

Commentaires

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`