Руководство HTML Col, Colgroup
View more Tutorials:
Теги <col> и <colgroup> представляют стобец и группу столбцов таблицы.
<colgroup> это подтег у <table>, он расположен после <caption>, или перед <thead>, <tbody>, <tfoot>, <tr>. Одна таблица может имет 0 или более подтегов <colgroup>, и каждый <colgroup> имеет 0 или более подтегов <col>.
Если <colgroup> не имеет подтега <col>:
<colgroup span = "<number>"> </colgroup>
Он равен:
<colgroup> <col span = "<number>" /> </colgroup>
Например:
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>
Пример таблицы со многими <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>
Только некоторые свойства (property) CSS могут примениться к <colgroup>, <col>.
CSS border
CSS border работает только со свернутой таблицей (Collapsing Table). Смотрите примеры ниже.
CSS background-*
CSS background-* у <colgroup>, <col> работает только в местах где строка (row) или ячейка (cell) таблицы является прозрачной (transparent).
CSS width
Настроить ширину для <col>, <colgroup>.
CSS {visibility: collapse}
Вы можете применить CSS visibility для <colgroup>, <col> но только со значением {visibility:collapse}, другие значения недействительны и пропускаются, или с ними обращаются как с {visibility:visible}.
CSS border
CSS border применятся к <col>, <colgroup> работает только со свернутой таблицей (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>