×Tutup

Pemberitahuan


Hallo semua, pada pertemuan ke dua ini kita masih membahas dasar dasar tentang HTML, setelah pada pertemuan pertama kita sampai pada <tag> paragraf. Kali ini kita akan membahas tentang <tag> tabel.

Bagaimana membuat tabel pada HTML ?

Untuk membuat tabel pada HTML sebenarnya tidak terlalu susah, kita hanya perlu menggunakan tiga jenis tag, yaitu tag <table> untuk membuat tabel, tag <tr> untuk membuat baris dan tag <td> untuk membuat sebuah kolom.

Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

Tag <table> merupakan tag pembuka dalam membuat sebuah table
pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table.

Berikut contoh dalam kode HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar membuat tabel di html</title>
    </head>
<body>
    <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>
Simpan kode di atas dengan format .html, bila di jalankan maka akan menghasilkan tampilan di layar sebagai berikut:


Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border='1'. atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).

Selanjutnya bagaimana membuat keterangan seperti membuat Header pada tabel ?
Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar membuat tabel di html</title>
 </head>
<body>
 <table border="1">
 <tr>
  <th>No</th>
  <th>Nama</th>
  <th>Alamat</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Ahmad Subki</td>
  <td>Gunungsari</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Rumaysha</td>
  <td>Mataram</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Lubna</td>
  <td>Kekalik</td>
 </tr>
</table>
</body>
</html>
Simpan kode di atas dengan format .html, bila di jalankan maka akan menghasilkan tampilan di layar sebagai berikut:


Bagaimana ? gampang juga kan ternyata bikin tabel pada HTML. Selanjutnya pada pertemuan ke 3 kita akan membahas <tag> HTML lainnya.

Ahamd Subki.
Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama