Make Tabel or Columns Using CSS

Dahulu kala bila ingin membuat sesuatu didalam column lumayan ribet menggunakan variabel tag table. Tapi dengan kemajuan perilmuan CSS sekarang bisa lebih mudah kalau sobat ingin membikin sesuatu didalam column. Jika kepengen buat table tanpa ribet yaaa apalagi selain menggunakan tools tabel generator.
Selidik punya selidik ternyata berbeda antara table dengan columns ini sob ;)) Terlihat dari struktur dan fungsinya :p Pokoknya gitu deh, sama-sama buat mengelompokan beberapa menjadi saturapa :D
Contoh tabel dengan 3 kolom

EMBAH	BEBEN	KOBEN
Si Bloglang	anu Ganteng	Kalem tea

Berikut contoh columns dengan 3 count ;)

Start Make Column with CSS 3 !!!

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis.

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non,

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss

Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne,

End Make Column with CSS 3 !!!

Diberi sentuhan efek CSS3 dikit ma gue :P biar maknyus gito loh.

Rahasia dibalik pembuatan multiple columns with CSS 3 ada disini:

1. CSS3 Multiple Columns
2. CSS3 column-rule Property
3. CSS3 column-rule-style Property
4. CSS3 column-count Property

Bumbu columns seperti demo diatas bisa sobat sikat juga

Kode CSS

#column {
border: 3px solid #555;
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #eee;
-moz-column-count: 3;
-moz-column-rule: 1px solid #eee;
column-count: 3;
column-rule: 1px solid #eee;
background-color: #999;
padding: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#column p {
padding: 10px;
align: justify;
margin: 20px 0 0 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 3px 5px 3px #333;
-moz-box-shadow: 3px 5px 3px #333;
box-shadow: 3px 5px 3px #333;
background-color: #ddd;
}

Kode HTML

<div id="column">

<p>YOUR CONTENT WITH PARAGRAPH VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 2 VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 3 VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 4 VARIABLE</p>

</div>Setiap kali membuat paragrap baru, itulah panjang sesuatu yang didalam kolumnya sob :)
Semoga bermanfaat :)