Tag Table dan Atributnya

Tag ini digunakan untuk membuat tabel pada dokumen HTML. Sebelumnya kita akan membahas tentang guna tabel itu sendiri. Tabel sangat berguna untuk membuat susunan halaman HTML kita menjadi lebih rapi. Dengan tabel kita dapat dengan leluasa menempatkan tulisan atau gambar dengan tatanan yang sangat teratur. Penggunaan tag ini selalui disertai dengan penggunaan tag <TR> dan <TD>. Tag <TR> untuk menyatakan baris dari tabel dan tag <TD> untuk menyatakan kolom dari tabel.

Contoh penulisan :

1. <table>  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table>

 

 

Hasilnya : 

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

BORDER

Atribut ini berguna untuk memberikan garis tepi pada tabel, jika tabel tidak dituliskan garis tepinya maka secara otomatis akan diartikan bahwa garis tepi bernilai 1.

Contoh I: 

1. <table border="0">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table> 

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

Contoh II:

1. <table border="1">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table> 

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

Contoh III:

1. <table border="2">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table>

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

Contoh IV:

1. <table border="15">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table>

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

CELLPADDING

Atribut ini digunakan untuk memberikan jarak antar sel pada suatu tabel.

Contoh I:

1. <table border="1" cellpadding="0">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table> 

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

Contoh II:

1. <table border="1" cellpadding="5">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table> 

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

Contoh III:

1. <table border="1" cellpadding="20">  
2.     <tr>  
3.         <td>  
4.             Tabel ini memiliki dua kolom. Ini kolom pertama.  
5.         </td>  
6.         <td>  
7.             Tabel ini memiliki dua kolom. Ini kolom kedua.  
8.         </td>  
9.     </tr>  
10. </table> 

Hasilnya :

Tabel ini memiliki dua kolom. Ini kolom pertama.

Tabel ini memiliki dua kolom. Ini kolom kedua.

CELLSPACING

Atribut ini digunakan untuk memberikan jarak antar sel pada suatu tabel.

Contoh I:

1. <table border="1" cellpadding="5" cellspacing="0">  
2.     <tr>  
3. <td> semoga </td>  
4. <td> berkah </td>  
5. </tr>  
6. <tr>  
7. <td> dot </td>  
8. <td> com </td>  
9. </tr>  
10. </table> 

Hasilnya :

semoga	berkah
dot	com

Contoh II:

1. <table border="1" cellpadding="5" cellspacing="5">  
2.     <tr>  
3. <td> semoga </td>  
4. <td> berkah </td>  
5. </tr>  
6. <tr>  
7. <td> dot </td>  
8. <td> com </td>  
9. </tr>  
10. </table>

Hasilnya :

semoga	berkah
dot	com

Contoh II:

1. <table border="1" cellpadding="5" cellspacing="20">  
2.     <tr>  
3. <td> semoga </td>  
4. <td> berkah </td>  
5. </tr>  
6. <tr>  
7. <td> dot </td>  
8. <td> com </td>  
9. </tr>  
10. </table> 

Hasilnya :

semoga	berkah
dot	com