css--Reading notes -07-forms & Data Sheets-1

Seventh. Apply styles to forms and data tables-1

1. Apply Styles to data tables

1 "Table-specific elements

"Summary & Caption

Caption: Title of table

Summary: Table label to describe the contents of the table

<table class= "cal" summary= "A Calendar style date picker" >    <caption>         <a href= "cal.php?month= DEC08 "rel=" prev "><</a>january <a href=         " cal.php?month=feb09 "rel=" Next ">></a>    </caption></table>

"Thead & tbody & Tfoot

Row and column headings use th instead of TD, and table headings can set the scope property of row or Col to define whether they are row headings or column headings.

<thead>    <tr>         <th scope= "col" >Sun</th>         <th scope= "col" >Mon</th>         <th scope= "col" >Tue</th>         <th scope= "col" >Wed</th>         <th scope= "col" >tur </th>         <th scope= "col" >Fri</th>         <th scope= "col" >Sat</th>    </tr> </thead>

"Col & Colgroup

There are not many browsers that support Col and Colgroup.

Apply styles for an entire column

<colgroup>    <col id= "Sun"/>    <col id= "Mon"/>    <col id= "Tue"/> <col id=    " Wed "/>    <col id=" tur "/> <col id=    " Fri "/>    <col id=" sat "/></colgroup>

2 "Data table markers

Calendar

<table class= "cal" summary= "A Calendar style date picker" > <caption> <a href= "cal.php?month=dec0 8 "rel=" prev "><</a>january <a href=" cal.php?month=feb09 "rel=" Next ">></a> </        caption> <colgroup> <col id= "Sun"/> <col id= "Mon"/> <col id= "Tue"/>    <col id= "Wed"/> <col id= "tur"/> <col id= "Fri"/> <col id= "sat"/> </colgroup> <thead> <tr> <th scope= "col" >Sun</th> <th SCO             Pe= "col" >Mon</th> <th scope= "col" >Tue</th> <th scope= "col" >Wed</th> <th scope= "col" >Tur</th> <th scope= "col" >Fri</th> <th scope= " Col ">Sat</th> </tr> </thead> <tbody> <tr> <td class=" Nu    ll ">30</td>        &LT;TD class= "null" >31</td> <td><a href= "#" >1</a></td> < Td><a href= "#" >2</a></td> <td><a href= "#" >3</a></td> &L T;td><a href= "#" >4</a></td> <td><a href= "#" >5</a></td> < /tr> <tr> <td><a href= "#" >6</a></td> <td><a href= "# ">7</a></td> <td class=" selected "><a href=" # ">8</a></td> < Td><a href= "#" >9</a></td> <td><a href= "#" >10</a></td> & Lt;td><a href= "#" >11</a></td> <td><a href= "#" >12</a></td> & Lt;/tr> </tbody></table>

　　

3. Apply a style to a table

table.cal {    border-collapse:sepearte;    border-spacing:0;    Text-align:center;    Color: #333;}. Cal TH,. Cal td {    margin:0;    padding:0;}

Note:

The CSS specification has two table-side box models: individual and superimposed. Border-collapse

In a separate model, each cell has a border around it; collapse

In the overlay model, the cell shares the border. Separate

Most browsers use a separate model by default.

4 "Add visual style

. Cal caption {    font-size:1.25em;    Padding-top:0.692em;    Padding-bottom:0.692em;    Background-color: #d4dde6;}. Cal caption[rel= "Prev"] {    float:left;    Margin-left:0.2em;}. Cal Caption A:link,.cal caption a:visited {    text-decoration:none;    Color: #333;    Padding:0 0.2em;}. Cal Caption A::hover,.cal Caption A::active,.cal caption A::focus {    background-color: #6d8ab7;}

Heading style & Table body default Style

. Cal thead th {    background-color: #d4dde6;    border-bottom:1px solid #a9bacb;    Font-size:0.875em;}. Cal tbody {    color: #a4a4a4;    text-shadow:1px 1px 1px white;    Background-color: #d0d9e2;}

Table border Style

. Cal Tbody TD {    border-top:1px solid #e0e0e1;    border-right:1px solid #9f9fa1;    border-bottom:1px solid #acacad;    border-left:1px solid #dfdfe0;}. Cal Tbody a {    display:block;    Text-decoration:none;    Color: #333;    Background-color: #c0c8d2;    Font-weight:bold;    Padding:0.385em 0.692em 0.308em 0.692em;}

Add hover Style

. Cal tbody a:hover,.cal tbody a::focus,.cal tbody a:active,.cal tbody. Selected A:link,.cal tbody. Selected A:visited,.cal Tbody. Selected A:hover,.cal tbody. Selected A:focus,.cal tbody. Selected A:active {    background-color: #6d8ab7;    Color:white;    

　　

　　

　　

　　

css--Reading notes -07-forms & Data Sheets-1