24.CSS Tables and Lists

18th Palm CSS tables and lists

One, table style

Properties value description CSS version

Border-collapse border Style border style of adjacent cells 2

Border-spacing Length value adjacent cell border spacing 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

(1)separate : default value, cell border independent 2// cell border is hollow

(2)collapse : Cell adjacent border is merged 2// cell border is solid, a black line.

2,border-spacing :

(1) Length value: Indicates spacing, other uses CSS Length value 2// cell border line hollow spacing

3,caption-side :

(1)top : Default value, title above 2

(2)bottom : Title below 2

4,empty-cells :

(1)Show: default value, display border 2

(2)Hide: do not display border 2// If there is no content in the cell, the border is not displayed.

5,table-layout :

(1)Auto : The default value, when the content is too long, stretches the entire cell 2

(2)fixed : When the content is too long, the entire cell is not stretched 2

Second, list style

List of four unique styles

1,list-style-type:

(1),None: no Mark 1

(2),disc: Solid Circle 1

(3),circle: Hollow Circle 1

(4),Square: solid block 1

(5),decimal: Arabic numerals 1

(6),lower-roman: lowercase roman numerals 1

(7),upper-roman: Capital Roman numerals 1

(8),lower-alpha: lowercase english letter 1

(9),Upper-roman: uppercase English letter 1

example,• Zhang San

• John Doe // change is forward to solid circle

• Harry

• Ma Liu

2,lise-type-position

(1)outside default value, tag is outside the content box 1

(2)theinside tag is located inside the content box 1

example, (1): • Zhang San, is a (2): • Zhang San, is a

Good Youth Good Youth

• Li Shi Li Shi

• Harry • Harry

3,list-type-image

(1)None use image 1

(2)url using image 1

4.list-style (abbreviated form)

ul{

List-style: lower-alpha inside URL(bullet.png);

}

Third, other functions

in <table> <td> cells, we can use the text-align property to align horizontally, However, vertical alignment cannot be manipulated. CSS provides us with the vertical-align property for vertical alignment.

value description CSS version

Baseline content objects to baseline alignment 1

Top Content Object aligns with top 1

Middle Content Objects aligned with middle 1

Bottom The Content object to the bottom 1

content is moved in a table such as content close to the top border.

Sub vertical Align the subscript 1

Super vertical aligning superscript 1

foot Mark

Length Value set the offset of the upper and lower values 1

percentage ibid. 1

24.CSS Tables and Lists