Cara membuat Table HTML

TABEL HTML

Table digunakan untuk menyajikan data dalam bentuk kolom dan baris.umumnya setiap kolom menunjukkan data yang sejenis,dan setiap baris yang terdiri atas kolom2 menunjukkan kelompok data dalam satu kesatuan.

Sebuah table mempunyai judul tempat anda menjelaskan kolom/baris yang di libatkan,baris untuk informasi dan sel untuk setiap itemnya,setiap baris menjelaskan sebuah tag table HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi TAG

Elemen Elemen di dalam table :

<table> </table> : mendefinisikan sebuah table dalam HTML jika attribute border dituliskan maka browser akan menampilkan table dengan border.

<caption> </caption> mendifinisikan tulisan untuk judul table

<tr> </tr> menspesifikasikan sebuah baris table dalam table.

<th> </th> mendefinisikan sel header dalam table

<td> </td> menspesifikasikan sebuah sel data table

Attribute di dalam table :

<align”left|center|right”> : aligment horizontal dalam table

<valign=”top|middle|bottom” >: defenisi aligment vertical dalam sel

<colspan=”#” > : jumlah # kolom sel di perlebar

<Rowspan=”#”> : jumlah # baris sel di perlebar

<nowrap> : matikan wrapping dalam sel

Contoh latihan 1 membuat table :

<body>

<table border="1">

<tr>

<td> kolom pertama baris pertama </td>

<td> kolom kedua baris pertama </td>

</tr>

<tr>

<td> kolom kedua baris pertama </td>

<td> kolom kedua baris kedua </td>

</table>

</body>

HasiL 1:

Contoh latihan ke dua menggunakan border :

<body>

<table border="5">

<tr>

<td> kolom pertama baris pertama </td>

<td> kolom kedua baris pertama </td>

</tr>

<tr>

<td> kolom kedua baris pertama </td>

<td> kolom kedua baris kedua </td>

</table>

</body>

Hasil 2:

Contoh latihan 3 tabel dengan menggunakan caption :

<body>

<table border="3">

<caption> JUDUL DARI TABLE </caption>

<tr>

<td> kolom pertama baris pertama </td>

<td> kolom kedua baris pertama </td>

</tr>

<tr>

<td> kolom kedua baris pertama </td>

<td> kolom kedua baris kedua </td>

</table>

</body>

Hasil 3 :

Contoh ke 4 dengan menggunakan colspan :

<body>

<table border="3">

<tr>

<td colspan="2" align="center"> kolom pertama menggunakan colspan </td>

</tr>

<tr>

<td> kolom kedua baris pertama </td>

<td> kolom kedua baris kedua </td>

</tr>

<tr>

<td> kolom ketiga baris pertama </td>

<td> kolom ketiga baris kedua </td>

</tr>

<tr>

<td colspan="2" align="center"> kolom pertama menggunakan colspan </td>

</tr>

</table>

</body>

Hasil 4:

Contoh ke 5 dengan menggunakan Rowspan :

<body>

<table border="1">

<tr>

<td rowspan="5"> kolom rowspan </td>

<td> kolom pertama </td>

</tr>

<tr>

<td> kolom dua </td>

</tr>

<tr>

<td> kolom dua </td>

</tr>

<tr>

<td> kolom dua </td>

</tr>

<tr>

<td> kolom dua </td>

</tr>

</table>

</body>

Hasil 5 :

Contoh dengan menggunakan cellpadding & cellspacing

Cellpadding merupakan cara untuk membuat spasi lebih dari antara sel dan bordernya sedangkan

Cellspacing merupakan cara untuk menamabh jarak antara sel

Contoh cellpadding dengan value=9 dan cellspacing dengan value=5

<body>

<table border="1" cellspacing="9" cellpadding="5">

<tr>

<td> kolom pertama baris pertama </td>

<td> kolom kedua baris pertama </td>

</tr>

<tr>

<td> kolom kedua baris pertama </td>

<td> kolom kedua baris kedua </td>

</table>

</body>

Hasil 6:

Contoh membuat warna background dalam table dengan menggunakan bgcolor & background

<body>

<table border="1">

<tr>
<td rowspan="5" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbqL4Tp1GLP4zEyZCvM3v5nNMSPVngha4lJGAnjvOg2Lr-EF8TwD5I8gJrk-GiIYqNkfBkkVh51_jccGNV5AvGGK1ND8eyFON1X1hOQIpmXZKBtP7G_w5oejHfe9_8HvK34SZLiAFk1Lq/s1600/11111111.png"> kolom rowspan </td>

<td bgcolor="red">nama kolom </td>

</tr>

<tr>

<td bgcolor="yellow">nama kolom </td>

</tr>

<tr>

<td>nama kolom </td>

</tr>

<tr>

<td>nama kolom </td>

</tr>

<tr>

<td bgcolor="green">nama kolom </td>

</tr>

</table>

</body>

Hasil 7:

Cara mengatur tinggi dan lebar table dengan width dan height :

<body>

<table border="1" width="500" height="150">

<tr>

<td> isi kolom </td>

<td> isi kolom </td>

</tr>

<tr>

<td> isi kolom </td>

<td> isi kolom </td>

</table>

</body>

Hasil 8 :

D-Crow