>> Cara Membuat Tabel Dengan Kode HTML ~ pemrograman web

Monday, 1 February 2016

Cara Membuat Tabel Dengan Kode HTML

03:47 Putu Ariana html 6 comments

Membuat Tabel

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.

Pembuatan Tabel

Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

Contoh dibawah ini adalah serangkaian serangkaian kode html untuk membuat table.

<!DOCTYPE HTML>
<html>
<head>
 <title>Pembuatan Table</title>
</head>
<body>
<table border="1">
 <tr>
  <td>tanggal</td>
 </tr>
</table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Cara Membuat Tabel 1 baris 2 kolom:

Berikut ini adalah cara membuat table dengan kode 1 baris 2 kolom, Lihat penerapannya di bawah ini;

<!DOCTYPE HTML>
<html>
<head>
 <title>Pembuatan Table</title>
</head>
<body>
<table border="1">
 <tr>
  <td>Nama</td>
 </tr>
 <tr>
  <td>Kelas</td>
 </tr>
</table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Cara Membuat Tabel 3 baris 1 kolom:

Berikut ini adalah cara membuat table dengan kode 3 baris 1 kolom, Lihat penerapannya di bawah ini;

<!DOCTYPE HTML>
<html>
<head>
 <title>Tabel 3 baris 1 kolom</title>
</head>
<body>
<table border="1">
 <tr>
  <td>tanggal</td>
 </tr>
 <tr>
  <td>Jeniskelamin</td>
 </tr>
 <tr>
  <td>Kota</td>
 </tr>
</table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Cara Membuat Tabel dengan a tribut cellspacing:

Atribut cellspacing digunakan untuk menentukan jarak antar sel pada sebuah tabel. Lihat penerapan cellspacing pada kode HTML berikut ini:

<!DOCTYPE HTML>
<html>
<head>
 <title>Membuat atribut cellspacing</title>
</head>
<body>
 <table border="1" cellspacing="10">
  <tr>
   <td>mobil</td>
   <td>Motor</td>
  </tr>
  <td>pesawat</td>
  <td>Kapal laut</td>
 </table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Cara Membuat Tabel dengan a tribut cellpadding

Atribut cellpadding digunakan untuk memberi jarak antara sel dengan tulisan, Lihat penerapanya pada kode html berikut ini.

<!DOCTYPE HTML>
<html>
<head>
 <title>Membuat atribut cellpadding</title>
</head>
<body>
 <table border="1" cellpadding="10">
  <tr>
   <td>mobil</td>
   <td>Motor</td>
  </tr>
   <td>pesawat</td>
   <td>Kapal laut</td>
 </table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Cara Membuat Tabel dengan a tribut cellpadding cellspacing dipakai bersama-sama

Jika kedua atribut tersebut di pakai bersamaan dalam pembutan tabel, Maka penerapanya seperti di bawah ini:

<!DOCTYPE HTML>
<html>
<head>
 <title>Membuat atribut cellpadding dan cellspacing</title>
</head>
<body>
 <table border="1" cellpadding="10" cellspacing="10">
  <tr>
   <td>mobil</td>
   <td>Motor</td>
  </tr>
   <td>pesawat</td>
   <td>Kapal laut</td>
 </table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Menentukan Lebar Dan Tinggi Kolom Dengan satuan Pixel

Untuk membuat tabel, lebar kolom (WIDTH) dan tinggi kolom (HEIGHT) Dapat di tentukan dengan satuan pixel. Lihat penerapanya dengan kode html di bawah ini:

<!DOCTYPE HTML>
<html>
<head>
 <title>Table</title>
</head>
<body>
 <table border="7">
  <tr height="40">
   <td width="140">mobil</td>
   <td width="200">Motor</td>
  </tr height="80">
   <td width="140">pesawat</td>
   <td width="200">Kapal laut</td>
 </table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Perataan Tulisan Dalam Tabel

Perataan tulisan dalam tabel mengunakan tag ALIGN (Untuk perataan horisontal) dan VALIGN (untuk perataan vertikal) untuk melihat kodenya bisa anda lihat di bawah ini:

<!DOCTYPE HTML>
<html>
<head>
 <title>Tabel</title>
</head>
<body>
<style>
        tbody > tr:nth-child(2n+1) > td, tbody > tr:nth-child(2n+1) > th {
            
        }
        table{
            width           : 70%;
            margin          : auto;
            border-collapse : collapse;
            box-shadow      : darkgrey 3px;
        }
        thead tr {
            background-color: #36c2ff;
        }
    </style>
   <center><h2>Tabel Mahasiswa</h2></center>

 <table width="600" border="1">
  <tr bgcolor="#36c2ff">
   <th align="center">No</th>
   <th valign="middle">Nim</th>
   <th valign="middle">Nama</th>
   <th align="center">Kelas</th>
   <th>Jurusan</th>
  </tr>
   <td align="center">1</td>  
   <td valign="middle">14.1401.081</td>
   <td align="center">Putu Ariana</td>
   <td align="center">Bk14</td>
   <td align="center">Teknik Informatika</td>
  <tr bgcolor="magenta">
   <td valign="middle">2</td>
   <td valign="middle">14.1401.011</td>
   <td valign="middle">Ayu</td>
   <td valign="middle">Hk14</td>
   <td valign="middle">teknik Informatika</td>
  </tr>
  <tr bgcolor="#36c2ff">
   <td align="center">3</td>
   <td align="center">14.1401.081</td>
   <td align="center">NI kadek tika</td>
   <td align="center">Ck14</td>
   <td align="center">teknik Informatika</td>
  </tr>
 </table>
</body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Membuat absen kuliah.

Untuk membuat adsen kuliah di butuhkan semua mulai dari a tribut cellpadding cellspacing dan tag align dan valign dan lain sebagainya temen-temen bisa lihat kodenya seperti di bawah ini:

<!DOCTYPE HTML>
<html>
<head>
  <title>Jadwal Kuliah</title>
 </head>
 <body>
  <h3><center>ABSEN KULIAH</center></h3>
  <h3><center>SEMESTER GANJIL TAHUN AKADEMIK 2015/2016</center></h3>
  <br />

 <table border="0">
  <tr>
   <td align="justify" style="text-indent:100px;">Fakultas</td>
   <td style="text-indent:80px;">: Ilmu Komputer</td>
   <td align="justify" style="text-indent:400px;">Nama Dosen</td>
   <td style="text-indent:25px;">: Gafur.,S.Kom.,MT</td>
  </tr> 
  <tr>
   <td align="justify" style="text-indent:100px;">Program Studi</td>
   <td style="text-indent:80px;">: Teknik Informatika</td>
   <td align="justify" style="text-indent:400px;">Dosen Mitra</td>  
   <td style="text-indent:25px;">: Dirga.,S.Kom</td>
  </tr> 
  <tr>
   <td align="justify" style="text-indent:100px;">Mata Kuliah</td>
   <td style="text-indent:80px;">: Prak/Pemrograman Web I</td>
   <td align="justify" style="text-indent:400px;">Kelas</td>  
   <td style="text-indent:25px;">: BK-14</td>
  </tr> 
  <tr>
   <td align="justify" style="text-indent:100px;">Kode Mata Kuliah</td> 
   <td style="text-indent:80px;">: 03KB-TI</td>
  </tr>
 </table>
  <br />
  <br />

  
 <table  width="900" border="1">
  <tr bgcolor="#36c2ff">
   <th rowspan="2">No</th>
   <th rowspan="2">NIM</th>
   <th rowspan="2">Nama Mahasiswa</th>
   <th colspan="100">Paraf Dosen/Mahasiswa</th>
  </tr>
  <tr bgcolor="#36c2ff">
   <td align="center" width="25">1</td>
   <td align="center" width="25">2</td> 
   <td align="center" width="25">3</td>
   <td align="center" width="25">4</td>
   <td align="center" width="25">5</td>
   <td align="center" width="25">6</td>
   <td align="center" width="25">7</td>
   <td align="center" width="25">8</td>
   <td align="center" width="25">9</td>
   <td align="center" width="25">10</td>
   <td align="center" width="25">11</td>
   <td align="center" width="25">12</td>
   <td align="center" width="25">13</td>
   <td align="center" width="25">14</td>
   <td align="center" width="25">15</td>
   <td align="center" width="25">16</td>
  </tr>

  <tr align="center">
   <td>1</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>2</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>3</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>4</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr><tr align="center">
   <td>5</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>6</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr><tr align="center">
   <td>7</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>8</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr><tr align="center">
   <td>9</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="center">
   <td>10</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr><tr align="center">
   <td>11</td>
   <td>14.1401.081</td>
   <td>Putu Ariana</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr align="center">
   <td>17</td>
   <td>14.1401.082</td>
   <td>Eko purwato</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>

 </table>
 </body>
</html>

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..

Sekian tutorial membuat tabel dengan kode html dari saya semoga bermanfaat bagi temen-temen,

Lokasi: Makassar, Makassar City, South Sulawesi, Indonesia

6 comments:

Naufal Hafiz13 March 2016 at 18:14
Saya suka HTML seperti ini, oh iya gan kalau nanti kuliah masuk jurusan apa ya biar bisa ketemu kode-kode kayak gini?
ReplyDelete
Replies
Eko Sutrisno13 March 2016 at 18:15
Ane pernah coba dulu di dreamweaver cuma lupa skrg hehe
ReplyDelete
Replies
Putu Ariana7 September 2017 at 04:49
es campur ya bang
ReplyDelete
Replies
Unknown16 September 2018 at 16:26
Pada waktu Mata Kuliah Design & Pemrograman Web hari Sabtu tanggal 15 September 2018 kemaren, kebetulan membahas tentang cara membuat tabel dengan kode html. Jujur saja,saya masih sedikit bingung Gan, semoga dengan adanya Artikel "Cara Membuat Tabel Dengan Kode HTML" ini saya menjadi lebih faham lagi bagaimana caranya dan langkah-langkah apa saja yang harus saya kerjakan agar hasilnya sesuai dengan apa yang diinginkan. Ini Artikel yang sangat bagus dan bermanfaat bagi saya & para pemula lainnya.
Terima kasih ya Agan sudah memuat Artikel ini,,,Semoga Ilmunya terus mengalir seperti air...
Salam Sukses Agan...

Jangan Lupa Kunjungi Website Kampus Saya : http://www.atmaluhur.ac.id
Dan Kunjungi juga Website Saya : https//leniyasin.mahasiswa.atmaluhur.ac.id
ReplyDelete
Replies

cicicookies.com

kumpulanrumusnya.comnya.com.com