Tutorial table3: Cara membuat table di dalam table

Apakah kamu merasa kesulitan Ketika kamu hendak menempatkan dua, tiga, atau beberapa table sekaligus dalam 1 baris table?? Dan bagaimana caranya menempatkan table-table yang lain disisi kiri atau kanan dalam 1 baris table yang sama??

Dalam pembuatan halaman situs seperti Web atau Wap, terkadang kita perlu men-desain tata letak konten sedemikian rupa agar letaknya efisien dan tidak banyak memakan tempat di halaman muka. Seperti situs Wap contohnya, apa bila kamu lebih suka/telah memodifikasi tampilan Wap seperti Web maka kamu perlu menerapkan trick "table di dalam table"


Baiklah, tanpa basa basi lagi mari kita lihat contoh sederhana di bawah ini:

cell A

cell B

cell C

Table di atas adalah table yang belum disematkan table yang lain di dalam tiap cell-nya. Dan perhatikan yang di bawah ini..

cell A a1 a2 a3

cell B a4 a5 a6

cell C a7 a8 a9

Agar tampilannya lebih "rapi" dan menghilangkan kesan table yang bertumpuk-tumpuk, maka buatlah nilai border-nya menjadi nol. Atau gunakan saja atribut rules dan frame di dalam tag <table...>

<table border="1" rules=none frame=box>
--> agar border seperti garis biasa dan memberi kesan border di area luarnya saja.

<table border="1" rules=all frame=void>
--> memberi kesan border di dalam table saja.

lihat contoh:

contoh rules=none frame=box cell a1 cell a2 cell a3

Contoh rules=all frame=void cell a4 cell a5 cell a6

Apa manfaat dari trick ini? Seperti yang telah sedikit saya jelaskan di atas bahwa cara ini berfungsi untuk menempatkan konten-konten agar lebih efisien pada Website atau Wapsite yang telah dimodifikasi.

Jika kamu punya Wapsite dan khusus berisi artikel-artikel dan ingin menggunakan "read more" seperti yang digunakan oleh para blogger, maka trick ini cukup baik untuk kamu terapkan di halaman muka Wapsite kamu.

Contoh:

content 1 Abu Bakar As-Shidiq, beliau lahir dua tahun beberapa bulan setelah kelahiran Muhammad Rasulullah s.a.w. di kota Mekkah. Atau pada tahun 51 sebelum Hijriah (751 Masehi). Nama lengkapnya adalah [read more..]

content 2 Dalam menjalani hidup,manusia sering kali di hadapkan pada dilema dan problematika. Mau tidak mau manusia harus mampu menganalisa dan memahami serta mencari jalan keluar dari kesulitan... [read more..]

Atau lihat contohnya pada wapsite saya. dawoez.xtgem.com

Semoga bermanfaat..

[Read More..]

tutorial table2: Atribut rowspan dan colspan pada table html

Seperti yang telah saya janjikan pada artikel saya minggu lalu tentang tutorial table: pengenalan dan cara membuat table dasar html", maka kini saatnya saya sedikit menjelaskan mengenai beberapa atribut khusus yang sering digunakan dalam pembuatan table. Beberapa diantaranya adalah "rowspan" dan "colspan".

<td rowspan="n">
dan
<td colspan="n">

Nilai "n" adalah jumlah kolom cell-cell table dan jumlah baris-baris cell yang akan digabungkan, maka masukanlah nilainya berdasarkan dengan kebutuhan dan modifikasi margin yang kamu inginkan.

Rowspan.
Adalah atribut table yang berfungsi untuk me-margin/menggabungkan baris-baris cell pada table. Di bawah ini adalah table yang menggunakan atribut rowspan di dalamnya

<table border="1">
<tr><td rowspan="3">Rows</td>
<td>cell a1</td><td>cell a2</td></tr>
<tr><td>cell b1</td><td>cell b2</td></tr>
<tr><td>cell c1</td><td>cell c2</td></tr>
</table>

Hasil:

Rows	cell a1	cell a2
	cell b1	cell b2
	cell c1	cell c2

Colspan.
Adalah atribut table yang berfungsi me-margin/menggabungkan cell table. Berikut adalah contoh colspan pada table.

<table border="1">
<tr><td colspan="2">colspan</td></tr>
<tr><td>cell a1</td><td>cell a2</td></tr>
<tr><td>cell b1</td><td>cell b2</td></tr>
<tr><td>cell c1</td><td>cell c2</td></tr>
</table>

Hasil:

colspan
cell a1	cell a2
cell b1	cell b2
cell c1	cell c2

Penggabungan rowspan dan colspan dalam satu table.
Di bawah ini adalah contoh penggunaan banyak atribut colspan dan rowspan dalam satu table. Table seperti ini biasanya digunakan untuk menjelaskan suatu data informasi secara lebih rinci.

RINCIAN JUMLAH SISWA/I SMKN1 SERANG TAHUN 2008 s/d 2010	Siswa/i Tahun 2008
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell a1	cell a2	cell a3	cell a4	cell a5	cell a6
	Siswa/i Tahun 2009
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell b1	cell b2	cell b3	cell b4	cell b5	cell b6
	Siswa/i Tahun 2010
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell c1	cell c2	cell c3	cell c4	cell c5	cell c6

inilah kode table di atas

<table border="1">
<tr><td rowspan="12" align="bottom">RINCIAN JUMLAH <br/>SISWA/I SMKN1 SERANG <br/>TAHUN 2008 s/d 2010</td>

<td colspan="6" align="center">Siswa Tahun 2008</td></tr>
<tr><td colspan="2">KELAS A</td><td colspan="2">KELAS B</td><td colspan="2">KELAS C</td></tr>
<tr><th>Pria</th><th>Wanita</th><th>Pria</th><th>Wanita</th><th>Pria</th><th>Wanita</th></tr>
<tr><td>cell a1</td><td>cell a2</td><td>cell a3</td><td>cell a4</td><td>cell a5</td><td>cell a6</td></tr>

--> karna kodenya terlalu panjang dan sama, maka kamu gandakan saja kode yang bercetak biru itu menjadi tiga. Jangan lupa untuk menambahkan <tr> di setiap awal kode yang kamu copy dan apa bila selesai kamu paste, akhiri dengan tag </head>. Maka hasilnya akan tampak seperti table di atas.

Sekian tutorial kali ini. Insya Allah selanjutnya akan saya tulis "tutorial table: Cara membuat table di dalam table"

Semoga bermanfaat..

[Read More..]

Tutorial tabel: pengenalan dan cara membuat table dasar html

Terkadang, bila kita membaca sebuah artikel, pasti kita akan menemukan table-table dalam berbagai variasi dan modifikasi tertentu. Tahukah kamu bagaimana
cara membuat table?
Dan seperti apa kode-kode html nya??
Berikut ini adalah lanjutan dari postingan saya yang berjudul "pengenalan kode-kode html dasar".

Ada 3 (tiga) tag utama yang mendasar dalam setiap pembuatan table pada halaman html, yaitu:

1. <table>, tag utama yang pertama kali di tulis dalam pembuatan tabel. Dapat dikombinasikan dengan atribut-atribut seperti: [align, border, bordercolor, background, bgcolor, cellpadding, cellspacing, height, width, hspace, vspace, frame, rules, dan summary].
2. <tr> (table row/baris tabel) mendefinisikan setiap baris dalam table.Setiap tag <tr> terdapat beberapa tag <td> dan atau <th>. Dapat dikombinasikan dengan atribut-atribut seperti: [align, valign, bgcolor, dan background (dapat di isi dengan gambar)].
3. <td> (table data/data tabel), mendefinisikan setiap sel dari table. Tag ini dapat dikombinasikan dengan atribut-atribut seperti: [align, valign, width, height, colspan, rowspan, bgcolor, dan background].

<table>
<tr><td>anggur</td><td>januari</td></tr>
<tr><td>apel</td><td>pebruari</td></tr>
<tr><td>alpukat</td><td>maret</td></tr>

</table>

Hasil:

anggur	januari
apel	pebruari
alpukat	maret

catatan: table di atas adalah table tanpa border.

menambahkan border

Jika kamu hendak membuat border/batas pada table dan pada masing-masing sel-nya maka cukup tambahkan atribut border pada tag table: <table border="n"> dimana n adalah nilai dari tebal border. Contoh di bawah ini adalah n yang bernilai 1 (border="1"). Dapat juga kamu isi 2, 3 atau 4.

<table border="1">

hasil:

anggur	januari
apel	pebruari
alpukat	maret

Menambahkan judul tabel dan header table

Kita juga bisa menambahkan judul pada tabel dan header table dengan kode tag <caption>
dan <th>

<caption>Daftar nama-nama</caption> --> judul table

<tr><th>Nama buah</th><th>Nama bulan</th></tr> --> head table

Hasil:

Daftar nama-nama

Nama buah	Nama bulan
anggur	januari
apel	pebruari
alpukat	maret

catatan: Penambahan "caption" dan "head" ditempatkan di bawah tag <table> sebelum tag <td>

Sekian ulasan kali ini, lain kesempatan saya akan tulis mengenai atribut "colspan" dan "rowspan" pada table. Selamat mencoba,bro!!

[Read More..]

Pengenalan kode-kode html dasar untuk pemula

Berikut adalah beberapa contoh kode-kode html dasar untuk pemula. Kode-kode ini memiliki efek perintah yang sama seperti pada komputer. Sebetulnya kode ini sangat sederhana, dan saya rasa akan sangat lucu jika tutorial sederhana ini dipublikasikan. Tapi tak ada salahnya saya ulas disini. Bagi master html, kode-kode dasar ini memang sudah sangat hafal diluar kepala, akan tetapi mereka yang sudah benar-benar master pun pada awalnya blo'on, hehehe peace, (maaf master-master hipnotis,eh,master html). Intinya apa yang saya tulis disini khusus di peruntukkan bagi blogger pemula. Syukur saja jika ada master html yang mampir ke blog ini :-p..Mari kita saling berbagi pengetahuan!!!
Bravo blogger Indonesia!!!


Ketika kamu membaca sebuah teks atau artikel di salah satu blog/web, mungkin kamu sering menemukan efek-efek tebal, miring, bergaris bawah, berwarna-warni dan bahkan kamu sering menemukan huruf-huruf atau angka yang berukuran lebih besar dibanding huruf disekitarnya. Atau jika kamu sering membaca artikel tentang matematika atau fisika dimana terkadang ada huruf/angka yang letaknya sedikit lebih ke atas dan ke bawah seperti penulisan pangkat pada suatu rumus matematika/fisika.

Inilah kode sederhana yang mereka tambahkan di dalam teks editornya:
1. <b> atau <strong> -->memberikan efek tebal pada huruf/angka.
   Contoh: <b>"ich, dawoez ganteng banget!!"</b> hasil -->"ich, dawoez ganteng banget!!"
2. <i> atau <em> --> memberi efek miring.
   Contoh: <i>dawoez.blogspot.com</i> hasil --> dawoez.blogspot.com
3. <u> --> memberi efek garis bawah.
   Contoh: <u>dawoez & nhiya</u> hasil --> dawoez & nhiya
4. <font color="blue"> -->memberi efek warna.
   Contoh: <font color="blue">dawoez.xtgem.com</font> hasil -->dawoez.xtgem.com
5. <font size="15pt"> --> memberi efek besar.
   Contoh: <font size="15pt">yah, dawoez lagi</font> hasil --> yah, dawoez lagi
6. <sup> -->memberi efek huruf/angka agak ke atas.
   Contoh: dawoez^TM hasil --> dawoez^TM

penjelasan tambahan:

~Semua kode ada pembuka dan penutup (misal: <b> harus ditutup dengan kode </b>), mengapa demikian? Karena jika tidak, maka browser yang kamu gunakan saat ini tidak dapat membaca kode tersebut dan kode itu akan dianggap rusak atau belum selesai oleh teks editor html. khusus kode <font>, jika ada kode kombinasi di depannya semisal "color" ataupun "size", maka penutup kodenya tetap </font> saja.


~Untuk kode <font color="warna">, warna-warna dasar ada pada tabel di bawah:

Kode Warna Html
	blue	hasil -->
	red	hasil -->
	green	hasil -->
	yellow	hasil -->
	black	hasil -->
	white	hasil -->

Untuk membesarkan huruf, selain kode <font size> ada juga kode yang sama fungsinya, yaitu <hn> dimana "n" adalah nilai atau value sebuah pembesaran huruf. "n" dapat di ganti dengan angka 1 s/d 6 dimana semakin besar nilainya semakin kecil hurufnya (misal: <h1> lebih besar dari <h2> dan seterusnya). Sebetulnya penggunaan kode <font size> lebih spesifik nilainya, karena besarnya suatu huruf dapat diatur secara detil mengunakan unsur "pt" (point) atau "px" (pixel).

Sampai disini dulu pengenalan kode-kode dasar html, lain waktu saya akan ulas lagi mengenai kode-kode html yang lain. Terima kasih.

[Read More..]