Seri Belajar Pemograman Web Tingat Dasar Bagian 2

Daftar Isi
  1. Membuat List HTML
  2. Order List
  3. Unordered List
  4. Definition List
  5. Tutorial Membuat Tabel Tanpa CSS
  6. Tabel Tag
  7. Tutorial Membuat Tabel Dengan CSS

Hallo setelah kita mempelajari dasar dasar html bagian pertama kita lanjut ke pembelajaran html bagian kedua, untuk kamu yang belum mengikuti di artikel pertama bisa pencet disini.

Membuat List Html

Didalam Html terdapat tiga jenis list diantaranya adalah :

Order List

Order List adalah contoh List Html yang pertama didalam tah Order List diawali dengan tag <ol> dan ditutup dengan </ol> sebelum ditutup di dalam tag ol ada tag list <li> yang ditutup dengan tag </li>, biasanya tag ini menghasilkan daftar nama dengan urutan angka bersusun.

Contoh skripnya : <ol>
<li> Contoh Satu</li>
<li> Contoh Dua</li>
<li> Contoh Tiga</li>
</ol>

Unordered List

Unordered List Jenis daftar kedua yang mungkin ingin kamu sertakan adalah daftar <ul> yang tidak diurutkan. Unorderlist Ini lebih dikenal sebagai daftar poin-poin dan tidak berisi angka. Penggunaan sama dengan Order List hanya saja yang membedakan tag ol diganti dengan tag ul.
Contoh skripnya :
<ul>
<li> Contoh Satu</li>
<li> Contoh Dua</li>
<li> Contoh Tiga</li>
</ul>

Definition List

Definition List atau Daftar Definisi adalah contoh tag list ketiga didalam html. Kamu dapat menambahkan tag ini kedalam file html mu dengan tag <dl>, tapi tag ini berbeda dengan tag dua di atas, penjelasan tagnya ada dibawah ini, mari kita simak.
Contoh skripnya : <dl>
<dt> Item</dt>
<dd> Definisi item di sini</dd>
</dl>
penjelasan : tag <dl> adalah Daftar Definisi.
tag <dt> yang ada di dalam tag <dl> adalah tag untuk mendefinisikan nama atau istilah.
tag <dd> yang ada di dalam tag <dl> adalah tag yang menjelaskan nama atau istilah yang ada di dalam tag <dt>

Tutorial Membuat Tabel

Dalam membuat tabel kamu harus menggunakan tag tabel <table> lalu diikuti dengan tag row <tr> dan diikuti oleh tag <td> untuk lebih jelasnya perhatikan kode tabel di bawah ini
Contoh scriptnya
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2</td>
<td>Row 1 - Column 3</td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

Kode di atas akan menghasilkan tabel dengan 2 baris dan 3 sel tabel diatas tidak memiliki garis karena kita belum menambahkan style css.

Table Tag

Ini adalah daftar tag tabel untuk memudahkan proses belajarmu

Table Tag
Arti
Lokasi
<thead>
Table Head
Diatas Tabel
<tbody>
Table Body
Kontent Tabel
<tfoot>
Table Foot
Dibawah Tabel
<colgroup>
Column Group
Diantara Tabel
<th>
Table Header
Sel Data untuk Header Tabel

Tutorial Membuat Tabel Dengan CSS

Jika script diastas murni html maka hasilnya tidak memiliki garis hanya tata letak, sekarang kita akan membuat tabel dengan css agar terlihat semakin indah ketiklah script dibawah  ini.

Contoh scriptnya
<!DOCTYPE html>
<html>
<head>
<title>Table ku dengan CSS | www.guegabut.com</title>
</head>
<body>
<h1 align="center">Table ku dengan CSS | www.guegabut.com</h1>
<table id="customers">
  <tr>
    <th>Perusahaan</th>
    <th>Kontak</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Budi 1</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 2</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 3</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 4</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 5</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 6</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 7</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
  <tr>
    <td>Budi 8</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 9</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
  <tr>
    <td>Budi 10</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
</table>

</body>
</html>

Hasil dari script diatas seperti ini
Tabel HTML tanpa CSS
Lalu tambahkan tag style <style> di bawah tag <head>

contoh scriptnya 

<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>

berikut ini adalah script lengkapnya 

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<h1 align="center">Table ku dengan CSS | www.guegabut.com</h1>

<table id="customers">
  <tr>
    <th>Perusahaan</th>
    <th>Kontak</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Budi 1</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 2</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 3</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 4</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 5</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 6</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 7</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
  <tr>
    <td>Budi 8</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Budi 9</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
  <tr>
  <tr>
    <td>Budi 10</td>
    <td>23456789</td>
    <td>Indonesia</td>
  </tr>
</table>

</body>
</html>

Hasil dari script diatas seperti gambar di bawah ini :
Tabel HTML dengan CSS
Sekian semoga bermanfaat ya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...