BELAJAR HTML 10 : Cara Membuat Tabel di HTML

html10

Cara Membuat Tabel HTML dengan Tag <table>,<tr> dan <td>

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>,tag<tr>, dan tag<td> :



  • Tag <table> digunakan untuk memulai tabel.
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML :
Contoh penggunaan tag <table>:

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Penggunaan Tag Tabel</title>  
 </head>  
 <body>  
 <h1>Belajar Tag Tabel</h1>  
 <table border="1">  
   <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>  
   <tr>  
     <td> Baris 3, Kolom 1</td>  
     <td> Baris 3, Kolom 2</td>  
     <td> Baris 3, Kolom 3</td>  
   </tr>  
   <tr>  
     <td> Baris 4, Kolom 1</td>  
     <td> Baris 4, Kolom 2</td>  
     <td> Baris 4, Kolom 3</td>  
   </tr>  
 </table>  
 </body>  
 </html>
Save dengan nama tabel.html, lalu buka dengan browser

html10 

Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

ide10
Sebelum standar CSS diimplementasikan ke dalam semua browser, pada sekitar tahun 2000-an kebanyakan programmer dan desainer web menggunakan tabel untuk mengatur tampilan web. Membuat menu ada di atas dan sisi kanan web bisa diakali dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi rumit. Saat ini anda masih bisa menggunakan ide tersebut, namun sangat disarankan menggunakan CSS untuk mengatur tampilan halaman web.

ide10
HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk pembahasan mengenai ini, igemx telah membuat beberapa tutorial lanjutan tentang Tabel HTML yang bisa dipelajari pada: Tutorial Belajar Tabel HTML Lanjutan.

Sampai disini kita telah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan halaman web. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya. Mengenai hal ini akan kita bahas pada tutorial selanjutnya: Cara Menambahkan komentar di HTML.

Komentar

Posting Komentar

Postingan populer dari blog ini

BELAJAR PHP 5 : Cara Menjalankan File PHP dengan XAMPP

Gambar
Mengenal Folder htdoc Agar dapat mengakses halaman PHP dari web browser , maka anda harus menempatkan file PHP di dalam folder khusus yang merupakan folder home dari web server. Pada aplikasi XAMPP , folder tersebut adalah folder htdocs yang berada di dalam folder instalasi XAMPP . Jika anda mengubah tempat instalasi XAMPP menjadi D:\xampp ( jika mengikuti tutorial sebelumnya), maka folder tersebut seharusnya berada di D:\xampp\htdocs . Anda bisa meletakkan file PHP langsung di dalam folder ini, atau agar memudahkan pencarian file , buatlah sebuah folder baru di dalam folder htdocs ini. Untuk tutorial belajar PHP , saya akan membuat folder "belajar". Folder belajar inilah yang aka kita jadikan sebagai tempat file PHP nantinya. Cara menulis File PHP File PHP pada dasarnya merupakan file text biasa yang bisa di buat menggunakan aplikasi notepad bawaan windows, namun untuk fitur yang lebih, anda dapat menggunakan aplikasi editor text seperti Notepat++ , yang dapat di dow
Baca selengkapnya

BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP

Gambar
BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP Pada tutorial Belajar PHP kali ini kita akan membahas cara penulisan komentar di dalam kode PHP . PHP menyediakan beberapa cara untuk menambahkan komentar yang mirip dengan cara memberikan komentar di bahasa pemograman lain seperti C, C++ dan Unix Shell Komentar di perlukan untuk memberikan penjelasan kepada orang lain yang membaca kode kita. komentar sepenuhnya akan diabaikan oleh PHP pada saat eksekusi. Walaupun anda berfikir bahwa mungkin hanya anda yang akan membaca kode program tersebut, namun itu adalah ide yang bagus. saya sendiri sering bingung ketika memahami beberapa baris kode program setelah beberapa bulan tidak melihatnya. Komentar yang baik adalah komentar singkat dan tidak terlalu panjang, namun memberikan penjelasan tentang kegunaan kode atau variabel tersebut dibuat. Selain sebagai tempat membuat penjelasan, sifat komentar yang tidak akan dieksekusi oleh PHP , memberikan ke
Baca selengkapnya

BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini)

Gambar
BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini). Dalam tutorial belajar PHP kali ini kita akan mempelajari cara mengubah/mengedit file konfigurasi PHP melalui file php.ini. Hal ini terdengar sedikit rumit. Namun dengan mengetahui cara mengubah settingan PHP , akan membantu kita dalam menguasi PHP .  Mencari file php.ini dengan phpinfo() Sama seperti MySQL , seluruh setingan PHP berada dalam sebuah file konfigurasi yang bernama php.ini. Tergantung settingan awal, file php.ini bisa berada dalam folder sistem Windows , atau di dalam folder PHP itu sendiri. Untuk mengetahui lokasi file php.ini, jalankan XAMPP dan web server Apache , lalu dari halaman awal localhost, cari menu phpinfo() pada menu sebelah kiri. phpinfo() merupakan sebuah fungsi bawaan PHP yang digunakan untuk mengetahui settingan PHP itu sendiri. Anda juga bisa menampilkan phpinfo dengan membuat sebuah file PHP, dan menuliskan kode berikut : <?php echo phpinfo(); ?> Didalam t
Baca selengkapnya