Die Anleitung zu HTML Col, Colgroup
View more Tutorials:
Tag <col> und <colgroup> vertreten eine Säule und eine Säule-Gruppe einer Tabelle.
<colgroup> ist Sub-Tag vom <table>. Es wird nach <caption>, und vor <thead>, <tbody>, <tfoot>, <tr> gestellt. Eine Tabelle kann 0 oder viele Sub-Tag <colgroup> haben und jedes <colgroup> hat 0 oder viele Sub-Tag <col>.
Wenn <colgroup> kein Sub-Tag <col> haben:
<colgroup span = "<number>"> </colgroup>
Es ist äquivalent mit:
<colgroup> <col span = "<number>" /> </colgroup>
Zum Beispiel
simple-colgroup-example.html
<!DOCTYPE html> <html> <head> <title>Table align</title> <meta charset="UTF-8"/> <style> table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style> </head> <body> <h2>HTML colgroup</h2> <table> <colgroup> <col span ="3" style="background-color:lightblue"> </colgroup> <tr> <th>No</th> <th>ISBN</th> <th>Title</th> <th>Price</th> <th>Description</th> </tr> <tr> <td>1</td> <td>3476896</td> <td>My first HTML</td> <td>$53</td> <td>..</td> </tr> <tr> <td>2</td> <td>5869207</td> <td>My first CSS</td> <td>$49</td> <td>..</td> </tr> </table> </body> </html>
Z.B : eine Tabelle hat viele <colgroup>:
colgroup-example.html
<!DOCTYPE html> <html> <head> <title>HTML Colgroup, Col</title> <meta charset="UTF-8"/> <style> table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style> </head> <body> <h2>HTML Colgroup, Col</h2> <table> <colgroup> <col style="background-color:lightgreen;width: 50px;"/> </colgroup> <colgroup style="background-color:yellow;"> <col span="2"/> <col style="width: 90px;"/> </colgroup> <tr> <th>No</th> <th>ISBN</th> <th>Title</th> <th>Price</th> <th>Description</th> </tr> <tr> <td>1</td> <td>3476896</td> <td>My first HTML</td> <td>$53</td> <td>..</td> </tr> <tr> <td>2</td> <td>5869207</td> <td>My first CSS</td> <td>$49</td> <td>..</td> </tr> </table> </body> </html>
Es gibt nur einige Property CSS , die für <colgroup>, <col> angewendet werden.
CSS border
CSS border wirkt die einstürzende Tabelle (Collapsing Table). Sehen Sie das folgende Beispiel.
CSS background-*
CSS background-* von <colgroup>, <col> wirkt nur in die Orten, in welcher die Reihe oder die Zelle der Tabelle transparent ist.
CSS width
Die Breite für <col>, <colgroup> einstellen.
CSS {visibility: collapse}
Sie können CSS visibility für <colgroup>, <col> nur mit dem Wert {visibility:collapse} anwenden. Die anderen Werten ist ungültig und wird ignoriert oder wie {visibility:visible} behandelt.
CSS border
CSS border , das für <col>, <colgroup> anwendet , funktioniert nur mit einer Collapsing Table
colgroup-border-example.html
<!DOCTYPE html> <html> <head> <title>HTML Colgroup, Col</title> <meta charset="UTF-8"/> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } </style> </head> <body> <h2>HTML Colgroup, Col</h2> <p style="color:blue; font-style:italic;"> CSS border for COL, COLGROUP works only in Collasing Table. </p> <table> <colgroup> <col style="background-color:lightgreen;width: 50px;"/> </colgroup> <colgroup style="background-color:yellow; border: 3px solid red;"> <col span="2"/> <col style="width: 90px;"/> </colgroup> <tr> <th>No</th> <th>ISBN</th> <th>Title</th> <th>Price</th> <th>Description</th> </tr> <tr> <td>1</td> <td>3476896</td> <td>My first HTML</td> <td>$53</td> <td>..</td> </tr> <tr> <td>2</td> <td>5869207</td> <td>My first CSS</td> <td>$49</td> <td>..</td> </tr> </table> </body> </html>