Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Menggabungkan Kolom HTML Menggunakan columnSpan Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti style columnspan DOM pada HTML digunakan untuk menentukan seberapa banyak kolom elemen yang harus span.


Sebelum memahami lebih dalam materi tentang Menggabungkan Kolom HTML Menggunakan columnSpan Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Lebar Kolom HTML Menggunakan Columns Style DOM, Mengatur Lebar Kolom HTML Menggunakan columnRuleWidth Style DOM, dan columnRuleStyle DOM HTML Beserta Fungsinya.

Sintak:
  • berfungsi untuk mengembalikan nilai properti columnSpan: object.style.columnSpan
  • berfungsi untuk menentukan nilai properti columnSpan: object.style.columnSpan = "1|all|initial|inherit"

Property Values:
  • 1: merupakan nilai default dari properti elemen, yang digunakan untuk melakukan span elemen untuk satu kolom.
  • all: digunakan untuk melakukan span elemen semua kolom.
  • initial: digunakan untuk mengatur properti ke nilai default.
  • inherit: digunakan untuk menerima nilai properti dari elemen parent.

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti columnSpan dari suatu elemen.

Baca Juga:

Contoh: digunakan untuk mengatur properti columnSpan ke tipe "all".

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style columnSpan DOM

</title>

 

<style>

#main1 

{

column-count: 3;

/* Sintak Standar */

}

</style>

 

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h3>

Properti Style columnSpan DOM

</h3>

 

<button 

onclick="bons1()">

Click

</button>

 

<div id="main1">

 

<h2 id="h2tag">

Blog TIK.

</h2>

 

Merupakan portal ilmu komputer 

yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

 

</div>

 

<script>

function bons1() 

{

// Kode program untuk browser 

// lama Chrome, Safari, dan 

// Opera

document.getElementById("h2tag").style.WebkitColumnSpan =

"all";

 

// Kode standar untuk jenis 

// browser lainnya.

document.getElementById("h2tag").style.columnSpan = "all";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style columnSpan DOM

Blog TIK.

Merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.


Contoh: digunakan untuk mengatur nilai properti columnSpan ke tipe "all".

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style columnSpan DOM

</title>

 

<style>

#main2 

{

column-count: 3;

/* Sintak Standar */

border: 2px solid green;

}

 

#h2tag 

{

background-color: orange;

color: lime;

}

</style>

 

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h3>

Properti Style columnSpan DOM

</h3>

 

<button 

onclick="bons2s()">

Click

</button>

 

<br>

 

<div id="main2">

 

<h2 id="h2tag">

Blog TIK.

</h2>

 

Merupakan portal ilmu komputer 

yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

 

</div>

 

<script>

function bons2s() 

{

// Kode program untuk browser 

// lama Chrome, Safari, dan 

// Opera

document.getElementById("h2tag").style.WebkitColumnSpan

= "all";

 

// Kode program untuk jenis 

// browser lainnya.

document.getElementById("h2tag").style.columnSpan

= "all";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style columnSpan DOM


Blog TIK.

Merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.

Artikel ini didedikasikan kepada: Puspita Intan Sari, Rafi Aldianto, Rahmuda Ahimsa Ibrar Ilyasa, Raihan Putratama Adisatya, dan Renanda Sukma Berliani.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Menggabungkan Kolom HTML Menggunakan columnSpan Style DOM"

  1. AnonimSelasa, 28 Juni 2022 pukul 13.09.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnSpan Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 28 Juni 2022 pukul 13.10.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnSpan Style DOM pada HTML:
      1. Google Chrome 50.0
      2. Internet Explorer 10.0
      3. Opera 37.0
      4. Safari 9.0

      Hapus
  2. AnonimRabu, 29 Juni 2022 pukul 10.14.00 WIB

    Apa yang dimaksud dengan properti columnSpan Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 29 Juni 2022 pukul 10.14.00 WIB

      Properti columnSpan Style DOM pada HTML merupakan properti yang digunakan untuk menentukan berapa banyak kolom yang harus dibentangkan oleh suatu elemen pada dokumen HTML.

      Hapus
    2. AnonimRabu, 29 Juni 2022 pukul 10.15.00 WIB

      Properti columnSpan Style DOM pada HTML merupakan properti yang digunakan untuk menentukan bagaimana sebuah elemen terbentang disepanjang kolom.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -