Cara Membuat Tabel HTML

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:

<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>
</BODY>

</HTML>

———————————————————————

<HTML>
<BODY>
<TABLE WIDTH=”80%”

BORDER=”1″>

<TR>
<TD bgcolor=”#009900″>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>

</BODY>
</HTML>

———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″>
<TR>

<TD bgcolor=”#009900″ 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>
</BODY>
</HTML>
———————————————————————

<TR>
<TD

bgcolor=”#009900″ 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>
</BODY>
</HTML>
———————————————————————

</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————

<TABLE WIDTH=”80%” BORDER=”1″

CELLSPACING=”5″>

<TR>
<TD bgcolor=”#009900″ COLSPAN=”2″>
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>

———————————————————————
<TABLE WIDTH=”80%” BORDER=”1″ CELLSPACING=”5″>

<TR>
<TD

bgcolor=”#009900″ width=”70%” ROWSPAN=”2″>

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>

Semoga membantu

Tag:membuat tabel html, cara membuat tabel html, membuat tabel dengan HTML, cara membuat html, cara membuat tabel di html, membuat table html, tabel html, Cara membuat tabel pada HTML

About Hasi Aulia Solihin S.Kom

I'm blogger... I'm young... I'm entrepreneur... I'm manchunian and I'm COOL because I'm admin of HasiAulia.Net B-)

View all posts by Hasi Aulia Solihin S.Kom →

Subscribe to Comments RSS Feed in this post

29 Responses

jual dvd film
December 1, 2009 at 5:04 pm

waw… tx banget ya.. aku emang lagi belajar HTML buat blog aku..
kalo gtu aku mau ngajak tukeran link ni.link u dah gw pasang di http://1serial-movie.blogspot.com
pasang link gw juga ya

link : http://1serial-movie.blogspot.com
anchor tect : jual dvd film
tolong jangan diubah yach..
tx..

[Reply]
Riezma
December 5, 2009 at 1:22 pm

gmn niy cara untuk membuat frame html dr arah sebelah kiri untuk muncul ke sebelah kanan
trima kasiiih

[Reply]
admin Reply:
December 5th, 2009 at 10:57 pm
maksud nya gimana ya?

[Reply]
rido sandi atmanto
April 10, 2010 at 1:20 pm

itu yang terakhir maksudnya “ROWSPAN” bukan “COWSPAN”…
thanks dah share… saya bikin tabel manual koq salah terus ternyata salahna da disitu

[Reply]
soeranto
July 29, 2010 at 4:30 pm

kode html nya klo dipake untuk posting di blogspot bisa ga ya??sebelumnya saya ucapkan makasih atas jawabannya.

[Reply]
soeranto
July 29, 2010 at 4:31 pm

makasih infonya

[Reply]
learn html
November 3, 2010 at 12:46 pm

saya baru belajar html5, apa element table tersebut masih dapat di gunakan di html5?? atau ada perubahan struktur kodenya?? mohon jawabannya….
thanks..

[Reply]
Penterjemah
November 22, 2010 at 2:33 pm

Dicoba dulu ya mas…
Makasih dah share

[Reply]
Qinz
January 8, 2011 at 5:29 pm

Wah rumit boz

[Reply]
nurman
January 24, 2011 at 8:27 am

jadinya spt apa ya…

[Reply]
disuka
March 15, 2011 at 5:29 pm

hmmm.. salah alamat nih… salam kenal ya…btw thaxs contekannya

[Reply]
admin Reply:
March 16th, 2011 at 5:42 am
salah alamat kenapa?

[Reply]
abangfirman
April 11, 2011 at 12:00 pm

mohon info,,bagaimana cara memasukkan tabel yang sudah saya buat di excel k dalam halaman web saya,,tq

[Reply]
Lesman Purba
April 13, 2011 at 11:57 am

Aku udah coba copy salah code html nya, tetapi kenapa garis tabelnya ngga muncul yaa..?

[Reply]
BISNIS PULSA MURAH BANTEN
May 2, 2011 at 12:30 am

THANK YA OM TAS PELAJARAN HAI INI YAG OM BAGI

[Reply]
LOMBOK Website
July 6, 2011 at 10:43 pm

Thanks banget.

[Reply]
admin Reply:
July 10th, 2011 at 9:04 pm
yoi : )

[Reply]
alva-net.blogspot.com
August 19, 2011 at 3:38 pm

salam kenal….

[Reply]
kentung
October 6, 2011 at 11:14 am

tolong kasih tutorialnya cara buat web dinamis

[Reply]
iyusqobain
October 18, 2011 at 11:34 pm

ternyata ketemu juga………
trims bro…….

[Reply]
admin Reply:
October 25th, 2011 at 10:39 am
semoga tutorial ini membantu

[Reply]
Lidya
October 22, 2011 at 11:42 pm

Tidak semua orang tahu padahal ini penting,terutama bagi para guru,orang tua dan para pelajar serta orang rumah tangga bahwa dengan majunya teknologi kita semua harus bisa memilah dan mimilih semua informasi dan komunitas di dalamnya terutama yang berkaitan di internet lebih khusus lagi yang berhubungan dengan situs pertemanan.

[Reply]
admin Reply:
October 25th, 2011 at 10:34 am
lagi promosi situs ya?

[Reply]
Indra
October 27, 2011 at 3:54 pm

Ijin copy gan, boleh ya ?

[Reply]
admin Reply:
November 11th, 2011 at 3:14 pm
silahkan, tapi dicantumkan live link sumber nya ya

[Reply]
m.din
December 19, 2011 at 9:22 am

posting nya sangat membantu sekali

[Reply]
rahmad
December 24, 2011 at 6:54 pm

gan, itu html ttg buat tablenya
langsong d buat semua?
mhon penjelasanya
thnks ganjavascript:kaskusemoticonsclick(‘’

[Reply]
admin Reply:
January 2nd, 2012 at 11:42 am
gak gan, tergantung mau buat yang gimana, itu kan potongan-potongan

[Reply]