18th Chapter CSS Tables and lists

18th Chapter CSS Tables and lists
Learning Essentials:
1. Table Style
2. List Style
3. Other functions

This chapter focuses on CSS tables and lists in HTML5, with table and list styles set to make tables and lists more diverse.

A Table Style
The table has five unique styles, the style sheet is as follows:
Property Value Description CSS version
Border-collapse border style border style of adjacent cells 2
Border-spacing length value spacing of adjacent cell borders 2
Caption-side Position Name table header position 2
Empty-cells Display value empty cell whether the border is displayed 2
Table-layout layout style Specifies the layout style of a table 2

1.border-collapse
Value Description CSS Version
Separate default value, cell border Independent 2
Collapse cell adjacent borders are merged 2

Table {
Border-collapse:collapse;
}
Explanation: Adjacent borders of cells are merged.
2.border-spacing
Value Description CSS Version
Length value indicates spacing, using CSS length value 2

Table {
border-spacing:10px;
}
Explanation: The state of Border-collapse:separate is valid. You cannot merge because you want to set the spacing.
3.caption-side
Value Description CSS Version
Top default, title above 2
Bottom title in 2 below

Table {
Caption-side:bottom;
}
Explanation: Set the table title.
4.empty-cells
Value Description CSS Version
Show default value, display border 2
Hide does not show borders 2

Table {
Empty-cells:hide;
}
Explanation: Empty the contents of the cell is a hidden border.
5.table-layout
Value Description CSS Version
Auto default, stretched entire cell 2 when content is too long
When the fixed content is too long, the entire cell is not stretched 2

Fixed
Table {
table-layout:fixed;
}
Explanation: After the content is too long, the entire cell is not stretched.
Two List Style
The list has four unique styles, and the style sheet is as follows:

Property Value Description CSS version
List-style-type type value in the list of marker types 1/2
List-style-image None or URL image as a list marker 1
List-style-position position value Arrangement relative to position 1
Abbreviated form of the List-style shorthand attribute list 1

1.list-style-type
Value Description CSS Version
None No tag 1
Disc Solid Circle 1
Circle Hollow Circle 1
Square Solid Block 1
Decimal Arabic numerals 1
Lower-roman Lowercase Roman Numerals 1
Upper-roman Capital Roman Numerals 1
Lower-alpha lowercase English Letter 1
Upper-roman Capital English Letter 1

UL {
List-style-type:square;
}
Explanation: The tag type of the list prefix, here is the CSS1 version. The CSS2 version also includes Japanese, Zhongya
Prefixes such as numerals and Greek. Interested can refer to the CSS manual.
2.list-type-position
Value Description CSS Version
Outside default value, tag is outside the Content box 1
The inside tag is inside the content box 1

UL {
width:120px;
List-style-position:inside;
}
Explanation: The tag is inside the content box.

3.list-type-image
Value Description CSS Version
None do not use image 1
URLs using images with URLs 1

UL {
List-style-image:url (bullet.png);
}
Explanation: Use the picture as the prefix tag.
4.list-style
UL {
List-style:lower-alpha inside URL (bullet.png);
}
Explanation: Shorthand form.
Three Other features
In <table> <td> cells, we can use the Text-align property to align horizontally, but vertical alignment
It's not working. CSS provides the Vertical-align property for vertical alignment.
Value Description CSS Version
Baseline content objects aligned with baselines
Top Content Object aligns to top
Middle Content objects aligned to the middle
Bottom Content objects aligned to the bottom

Table TR TD {
Vertical-align:bottom;
}
Explanation: Vertical alignment of content objects within a cell.
Value Description CSS Version
Sub Subscript for vertical aligned 1
Super Vertical aligned superscript 1

D =
}
Vertical-align:super;
Explanation: Text subscript settings.

Value Description CSS Version
The length value sets the upper and lower offset, which can be negative 1
Percent Ibid. 1

Div span {
Vertical-align: -200px;
}
Explanation: Negative value downward, positive value upward. If the default baseline is above, use a negative number. If the default baseline is below, use the
Positive.

Example:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS Forms and Lists </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<table border= "1" >
<caption> Personnel Archives </caption>
<tr>
<th> name </th>
<th> Sex </th>
<th> Age </th>
</tr>
<tr>
<td> Zhang San </td>
<TD class= "Sex" > Men </td>
<td></td>
</tr>
<tr>
<td> John Doe </td>
<td> Women </td>
<td>28</td>
</tr>
<tr>
<td> Harry </td>
<td> Men </td>
<td>32</td>
</tr>
</table>

<ul>
<li> Zhang San, is a very good youth </li>
<li> John Doe </li>
<li> Harry <b>2</b></li>
<li> Caifan </li>
</ul>

<div><span> I'm html5</span></div>.

<em> Description: </em><textarea rows= "Ten" ></textarea>

</body>

@charset "Utf-8";

Table {
width:400px;
height:300px;
Text-align:center;

/*border-collapse:separate;*/
/*border-collapse:collapse;*/

/*border-spacing:10px;*/

/*caption-side:bottom;*/

/*empty-cells:hide;*/

/*table-layout:fixed;*/

border:1px solid red;
}

Table tr th, table tr td {
border:1px solid red;
}

UL {
width:120px;
/*list-style-type:square;
List-style-position:inside;
List-style-image:url (bullet.png); * *
List-style:square inside URL (bullet.png);
}

. Sex {
/*vertical-align:bottom;*/
/*vertical-align:baseline;*/
/*vertical-align:middle;*/
}

D =
/*vertical-align:sub;*/
Vertical-align:super;
}

div {
width:300px;
height:300px;
Background:silver;
Text-align:center;
}
Div span {
Background:green;
/*vertical-align: -50px;*/
/*vertical-align: -200%;*/
}
EM {
vertical-align:80px;
}

18th Chapter CSS Tables and lists