codestory

Die Anleitung zu HTML Col, Colgroup

  1. ColGroup, Col
  2. Colgroup, Col Styles

1. ColGroup, Col

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>

2. Colgroup, Col Styles

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>

Neueste Artikel

Show More