Curso IT Fundamentos CSS 029_Listas y Tablas - Notas técnicas de zhaoJian

Listas

En CSS se puede optimizar el estilo de las listas mediante las propiedades list-style-type, list-style-image, list-style-position, etc.

Tipo de lista

Define el tipo de lista, incluyendo listas desordenadas, listas ordenadas y listas de definición. none no mostrar, disc punto, circle círculo, square cuadrado, decimal números, lower-alpha letras minúsculas, upper-alpha letras mayúsculas, decimal-leading-zero números con cero inicial, lower-roman números romanos en minúscula, upper-roman números romanos en mayúscula, etc.

Ejemplo:

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

Efecto: Efecto del ejemplo

Marcador de lista

Establece la posición del marcador de la lista (interior o exterior). inside interior, outside exterior

Ejemplo:

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>Demostración de marcador de lista</li>
3
        <li>Demostración de marcador de lista</li>
4
        <li>Demostración de marcador de lista</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>Demostración de marcador de lista</li>
8
        <li>Demostración de marcador de lista</li>
9
        <li>Demostración de marcador de lista</li>
10
    </ul>

Efecto: Efecto del ejemplo

Imagen de lista

Establece la imagen del marcador de la lista, que puede configurarse como la dirección URL de la imagen.

Ejemplo:

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

Efecto:

Efecto del ejemplo El tamaño configurado mediante ul puede causar que la imagen se estire o comprima, por lo que es mejor establecer el tamaño original de la imagen con una herramienta de edición. Si necesita ajustar el tamaño de visualización de la imagen en el elemento de lista sin cambiar la imagen en sí, puede usar background-image (imagen de fondo) del elemento li para controlar de manera flexible la imagen de la lista.

Ejemplo:

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>Demostración de marcador de lista</li>
3
        <li>Demostración de marcador de lista</li>
4
        <li>Demostración de marcador de lista</li>
5
    </ul>

Efecto: Efecto del ejemplo Forma abreviada: La propiedad list-style se utiliza para establecer simultáneamente tres propiedades de estilo del marcador de lista: list-style-type, list-style-position y list-style-image. Pueden faltar valores, pero el orden no puede cambiar.

Ejemplo:

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

Tablas

En CSS se puede controlar la apariencia y el diseño de las tablas mediante border y otras propiedades.

`border`

Define el borde de la tabla, donde se puede establecer el ancho, color y estilo del borde.

Ejemplo:

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

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

Efecto:

Efecto del ejemplo

`th` `td`

En CSS, th y td pueden controlar el estilo de los encabezados de tabla, filas de tabla y celdas de datos de tabla.

Ejemplo:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Establecer color de fondo del encabezado */
6
    color: #333; /* Establecer color de texto del encabezado */
7
    font-weight: bold; /* Establecer texto del encabezado en negrita */
8
    padding: 10px; /* Establecer padding del encabezado */
9
    text-align: center; /* Establecer texto centrado */
10
}
11
td {
12
    border: 1px solid green; /* Establecer borde inferior entre filas */
13
    padding: 8px; /* Establecer padding de la celda */
14
    text-align: center; /* Establecer texto centrado */
15
}

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

Efecto:

Efecto del ejemplo

`border-collapse`

Una propiedad para controlar la forma de fusión de los bordes adyacentes de la tabla.

separate: No fusionar bordes, los bordes de la tabla permanecen independientes.
collapse: Fusionar bordes, los bordes de la tabla se combinan.

Ejemplo:

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

Efecto:

Efecto del ejemplo

`border-spacing`

Define el espaciado de los bordes de la tabla, se puede establecer el espacio entre los bordes.

Ejemplo:

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

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

Efecto:

Efecto del ejemplo

`table-layout`

Define el modo de diseño de la tabla.

auto: Diseño automático, el ancho y alto de la tabla están determinados por el contenido.
fixed: Diseño fijo, el ancho y alto de la tabla están determinados por los valores especificados.

Ejemplo:

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

Efecto:

Efecto del ejemplo

`caption-side`

Define la posición del título de la tabla, se pueden establecer los siguientes valores

top: El título se encuentra en la parte superior de la tabla.
bottom: El título se encuentra en la parte inferior de la tabla.

Ejemplo:

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

Efecto: Efecto del ejemplo

Listas

Tipo de lista

Marcador de lista

Imagen de lista

Tablas

border

th td

border-collapse

border-spacing

table-layout

caption-side

Comentarios

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`