Tutorial HTML untuk Pemula: Membuat Tabel di HTML

Halo gan. Di postingan sebelumnya kita sudah membahas cara memasukkan gambar di HTML. Kali ini kita akan bahas cara membuat tabel di HTML.

tutorial html untuk pemula

Membuat tabel di HTML

Ada 3 tag yang digunakan untuk membuat tabel di HTML. yakni: tag <table>, <tr>, dan <td>.

<table> : sebagai tag pembuka membuat tabel
<tr> : sebagai pembuat baris di tabel, singkatan dari table row
<td> : sebagai pembuat kolom data di tabel, singkatan dari table data

Jadi struktur membuat tabel di HTML seperti ini:
<table>
  <tr>
    <td>Kolom 1 Baris 1</td>
  </tr>
</table>

Langsung kita coba buat tabel 2 baris dengan masing-masing baris ada 2 kolom data.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</h1>

    <table>
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
    </table>
  </body>
</html>

Simpan dengan nama tabel.html.. jadinya seperti ini.

tutorial html untuk pemula

Loh, kok nggak ada garis tepinya?

Supaya ada garis tepinya, kita tambahkan atribut border pada tag <table>. Nilai dari atribut border ini berukuran dalam satuan pixel.

Coba kita tambahkan border="1".
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</h1>

    <table border="1">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
    </table>
  </body>
</html>

Baru deh ada garis tepinya.

tutorial html untuk pemula

Kalo mau tambah kolom datanya gimana?

Tinggal tambah ini:
<td>baris 1 kolom 3</td>

dan ini:
<td>baris 2 kolom 3</td>

di masing-masing <tr></tr>.

Jadinya seperti ini:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</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>
    </table>
  </body>
</html>

Di browsernya akan tampil:

tutorial html untuk pemula

Kalo mau tambah barisnya?

Tinggal tambah ini:
<tr>
  <td>baris 3 kolom 1</td>
  <td>baris 3 kolom 2</td>
  <td>baris 3 kolom 3</td>
</tr>

Jadi kode akhirnya:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel di HTML</title>
  </head>

  <body>
    <h1>Tabel 2 x 2</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>
    </table>
  </body>
</html>

Akan seperti ini jadinya:

tutorial html untuk pemula

Gimana? nggak susah kan? lebih enak sekalian praktik.

Okay, selesai pembahasan kita tentang membuat tabel di HTML.

Selanjutnya kita akan membahas cara menambahkan komentar di HTML.



0 Komentar untuk "Tutorial HTML untuk Pemula: Membuat Tabel di HTML"