Post

HTML - List And Table

Posted Updated
By Grace L
2 min read

[toc]

HTML - List And Table

HTML lists

  • list: <ul>, <ol>, <dl>
  • data inside: <li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<body>

// Unordered HTML List
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

// Ordered HTML List
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


// Description Lists
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>

table

  • An HTML table: <table> tag.
  • Each table row: <tr> tag.
  • A table header: <th> tag. <thead>
    • By default table headings are bold and centered.
  • A table data/cell: <td> tag.

<tbody> <tfoot>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;      // 只留一条边框
            border-spacing: 5px;            // 留2条边框
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;      // Adding a Border
            text-align: left;               // 字体靠边对齐
            padding: 8px;                   // 字体和边框宽度
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>


<body>
<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>


<table style="width:100%">
  <caption>Table name</caption>    // add a caption to a table
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>      // Cells that Span Many Columns
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>     // Cells that Span Many rows
  </tr>
    <td>1</td>
    <td>1.1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2.1</td>
  </tr>
</table>


<table>
    <tr> <th> AAA </th><td> EEE </td> </tr>
    <tr> <th> OOO </th><td> III </td> </tr>
</table>


</body>
</html>

A Special Style for One Table

add an id attribute to the table:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<head>
<style>

table {
  width:100%;
}

// 主要，可控制全部
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 15px;
  text-align: left;
}

// 单独的其他样式
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}

</style>
</head>


<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Web, HTML
HTML
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.