Cara Membuat Tabel Dengan HTML (Pengenalan Dasar)

Estetika dan Kecantikan Gigi S.A.S

Perbaikan dan Restorasi Gigi

Ig @ahligigijember

KLIK ahligigijember.blogspot.com

HTML merupakan bahasa pemrograman bebasis web yang dapat kita gunakan untuk membuat desain suatu web. Nah, tutorial HTML yang akan saya berikan untuk postingan ini adalah mengenai cara membuat tabel HTML, sebenarnya tutorial belajar HTML ini dapat kita temui di w3schools.com, tapi berhubung tutorial ini berguna untuk edit-edit template blog (berhubungan dengan blogging) jadi saya posting aja disini :) .

Berikut Kode HTML yang akan kita gunakan untuk membuat tabel html:

<table></table> merupakan tag awal, sebagai penanda awal dan menjadi akhir dari suatu pembuatan tabel.

<tr></tr> merupakan tag yang berfungsi untuk menandakan suatu baris yang ada di dalam tabel

<td></td> merupakan tag yang berguna untuk membagi baris tabel untuk menjadi beberapa kolom.
Dan dari tag tersebut memiliki atribut seperti di bawah ini:
bgcolor - untuk warna backgorund dari tabel
background - ini dpaat kita gunakan apabila ingin membuat background tabel di ambil dari suatu gambar.
width – berguna sebagai atribut untuk menentukan lebar tabel
height – menentukan tinggi tabel.
align - atribut yang berguna untuk mengatur perataan horizontal.
valign – atribut yang berguna untuk mengatur perataan vertikal.
border - atribut ini berguna sebagai atribut untuk menentukan lebar bingkai pada tabel.
cellspacing – atribut untuk menentukan jarak antar kolom.
cellpadding – menentukan jarak antara isi dengan tepi kolom (bisa di bilang margin).
colspan – atribut yang berguna untuk menentukan berapa kolom tabel yang akan digabung.
cowspan – atribut yang berguna untuk menentukan berapa baris yang akan digabung.

Sebagai contoh dari penggunaan tabel, dapat dilihat melalui beberapa contoh tabel dan coding html nya di bawah ini:

<table border="1" width="80%">

<tr>
<td>Ini kolom pertama</td>
<td>Ini kolom kedua</td>
</tr>

<tr>

<td>Ini kolom pertama baris kedua</td>
<td>Ini kolom kedua baris

kedua</td>
</tr>
</table>

Ini kolom pertama	Ini kolom kedua
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

-----------------------
<table border="1" width="80%">

<tr>
<td bgcolor="#000000">Ini kolom pertama</td>

<td background="background.gif">Ini kolom kedua</td>
</tr>

<tr>

<td>Ini kolom pertama baris kedua</td>
<td>Ini kolom kedua baris kedua</td>

</tr>
</table>

Ini kolom pertama	Ini kolom kedua
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

--------------------
<table border="1" width="80%">
<tr>

<td bgcolor="#000000" width="70%">

Ini kolom pertama</td>
<td background="background.gif" width="30%">
Ini kolom kedua</td>
</tr>

<tr height="200">
<td valign="top">Ini kolom pertama baris kedua</td>
<td align="right">Ini kolom kedua baris kedua</td>

</tr>
</table>

Ini kolom pertama	Ini kolom kedua
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

--------------------
<table border="1" cellpadding="5" width="80%">

<tr>
<td bgcolor="#000000" width="70%">
Ini kolom pertama</td>
<td background="background.gif" width="30%">

Ini kolom kedua</td>

</tr>
<tr height="200">
<td valign="top">Ini kolom pertama baris kedua</td>

<td align="right">Ini kolom kedua baris kedua</td>

</tr>
</table>

Ini kolom pertama	Ini kolom kedua
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

--------------------
<table border="1" cellspacing="5" width="80%">

<tr>
<td bgcolor="#000000" width="70%">
Ini kolom pertama</td>
<td background="background.gif" width="30%">

Ini kolom kedua</td>

</tr>
<tr height="200">
<td valign="top">Ini kolom pertama baris kedua</td>

<td align="right">Ini kolom kedua baris kedua</td>

</tr>
</table>

Ini kolom pertama	Ini kolom kedua
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

--------------------
<table border="1" cellspacing="5" width="80%">

<tr>
<td colspan="2" bgcolor="#000000">
Ini kolom

gabungan</td>
</tr>

<tr height="200">
<td valign="top">Ini kolom pertama baris kedua</td>
<td align="right">Ini kolom kedua baris kedua</td>
</tr>

</table>

Ini kolom gabungan
Ini kolom pertama baris kedua	Ini kolom kedua baris kedua

--------------------
<table border="1" cellspacing="5" width="80%">

<tr>
<td rowspan="2" bgcolor="#000000" width="70%">

Ini kolom pertama gabungan</td>

<td background="background.gif" width="30%">
Ini kolom kedua</td>
</tr>

<tr height="200">

<td align="right">Ini kolom kedua baris kedua</td>

</tr>
</table>

Ini kolom pertama gabungan	Ini kolom kedua
	Ini kolom kedua baris kedua

TAGS: cara membuat htlm, belajar membuat tabel html, tabel html, membuat tabel pada dokument html, belajar html cara membuat tabel dengan html, tutorial membuat, tutorial komputer, belajar ngeblog, cara ngeblog, tips ngeblog, panduan ngeblog, membuat dan menyisipkan tabel html pada postingan, cara membuat tabel di blogspot, tabel html di blogspot [...]

Foto Tentang Kecantikan Gigi Versi Tukang Gigi S.A.S
Koleksi Foto Hasil Perbaikan Gigi
Ig@ahligigijember
ahligigijember.blogspot.com