IT-Kurs CSS-Grundlagen 029_Listen und Tabellen

Listen

In CSS kann man den Listenstil durch die Eigenschaften list-style-type, list-style-image, list-style-position usw. optimieren.

Listentyp

Definiert den Typ der Liste, einschließlich ungeordneter Listen, geordneter Listen und Definitionslisten. none nicht anzeigen, disc Punkt, circle Kreis, square Quadrat, decimal Zahlen, lower-alpha Kleinbuchstaben, upper-alpha Großbuchstaben, decimal-leading-zero Zahlen mit führender Null, lower-roman kleine römische Zahlen, upper-roman große römische Zahlen usw.

Beispiel:

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

Effekt: Beispieleffekt

Listenmarkierung

Legt die Position der Listenmarkierung fest (innen oder außen). inside innen, outside außen

Beispiel:

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>Listenmarkierungsdemonstration</li>
3
        <li>Listenmarkierungsdemonstration</li>
4
        <li>Listenmarkierungsdemonstration</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>Listenmarkierungsdemonstration</li>
8
        <li>Listenmarkierungsdemonstration</li>
9
        <li>Listenmarkierungsdemonstration</li>
10
    </ul>

Effekt: Beispieleffekt

Listenbild

Legt das Bild für die Listenmarkierung fest, das als URL-Adresse des Bildes angegeben werden kann.

Beispiel:

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>Listenmarkierungsdemonstration</li>
3
        <li>Listenmarkierungsdemonstration</li>
4
        <li>Listenmarkierungsdemonstration</li>
5
    </ul>
6
    <ul class="ul-image2">
7
        <li>Listenmarkierungsdemonstration</li>
8
        <li>Listenmarkierungsdemonstration</li>
9
        <li>Listenmarkierungsdemonstration</li>
10
    </ul>
11
    <ul class="ul-image3">
12
        <li>Listenmarkierungsdemonstration</li>
13
        <li>Listenmarkierungsdemonstration</li>
14
        <li>Listenmarkierungsdemonstration</li>
15
    </ul>

Effekt:

Beispieleffekt Die über ul eingestellte Größe kann dazu führen, dass das Bild gestreckt oder gestaucht wird. Daher ist es am besten, die Originalgröße des Bildes mit einem Bearbeitungswerkzeug festzulegen. Wenn Sie die Anzeigegröße des Bildes im Listenelement anpassen möchten, ohne das Bild selbst zu ändern, können Sie background-image (Hintergrundbild) des li-Elements verwenden, um das Listenbild flexibel zu steuern.

Beispiel:

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>Listenmarkierungsdemonstration</li>
3
        <li>Listenmarkierungsdemonstration</li>
4
        <li>Listenmarkierungsdemonstration</li>
5
    </ul>

Effekt: Beispieleffekt Kurzschreibweise: Die Eigenschaft list-style wird verwendet, um gleichzeitig drei Stileigenschaften der Listenmarkierung festzulegen: list-style-type, list-style-position und list-style-image. Werte können fehlen, aber die Reihenfolge darf nicht geändert werden.

Beispiel:

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

Tabellen

In CSS kann man das Aussehen und Layout von Tabellen durch border und andere Eigenschaften steuern.

`border`

Definiert den Rahmen der Tabelle, wobei Breite, Farbe und Stil des Rahmens festgelegt werden können.

Beispiel:

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

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

Effekt:

Beispieleffekt

`th` `td`

In CSS können th und td den Stil von Tabellenköpfen, Tabellenzeilen und Tabellendatenzellen steuern.

Beispiel:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Hintergrundfarbe der Kopfzeile festlegen */
6
    color: #333; /* Textfarbe der Kopfzeile festlegen */
7
    font-weight: bold; /* Kopfzeilentext fett setzen */
8
    padding: 10px; /* Innenabstand der Kopfzeile festlegen */
9
    text-align: center; /* Text zentriert ausrichten */
10
}
11
td {
12
    border: 1px solid green; /* Untere Rahmen zwischen Zeilen festlegen */
13
    padding: 8px; /* Innenabstand der Zelle festlegen */
14
    text-align: center; /* Text zentriert ausrichten */
15
}

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

Effekt:

Beispieleffekt

`border-collapse`

Eine Eigenschaft zur Steuerung der Zusammenführung benachbarter Tabellenrahmen.

separate: Rahmen werden nicht zusammengeführt, die Tabellenrahmen bleiben unabhängig.
collapse: Rahmen werden zusammengeführt, die Tabellenrahmen werden vereint.

Beispiel:

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

Effekt:

Beispieleffekt

`border-spacing`

Definiert den Rahmenabstand der Tabelle, der Abstand zwischen den Rahmen kann festgelegt werden.

Beispiel:

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

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

Effekt:

Beispieleffekt

`table-layout`

Definiert die Layoutmethode der Tabelle.

auto: Automatisches Layout, Breite und Höhe der Tabelle werden durch den Inhalt bestimmt.
fixed: Festes Layout, Breite und Höhe der Tabelle werden durch die angegebenen Werte bestimmt.

Beispiel:

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

Effekt:

Beispieleffekt

`caption-side`

Definiert die Position der Tabellenbeschriftung, folgende Werte können festgelegt werden

top: Beschriftung befindet sich oben in der Tabelle.
bottom: Beschriftung befindet sich unten in der Tabelle.

Beispiel:

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>Kopfzeilendemonstration ABC123</caption>
3
        <tr>
4
            <td>Tabellendemonstration 1 Tabellendemonstration 1 Tabellendemonstration 1 Tabellendemonstration 1</td>
5
            <td>Tabellendemonstration 2</td>
6
            <td>Tabellendemonstration 3</td>
7
            <td>Tabellendemonstration 4</td>
8
        </tr>
9
        <tr>
10
            <td>Tabellendemonstration 1</td>
11
            <td>Tabellendemonstration 2</td>
12
            <td>Tabellendemonstration 3</td>
13
            <td>Tabellendemonstration 4</td>
14
        </tr>
15
        <tr>
16
            <td>Tabellendemonstration 1</td>
17
            <td>Tabellendemonstration 2</td>
18
            <td>Tabellendemonstration 3</td>
19
            <td>Tabellendemonstration 4</td>
20
        </tr>
21
    </table>
22
    <br>
23
    <table class="table2">
24
        <caption>Kopfzeilendemonstration ABC123</caption>
25
        <tr>
26
            <td>Tabellendemonstration 1 Tabellendemonstration 1 Tabellendemonstration 1 Tabellendemonstration 1</td>
27
            <td>Tabellendemonstration 2</td>
28
            <td>Tabellendemonstration 3</td>
29
            <td>Tabellendemonstration 4</td>
30
        </tr>
31
        <tr>
32
            <td>Tabellendemonstration 1</td>
33
            <td>Tabellendemonstration 2</td>
34
            <td>Tabellendemonstration 3</td>
35
            <td>Tabellendemonstration 4</td>
36
        </tr>
37
        <tr>
38
            <td>Tabellendemonstration 1</td>
39
            <td>Tabellendemonstration 2</td>
40
            <td>Tabellendemonstration 3</td>
41
            <td>Tabellendemonstration 4</td>
42
        </tr>
43
    </table>

Effekt: Beispieleffekt

Listen

Listentyp

Listenmarkierung

Listenbild

Tabellen

border

th td

border-collapse

border-spacing

table-layout

caption-side

Kommentare

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`