IT Course HTML Basics 012_Lists and Tables

Lists

HTML lists are important elements for organizing and presenting information on web pages. By using different types of lists, you can better structure and display content.

There are three types of HTML lists:

1. Unordered list: Created using the <ul> element, with each list item represented by a <li> element.
2. Ordered list: Created using the <ol> element, list items are also represented by <li> elements, but they automatically add numbers.
3. Definition list: Created using the <dl> element, containing <dt> (definition term) and <dd> (definition description) elements.

Unordered List

Unordered lists are the most common type of list, adding a small bullet point (also called a list marker) before each list item. It uses <ul> as the container for the list, and <li> to describe specific list items.

Example:

1
<ul>
2
  <li>Item 1</li>
3
  <li>Item 2</li>
4
  <li>Item 3</li>
5
</ul>

Effect:

Ordered List

Compared to unordered lists, each item in an ordered list is marked with a number. Ordered lists use <ol> as the container, and similarly use <li> to describe specific list items.

Example:

1
<ol>
2
  <li>First item</li>
3
  <li>Second item</li>
4
  <li>Third item</li>
5
</ol>

Effect:

Definition List

Definition lists consist of <dl> (definition list), <dt> (definition term), and <dd> (definition description) elements. Definition lists are typically used to display a set of terms and their definitions.

Example:

1
<dl>
2
  <dt>Term 1</dt>
3
  <dd>Description 1</dd>
4
  <dt>Term 2</dt>
5
  <dd>Description 2</dd>
6
</dl>

Effect:

[!Summary]

• List items can contain paragraphs, line breaks, images, links, and other lists, etc.

Tables

HTML tables are a powerful element for displaying structured data. A basic HTML table is represented by the <table> element, which contains some key child elements such as <tr> (table row), <th> (table header cell), and <td> (table data cell).

Example:

1
<table>
2
  <tr>
3
    <th>Name</th>
4
    <th>Age</th>
5
    <th>Gender</th>
6
  </tr>
7
  <tr>
8
    <td>Zhang San</td>
9
    <td>20</td>
10
    <td>Male</td>
11
  </tr>
12
  <tr>
13
    <td>Li Si</td>
14
    <td>21</td>
15
    <td>Female</td>
16
  </tr>
17
</table>

Effect:

Table Elements:

• <table>: Represents the entire table.
• <thead>: Defines the table header section, containing <th> elements to represent column headers.
• <tr>: Table row, containing header cells <th>.
• <th>: Table header cell, used to identify column headers.
• <tbody>: Defines the table body section, where each row contains <td> elements representing actual data.
• <td>: Table data cell, containing actual data.
• <tfoot>: Defines the table footer section, typically used for table summaries or other footer information.
• <caption>: Used to add a title to HTML tables, usually displayed at the top of the table.
• <colgroup>: Defines a group of table columns.
• <col>: Defines properties for table columns.

Example:

1
<table border="1">
2
  <caption>This is a table title</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Name</th>
11
      <th>Age</th>
12
      <th>City</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>Zhang San</td>
18
      <td>25</td>
19
      <td>Beijing</td>
20
    </tr>
21
    <tr>
22
      <td>Li Si</td>
23
      <td>30</td>
24
      <td>Shanghai</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Total people: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Effect:

Table Attributes:

• border: Specifies the table border. The value is a number representing the border width.
• cellpadding: Specifies the spacing between cells. The value is a number representing the spacing size.
• cellspacing: Specifies the spacing between cell borders. The value is a number representing the spacing size.
• width: Specifies the table width. The value is a number representing the width.
• height: Specifies the table height. The value is a number representing the height.
• style: Specifies the table style.

Example:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">This is a beautiful table</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Name</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Age</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">City</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Zhang San</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Beijing</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Li Si</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Shanghai</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Total people: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Effect:

Table Merging

Table merging refers to combining two or more cells into one cell. Table merging can be used to simplify table layout or highlight specific data. Use the colspan attribute to specify the number of columns a cell spans, or use the rowspan attribute to specify the number of rows a cell spans. The attribute value is a number representing the number of rows/columns spanned.

Example:

1
<table border="1">
2
  <tr>
3
    <td>Cell 1</td>
4
    <td colspan="2">Merge two columns horizontally</td>
5
    <td>Cell 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Merge two rows vertically</td>
9
    <td>Cell 3</td>
10
    <td>Cell 4</td>
11
    <td>Cell 5</td>
12
  </tr>
13
  <tr>
14
    <td>Cell 7</td>
15
    <td>Cell 8</td>
16
    <td>Cell 9</td>
17
  </tr>
18
</table>

Effect:

[!Summary]

• Tables do not display borders by default.
• <tr> is short for table row, representing a row in the table.
• <td>: td is short for table data, representing a table data cell.
• <th>: th is short for table header, representing a table header cell.
• Most browsers display table headers as bold, centered text.
• Tables can contain text, images, lists, paragraphs, forms, horizontal rules, other tables, etc.