IT Course CSS Basics 029_Lists and Tables

Lists

In CSS, list styles can be optimized through properties like list-style-type, list-style-image, and list-style-position.

List Type

Define the type of list, including unordered lists, ordered lists, and definition lists. none no display, disc filled circle, circle circle, square square, decimal numbers, lower-alpha lowercase letters, upper-alpha uppercase letters, decimal-leading-zero numbers with leading zeros, lower-roman lowercase roman numerals, upper-roman uppercase roman numerals, etc.

Example:

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

Effect: Example effect

List Marker

Set the marker position of list items (inside or outside). inside inside, outside outside

Example:

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

Effect: Example effect

List Image

Set the image for the list marker, which can be set to the URL address of an image.

Example:

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

Effect:

Example effect The size set through ul may cause the image to stretch or compress, so it’s best to use editing tools to set the original size of the image. If you need to adjust the display size of the image in list items without changing the image itself, you can use the background-image property of li to flexibly control list images.

Example:

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>List marker demo</li>
3
        <li>List marker demo</li>
4
        <li>List marker demo</li>
5
    </ul>

Effect: Example effect Shorthand: The list-style property is used to set three style properties for list item markers at once: list-style-type, list-style-position, and list-style-image. Values can be omitted, but the order cannot change.

Example:

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

Tables

In CSS, the appearance and layout of tables can be controlled through multiple properties such as border.

`border`

Define the border of the table, which can set the width, color, and style of the border.

Example:

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

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

Effect:

Example effect

`th` `td`

In CSS, th and td can control the styles of table headers, table rows, and table data cells.

Example:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Set header background color */
6
    color: #333; /* Set header text color */
7
    font-weight: bold; /* Set header text bold */
8
    padding: 10px; /* Set header padding */
9
    text-align: center; /* Set text center alignment */
10
}
11
td {
12
    border: 1px solid green; /* Set bottom border between rows */
13
    padding: 8px; /* Set cell padding */
14
    text-align: center; /* Set text center alignment */
15
}

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

Effect:

Example effect

`border-collapse`

A property used to control how adjacent borders of a table are merged.

separate: Do not merge borders, table borders remain independent.
collapse: Merge borders, table borders are merged together.

Example:

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

Effect:

Example effect

`border-spacing`

Define the border spacing of the table, which can set the spacing between borders.

Example:

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

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

Effect:

Example effect

`table-layout`

Define the layout method of the table.

auto: Automatic layout, the width and height of the table are determined by the content.
fixed: Fixed layout, the width and height of the table are determined by specified values.

Example:

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

Effect:

Example effect

`caption-side`

Define the position of the table caption, which can be set to the following values:

top: The caption is at the top of the table.
bottom: The caption is at the bottom of the table.

Example:

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

Effect: Example effect

Lists

List Type

List Marker

List Image

Tables

border

th td

border-collapse

border-spacing

table-layout

caption-side

Comments

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`