Hướng Dẫn Và Ví Dụ HTML Col, Colgroup - Openplanning

Trang chủ » Colgroup Trong Html Là Gì » Hướng Dẫn Và Ví Dụ HTML Col, Colgroup - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • 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
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ HTML Col, Colgroup
  1. ColGroup, Col
  2. Colgroup, Col Styles

1. ColGroup, Col

Thẻ <col> và <colgroup> đại diện cho một cột và một nhóm cột của một bảng.<colgroup> là thẻ con của <table>, nó được đặt sau <caption>, và đặt trước <thead>, <tbody>, <tfoot>, <tr>. Một bảng có thể có 0 hoặc nhiều thẻ con <colgroup>, và mỗi <colgroup> có 0 hoặc nhiều thẻ con <col>.Nếu <colgroup> không có thẻ con <col>:<colgroup span = "<number>"> </colgroup>Nó tương đương với:<colgroup> <col span = "<number>" /> </colgroup>Ví dụ: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>Ví dụ một bảng có nhiều <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

Chỉ có một vài thuộc tính (property) CSS có thể áp dụng cho <colgroup>, <col>.CSS borderCSS border chỉ có tác dụng với một bảng cụp (Collapsing Table). Xem thêm ví dụ bên dưới.CSS background-*CSS background-* của <colgroup>, <col> chỉ có tác dụng tại các nơi mà hàng (row) hoặc ô (cell) của bảng là trong suốt (transparent).CSS widthThiết lập chiều rộng cho <col>, <colgroup>.CSS {visibility: collapse}Bạn có thể áp dụng CSS visibility cho <colgroup>, <col> nhưng chỉ với giá trị {visibility:collapse}, các giá trị khác là không hợp lệ và bị bỏ qua, hoặc bị đối xử giống như {visibility:visible}.
  • Hướng dẫn và ví dụ CSS visibility
CSS borderCSS border áp dụng cho <col>, <colgroup> chỉ hoạt động với một bảng cụp (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>

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • Hướng dẫn và ví dụ HTML Styles
  • Hướng dẫn và ví dụ HTML Hyperlink
  • Hướng dẫn và ví dụ HTML Email Link
  • Hướng dẫn và ví dụ HTML Paragraphs
  • Hướng dẫn và ví dụ HTML IFrame
  • Hướng dẫn và ví dụ HTML Entity
  • Hướng dẫn và ví dụ HTML Lists
  • Hướng dẫn và ví dụ HTML Tables
  • Hướng dẫn và ví dụ HTML Col, Colgroup
  • Hướng dẫn và ví dụ HTML Heading
  • Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
  • Hướng dẫn và ví dụ HTML URL Encoding
  • Hướng dẫn và ví dụ HTML Video
  • Hướng dẫn và ví dụ thuộc tính HTML dir
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • Hướng dẫn và ví dụ HTML Styles
  • Hướng dẫn và ví dụ HTML Hyperlink
  • Hướng dẫn và ví dụ HTML Email Link
  • Hướng dẫn và ví dụ HTML Paragraphs
  • Hướng dẫn và ví dụ HTML IFrame
  • Hướng dẫn và ví dụ HTML Entity
  • Hướng dẫn và ví dụ HTML Lists
  • Hướng dẫn và ví dụ HTML Tables
  • Hướng dẫn và ví dụ HTML Col, Colgroup
  • Hướng dẫn và ví dụ HTML Heading
  • Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
  • Hướng dẫn và ví dụ HTML URL Encoding
  • Hướng dẫn và ví dụ HTML Video
  • Hướng dẫn và ví dụ thuộc tính HTML dir
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các bài viết mới nhất

  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Radio
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Hướng dẫn và ví dụ Flutter SharedPreferences
  • Tạo Module trong Flutter
  • Flutter upload ảnh sử dụng http và ImagePicker
  • Bài thực hành Dart http CRUD
  • Hướng dẫn và ví dụ Flutter image_picker
  • Flutter GridView với SliverGridDelegate tuỳ biến
Show More
  • Các hướng dẫn HTML

Từ khóa » Colgroup Trong Html Là Gì