SlideShare a Scribd company logo
1 of 10
HTML <col> Tag

Also known as the “column” tag
<col>
• Definition: defines attribute values for one or
  more columns in a table
  – Must be used inside a <table> or a <colgroup>
    element
<col>
• <col> sets properties for a column of table
  cells, such as this table
  – Column = vertical region
Placement
• <col> tag goes
   – after the <table> tag
   – before any <tr> (table row), <thead> (table head),
     or <tbody> (table body) elements

• May go inside <colgroup> element, but doesn’t have
  to
Example usage and result
<table border="1">
 <colgroup>

  <col span="2" style="background-color:red" />
  <col style="background-color:yellow" />
 </colgroup>
 <tr>
  <th>ISBN</th>
  <th>Title</th>
  <th>Price</th>
 </tr>
 <tr>
  <td>3476896</td>
  <td>My first HTML</td>
  <td>$53</td>
 </tr>
 <tr>
  <td>5869207</td>
  <td>My first CSS</td>
  <td>$49</td>
 </tr>
</table>
<col>
• Required attributes?
  – NONE
• Optional attributes?
  – align
  – char
  – charoff
  – span
  – valign
  – width
<col> Attribute values
• span
  – number (of columns) the <col> element should span
     • for example
     <col span=“2”>
<col> Attribute values
• align
  – text alignment inside column
     • left, right, center, justify, char
     <col align=“center”>
<col> Attribute values
• width (fixes the width of the column)
   – %
   – pixels
   – relative_length
      • for example (pixels)…
          <col width=“100”>
In conclusion…
• Important!
• <col> does NOT create columns
  – it sets the properties for the columns to be
    defined LATER IN THAT CODE

More Related Content

Viewers also liked

ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6
Nuchy Geez
 
งานคอมเพิ่มเติม
งานคอมเพิ่มเติมงานคอมเพิ่มเติม
งานคอมเพิ่มเติม
Nuchy Geez
 
Swyp printer
Swyp printerSwyp printer
Swyp printer
59Sound
 
Deviant art
Deviant artDeviant art
Deviant art
u2813615
 
サムライクラウド概要
サムライクラウド概要サムライクラウド概要
サムライクラウド概要
ncwg
 
Agama masyarakat primitif & modern
Agama masyarakat primitif & modernAgama masyarakat primitif & modern
Agama masyarakat primitif & modern
Rlin Goldenbee
 
Ecommerce final ppt
Ecommerce final pptEcommerce final ppt
Ecommerce final ppt
reemalmarri
 
【シーイーシー】サービス紹介
【シーイーシー】サービス紹介【シーイーシー】サービス紹介
【シーイーシー】サービス紹介
ncwg
 
電子カルテシステム ~SBCのシステム設計と課題~
電子カルテシステム ~SBCのシステム設計と課題~電子カルテシステム ~SBCのシステム設計と課題~
電子カルテシステム ~SBCのシステム設計と課題~
ncwg
 
Cloudfiling会社概要標準プレゼン資料140507
Cloudfiling会社概要標準プレゼン資料140507Cloudfiling会社概要標準プレゼン資料140507
Cloudfiling会社概要標準プレゼン資料140507
ncwg
 
ホワイトクラウドファイルサーバ(WCFS)の現状と今後
ホワイトクラウドファイルサーバ(WCFS)の現状と今後ホワイトクラウドファイルサーバ(WCFS)の現状と今後
ホワイトクラウドファイルサーバ(WCFS)の現状と今後
ncwg
 
UForge協業紹介
UForge協業紹介UForge協業紹介
UForge協業紹介
ncwg
 

Viewers also liked (19)

ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6
 
งานคอมเพิ่มเติม
งานคอมเพิ่มเติมงานคอมเพิ่มเติม
งานคอมเพิ่มเติม
 
Student m5
Student m5Student m5
Student m5
 
From Cables to Air - Wireless Networking
From Cables to Air - Wireless NetworkingFrom Cables to Air - Wireless Networking
From Cables to Air - Wireless Networking
 
Swyp printer
Swyp printerSwyp printer
Swyp printer
 
Deviant art
Deviant artDeviant art
Deviant art
 
Industrial painter redesign_10x10
Industrial painter redesign_10x10Industrial painter redesign_10x10
Industrial painter redesign_10x10
 
サムライクラウド概要
サムライクラウド概要サムライクラウド概要
サムライクラウド概要
 
Onet eng
Onet engOnet eng
Onet eng
 
Onet math
Onet mathOnet math
Onet math
 
Pat 4
Pat 4Pat 4
Pat 4
 
An Automatic Approach to Translate Use Cases to Sequence Diagrams
An Automatic Approach to Translate Use Cases to Sequence DiagramsAn Automatic Approach to Translate Use Cases to Sequence Diagrams
An Automatic Approach to Translate Use Cases to Sequence Diagrams
 
Agama masyarakat primitif & modern
Agama masyarakat primitif & modernAgama masyarakat primitif & modern
Agama masyarakat primitif & modern
 
Ecommerce final ppt
Ecommerce final pptEcommerce final ppt
Ecommerce final ppt
 
【シーイーシー】サービス紹介
【シーイーシー】サービス紹介【シーイーシー】サービス紹介
【シーイーシー】サービス紹介
 
電子カルテシステム ~SBCのシステム設計と課題~
電子カルテシステム ~SBCのシステム設計と課題~電子カルテシステム ~SBCのシステム設計と課題~
電子カルテシステム ~SBCのシステム設計と課題~
 
Cloudfiling会社概要標準プレゼン資料140507
Cloudfiling会社概要標準プレゼン資料140507Cloudfiling会社概要標準プレゼン資料140507
Cloudfiling会社概要標準プレゼン資料140507
 
ホワイトクラウドファイルサーバ(WCFS)の現状と今後
ホワイトクラウドファイルサーバ(WCFS)の現状と今後ホワイトクラウドファイルサーバ(WCFS)の現状と今後
ホワイトクラウドファイルサーバ(WCFS)の現状と今後
 
UForge協業紹介
UForge協業紹介UForge協業紹介
UForge協業紹介
 

Similar to Html col tag jf

Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
CK Yang
 

Similar to Html col tag jf (20)

Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
Html tables
Html tablesHtml tables
Html tables
 
Html3
Html3Html3
Html3
 
Html3
Html3Html3
Html3
 
v4-html-table-210321161424.pptx
v4-html-table-210321161424.pptxv4-html-table-210321161424.pptx
v4-html-table-210321161424.pptx
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
html-table
html-tablehtml-table
html-table
 
HTML TABLES
HTML TABLESHTML TABLES
HTML TABLES
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
Html tables
Html tablesHtml tables
Html tables
 
Css tables
Css tablesCss tables
Css tables
 
table html web programing
table  html  web programingtable  html  web programing
table html web programing
 
Html
HtmlHtml
Html
 
Lecture-4.pptx
Lecture-4.pptxLecture-4.pptx
Lecture-4.pptx
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
HTML Tables.ppt
HTML Tables.pptHTML Tables.ppt
HTML Tables.ppt
 
htmltables-180721142906-1.pptx
htmltables-180721142906-1.pptxhtmltables-180721142906-1.pptx
htmltables-180721142906-1.pptx
 

Html col tag jf

  • 1. HTML <col> Tag Also known as the “column” tag
  • 2. <col> • Definition: defines attribute values for one or more columns in a table – Must be used inside a <table> or a <colgroup> element
  • 3. <col> • <col> sets properties for a column of table cells, such as this table – Column = vertical region
  • 4. Placement • <col> tag goes – after the <table> tag – before any <tr> (table row), <thead> (table head), or <tbody> (table body) elements • May go inside <colgroup> element, but doesn’t have to
  • 5. Example usage and result <table border="1"> <colgroup> <col span="2" style="background-color:red" /> <col style="background-color:yellow" /> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>
  • 6. <col> • Required attributes? – NONE • Optional attributes? – align – char – charoff – span – valign – width
  • 7. <col> Attribute values • span – number (of columns) the <col> element should span • for example <col span=“2”>
  • 8. <col> Attribute values • align – text alignment inside column • left, right, center, justify, char <col align=“center”>
  • 9. <col> Attribute values • width (fixes the width of the column) – % – pixels – relative_length • for example (pixels)… <col width=“100”>
  • 10. In conclusion… • Important! • <col> does NOT create columns – it sets the properties for the columns to be defined LATER IN THAT CODE