Section 75th, CSS tables and lists

CSS Tables and lists

Learning Essentials:
1. Table Style
2. List Style
3. Other functions

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

Border-collapse adjacent borders of cells are merged

Value Description CSS version

Separate default value, cell border Independent 2

Collapse cell adjacent borders are merged 2

Table {    border-collapse: collapse;} <table border= "1" >    <tr>        <th>1</th>        <th>2</th>        <th >3</th>    </tr>    <tr>        <td>4</td>        <td>5</td>        <td>6</td>    </tr></table>

Border-spacing to set the spacing between cells

Explanation: Border-collapse:separate; (default) is active. You cannot merge because you want to set the spacing.

Value Description CSS Version

Length value 0 indicates spacing, other uses CSS length value 2

Table {    border-spacing: 10px;} <table border= "1" >    <tr>        <th>1</th>        <th>2</th>        <th >3</th>    </tr>    <tr>        <td>4</td>        <td>5</td>        <td>6</td>    </tr></table>

Caption-side Setting the table header position

Value Description CSS Version

Top default, title above 2

Bottom title in 2 below

Table {    border-spacing: 10px;     caption-side: bottom;} <table border= "1" >    <caption> this is a table </caption>    <tr>        <th>1</th >        <th>2</th>        <th>3</th>    </tr>    <tr>        <td>4 </td>        <td>5</td>        <td>6</td>    </tr></table>

Empty-cells hide borders When cell contents are empty

Value Description CSS Version

Sho default, display border 2

Hide does not show borders 2

Table {    border-spacing: 10px;     empty-cells: hide;} <table border= "1" >    <tr>        <th>1</th>        <th>2</th>        <th >3</th>    </tr>    <tr>        <td>4</td>        <td>5</td>        <td></td>    </tr></table>

Table-layout the entire cell is not stretched after the content is too long

Note: Useful when you want to set the width and height of the table

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

Table {    width: 400px;     height: 300px;     text-align: Center;     table-layout: fixed;} <table border= "1" >    <tr>        <th>1</th>        <th>2</th>        < th>3</th>    </tr>    <tr>        <td>4 The contents of this table have been extended </td>        <td>5< /TD>        <td>6</td>    </tr></table>

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

List-style-type the tag type of the list prefix

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: none;} <ul>    <li> list 1</li>    <li> list 2</li>    <li> list 3</li>    <li> List 4</li></ul>

Section 75th, CSS tables and lists