SlideShare a Scribd company logo
1 of 6
Blog: https://medium.com/sahabat-coding
Github: https://github.com/sahabatcoding
Codepen: https://codepen.io/sahabatcoding
Download Slide: https://www.slideshare.net/sahabatcoding
Facebook: https://web.facebook.com/insahabatcoding
Twitter: https://twitter.com/sahabatcoding
Instagram: https://www.instagram.com/insahabatcoding
Channel Youtube:
https://www.youtube.com/channel/UCY8SzNytXPoxgtqwvUWqu6A
Table Merging
<HTML>
• colspan
adalah parameter untuk menggabungkan beberapa cell secara horisontal
• rowspan
adalah parameter untuk menggabungkan beberapa cell secara vertical
Example Table
Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4
row 3, col 1 row 3, col 2 row 3, col 3 row 3, col 4
row 4, col 1 row 4, col 2 row 4, col 3 row 4, col 4
Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 colspan = 2
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4
row 3, col 1 row 3, col 2 row 3, col 3 row 3, col 4
row 4, col 1 row 4, col 2 row 4, col 3 row 4, col 4
Table with colspan = 2
Header 1 Header 2 Header 3 Header 4
rowspan = 4
row 1, col 2 colspan = 2
row 2, col 2 row 2, col 3 row 2, col 4
row 3, col 2 row 3, col 3 row 3, col 4
row 4, col 2 row 4, col 3 row 4, col 4
Table with colspan = 2 and rowspan = 4

More Related Content

Similar to Belajar HTML: Table Merging (18/33) (7)

Java Bytecode For Discriminating Developers - GeeCON 2011
Java Bytecode For Discriminating Developers - GeeCON 2011Java Bytecode For Discriminating Developers - GeeCON 2011
Java Bytecode For Discriminating Developers - GeeCON 2011
 
iOS developer toolbox
iOS developer toolboxiOS developer toolbox
iOS developer toolbox
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library
 
Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012
 
Trends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailTrends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for Email
 

Recently uploaded

SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 

Recently uploaded (20)

24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17
 
Supporting Newcomer Multilingual Learners
Supporting Newcomer  Multilingual LearnersSupporting Newcomer  Multilingual Learners
Supporting Newcomer Multilingual Learners
 
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
 
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of TransportBasic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....
 
ANTI PARKISON DRUGS.pptx
ANTI         PARKISON          DRUGS.pptxANTI         PARKISON          DRUGS.pptx
ANTI PARKISON DRUGS.pptx
 
MOOD STABLIZERS DRUGS.pptx
MOOD     STABLIZERS           DRUGS.pptxMOOD     STABLIZERS           DRUGS.pptx
MOOD STABLIZERS DRUGS.pptx
 
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management
 
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinhĐề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
 
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdfFICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 

Belajar HTML: Table Merging (18/33)

  • 1. Blog: https://medium.com/sahabat-coding Github: https://github.com/sahabatcoding Codepen: https://codepen.io/sahabatcoding Download Slide: https://www.slideshare.net/sahabatcoding Facebook: https://web.facebook.com/insahabatcoding Twitter: https://twitter.com/sahabatcoding Instagram: https://www.instagram.com/insahabatcoding Channel Youtube: https://www.youtube.com/channel/UCY8SzNytXPoxgtqwvUWqu6A
  • 3. • colspan adalah parameter untuk menggabungkan beberapa cell secara horisontal • rowspan adalah parameter untuk menggabungkan beberapa cell secara vertical
  • 4. Example Table Header 1 Header 2 Header 3 Header 4 row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4 row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4 row 3, col 1 row 3, col 2 row 3, col 3 row 3, col 4 row 4, col 1 row 4, col 2 row 4, col 3 row 4, col 4
  • 5. Header 1 Header 2 Header 3 Header 4 row 1, col 1 row 1, col 2 colspan = 2 row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4 row 3, col 1 row 3, col 2 row 3, col 3 row 3, col 4 row 4, col 1 row 4, col 2 row 4, col 3 row 4, col 4 Table with colspan = 2
  • 6. Header 1 Header 2 Header 3 Header 4 rowspan = 4 row 1, col 2 colspan = 2 row 2, col 2 row 2, col 3 row 2, col 4 row 3, col 2 row 3, col 3 row 3, col 4 row 4, col 2 row 4, col 3 row 4, col 4 Table with colspan = 2 and rowspan = 4