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 tabelbackground - 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:
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″>
<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>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLPADDING=”5″>
<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>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLSPACING=”5″>
<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>
———————————————————————
<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>
Untuk membuat tabel harus diawali dengan tag <table> dan diakhiri dengan tag </table>. baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag </tr>. Dari dalam baris kemudian dibuat kolom-kolom dengan tag <td> dan diakhiri tag </td>. Untuk header (baris paling atas dari tabel) kolom-kolomnya dibuat denga tag <th> dan </th>. Judul tabel bisa dibuat dengan tag <caption> dan </caption>. Agar tabel terlihat ada garis-garisnya, perlu ditambahkan atribut <border>, misalnya <table border=1>.
Suatu sel bisa diberi background dengan cara <td background=gambar.jpg>. diberi warna : <td bgcolor=”#203e8d>, diberikan link <td><a href=link.html><img src=gambar.gif border=0></td>. Sebuah gambar yang utuh dapat disusun atas sel-sel dalam tabel, sehingga bila masing-masing sel diberi link akan diperoleh efek imageMap. Atribut Tabel yang lain
Pelurusan horizontal suatu sel : align (left, center, right, justify), ex : <tr align=left>, <td align=left>.
Pelurusan vertical suatu sel : valign(top, middle, bottom), ex : <tr valign=top>, <td valign=bottom>.
Jumlah (n) kolom yang ditempati sebuah sel : rowspan=n, ex : <td rowspan=2>
Mematikan kemampuan melipat kata dalam sel : nowrap, ex : <td nowrap>
Menentukan panjang/lebar suatu sel/kolom : (weight, height), ex : <td height=10, weight=5>
Contoh :
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″>
<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>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLPADDING=”5″>
<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>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLSPACING=”5″>
<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>
———————————————————————
<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>
Untuk membuat tabel harus diawali dengan tag <table> dan diakhiri dengan tag </table>. baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag </tr>. Dari dalam baris kemudian dibuat kolom-kolom dengan tag <td> dan diakhiri tag </td>. Untuk header (baris paling atas dari tabel) kolom-kolomnya dibuat denga tag <th> dan </th>. Judul tabel bisa dibuat dengan tag <caption> dan </caption>. Agar tabel terlihat ada garis-garisnya, perlu ditambahkan atribut <border>, misalnya <table border=1>.
Suatu sel bisa diberi background dengan cara <td background=gambar.jpg>. diberi warna : <td bgcolor=”#203e8d>, diberikan link <td><a href=link.html><img src=gambar.gif border=0></td>. Sebuah gambar yang utuh dapat disusun atas sel-sel dalam tabel, sehingga bila masing-masing sel diberi link akan diperoleh efek imageMap. Atribut Tabel yang lain
Pelurusan horizontal suatu sel : align (left, center, right, justify), ex : <tr align=left>, <td align=left>.
Pelurusan vertical suatu sel : valign(top, middle, bottom), ex : <tr valign=top>, <td valign=bottom>.
Jumlah (n) kolom yang ditempati sebuah sel : rowspan=n, ex : <td rowspan=2>
Mematikan kemampuan melipat kata dalam sel : nowrap, ex : <td nowrap>
Menentukan panjang/lebar suatu sel/kolom : (weight, height), ex : <td height=10, weight=5>
Contoh :
<table border=2>
<caption>Judul Tabel</caption>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>
