Advertisement
Setelah mengetahui beberapa antribut elemen tabel pada artikel sebelumnya, sekarang waktunya untuk menerapkan beberapa antribut yang telah disebutkan tadi, sekaligus untuk praktek. berikut daftar contohnya :
MEMBUAT TABEL HTML BIASA
Code :
MEMBUAT TABEL HTML BIASA
Code :
<!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>
hasil dari kode diatas adalah :
MEMBUAT TABEL HTML DENGAN HEADING
Code :
MEMBUAT TABEL HTML DENGAN ANTRIBUT CELLPADDING & CELLSPACING
Code :
<!DOCTYPE html>
MEMBUAT TABEL HTML DENGAN ANTRIBUT COLSPAN & ROWSPAN
Code :
MEMBUAT BACKGROUND PADA TABEL HTML
Code :
MEMBUAT BACKGROUND GAMBAR PADA TABEL HTML
Code :
MEMBUAT TABEL HTML DENGAN ANTRIBUT HEIGHT DAN WIDTH
Antribut ini berfungsi untuk mengatur tinggi dan lebar tabel.
Code :
MEMBUAT TABEL DENGAN CAPTION
Code :
MEMBUAT HEADING, BODY, DAN FOOTER PADA TABEL HTML
Code :
CONTOH TABEL LAINNYA :
Code :
hasil dari kode diatas adalah :
MEMBUAT TABEL HTML DENGAN HEADING
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html>Hasil dari kode diatas adalah :
MEMBUAT TABEL HTML DENGAN ANTRIBUT CELLPADDING & CELLSPACING
Code :
<!DOCTYPE html>
<html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html>hasil dari kode diatas adalah :
MEMBUAT TABEL HTML DENGAN ANTRIBUT COLSPAN & ROWSPAN
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>hasil dari kode diatas adalah :
MEMBUAT BACKGROUND PADA TABEL HTML
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>hasil dari kode diatas adalah :
MEMBUAT BACKGROUND GAMBAR PADA TABEL HTML
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border="1" bordercolor="green" background="/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>hasil dari kode diatas adalah :
MEMBUAT TABEL HTML DENGAN ANTRIBUT HEIGHT DAN WIDTH
Antribut ini berfungsi untuk mengatur tinggi dan lebar tabel.
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> </head> <body> <table border="1" width="400" height="150"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>hasil dari kode diatas adalah :
MEMBUAT TABEL DENGAN CAPTION
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table Caption</title> </head> <body> <table border="1" width="100%"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td><td>row 2, columnn 2</td> </tr> </table> </body>
</html>hasil dari kode diatas adalah :
MEMBUAT HEADING, BODY, DAN FOOTER PADA TABEL HTML
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html>hasil dari kode diatas adalah :
Code :
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <tr> <td> <table border="1" width="100%"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html>
hasil dari kode diatas adalah :
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon