HTML Col, Colgroup Tutorial With Examples - O7planning

Trang chủ » Html Colgroup Background Color » HTML Col, Colgroup Tutorial With Examples - O7planning

Có thể bạn quan tâm

  • All Tutorials
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • Browser
  • Git
  • SAP
  • Amazon AWS
  • Others
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
HTML Col, Colgroup Tutorial with Examples
  1. ColGroup, Col
  2. Colgroup, Col Styles

1. ColGroup, Col

<col> and <colgroup> tags represents for a column and a column group of a table.<colgroup> is subtag of <table>. It is located after <caption>, and before <thead>, <tbody>, <tfoot>, <tr>. A table can have 0 or more <colgroup> subtags, and each <colgroup> has 0 or more <col> subtags.If <colgroup> has no<col> subtag:<colgroup span = "<number>"> </colgroup>It is equivalent to:<colgroup> <col span = "<number>" /> </colgroup>Example: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>Example, a table has many <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

Only a few CSS properties can apply to <colgroup>, <col>.CSS borderCSS border will only work with a Collapsing Table. See the following exampleCSS background-*CSS background-* of <colgroup>, <col> only works in the places in which a table row or cell is transparent.CSS widthSet up the width of <col>, <colgroup>.CSS {visibility: collapse}You can apply CSS visibility to <colgroup>, <col> but only to the {visibility:collapse} value. Other values are invalid and are ignored, or treated like {visibility:visible}.
  • CSS visibility
CSS borderCSS border applying to <col>, <colgroup> works only with a 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>

HTML Tutorials

  • Introduction to HTML
  • Install Atom Editor
  • Install Atom HTML Preview
  • Starting with HTML
  • HTML Images Tutorial with Examples
  • HTML Block/Inline Elements Tutorial with Examples
  • HTML Editors
  • Install Atom-Beautify
  • HTML Styles Tutorial with Examples
  • HTML Hyperlinks Tutorial with Examples
  • HTML Email Links Tutorial with Examples
  • HTML Paragraphs Tutorial with Examples
  • HTML IFrames Tutorial with Examples
  • HTML Entities Tutorial with Examples
  • HTML Lists Tutorial with Examples
  • HTML Tables Tutorial with Examples
  • HTML Col, Colgroup Tutorial with Examples
  • HTML Headings Tutorial with Examples
  • HTML Quotations Tutorial with Examples
  • HTML URL Encoding Tutorial with Examples
  • HTML Video Tutorial with Examples
  • HTML Dir Attribute Tutorial with Examples
Show More
  • Bootstrap Tutorials
  • CSS Tutorials

HTML Tutorials

  • Introduction to HTML
  • Install Atom Editor
  • Install Atom HTML Preview
  • Starting with HTML
  • HTML Images Tutorial with Examples
  • HTML Block/Inline Elements Tutorial with Examples
  • HTML Editors
  • Install Atom-Beautify
  • HTML Styles Tutorial with Examples
  • HTML Hyperlinks Tutorial with Examples
  • HTML Email Links Tutorial with Examples
  • HTML Paragraphs Tutorial with Examples
  • HTML IFrames Tutorial with Examples
  • HTML Entities Tutorial with Examples
  • HTML Lists Tutorial with Examples
  • HTML Tables Tutorial with Examples
  • HTML Col, Colgroup Tutorial with Examples
  • HTML Headings Tutorial with Examples
  • HTML Quotations Tutorial with Examples
  • HTML URL Encoding Tutorial with Examples
  • HTML Video Tutorial with Examples
  • HTML Dir Attribute Tutorial with Examples
Show More
  • Bootstrap Tutorials
  • CSS Tutorials

Newest Articles

  • Introduction to Amazon ACM
  • Request an SSL certificate from Amazon ACM
  • Transfer domain registration to Amazon Route 53
  • Migrate DNS service to Amazon Route 53
  • Amazon CloudFront Invalidation
  • Configure Amazon CloudFront Error Pages
  • Create a CloudFront distribution for S3 Bucket
  • Amazon AWS Policy Generator - policygen
  • Amazon S3 Bucket policies
  • Configure custom domain and SSL for CloudFront distribution
  • Create Amazon S3 Bucket
  • Configure custom domain for Amazon S3 static website
  • Host a static website on Amazon S3
  • JPA Join types and syntax in JPQL
  • Get started with JPA Criteria Query API
  • Fetch data with Spring Data JPA DTO Projections
  • Create a Google Service Account
  • List, submit and delete Sitemaps with Google Search Java API
  • List, add and delete Sites with Google Search Java API
  • Setup environment variables on Windows
Show More
  • HTML Tutorials

Từ khóa » Html Colgroup Background Color