Cara Membuat Tabel Menggunakan Script HTML

Assalamu'alaykum Warrahmatullahi Wabarakaatuh

Pembahasan kita kali ini mengenai pembuatan tabel menggunakan script HTML. Sebelum itu, Anda perlu memperhatikan beberapa hal:

1.Persiapan yang Dibutuhkan

Pada langkah ini Anda akan mengetahui hal apa saja yang harus dipersiapkan.

Apa yang Anda Butuhkan?

Hal yang pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser, seperti yang Anda gunakan untuk membuka artikel ini.

Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.

Untuk aplikasi lain Anda hanya memerlukan editor sederhana yang ada pada Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu.

Untuk sistem operasi selain Windows, Anda dapat menggunakan text editor sejenis seperti Pico untuk Linux atau TextEdit untuk Mac.

Jadi untuk mempelajari HTML Anda hanya memerlukan sebuah browser dan text editor saja.

Apakah Perlu Koneksi Internet?

Untuk menjalankan HTML, tidak perlu koneksi internet, kecuali untuk artikel yang sedang Anda baca ini.

2. Memahami Web Browser

Web browser adalah sebuah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman website.

Untuk halaman website biasanya dibuat dengan HTML, XML dan lainnya.

Browser akan menerjemahkan sebuah halaman website yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang dipahami manusia.

Meskipun setiap web browser memiliki fitur dan tampilan yang berbeda, tapi untuk fungsi secara umum sama.

3. Pahami Element, Tag, dan Attribut

Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari tag pembuka, konten, dan tag penutup.

Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan >.

Jika dibedakan, untuk tag terdapat dua jenis, yaitu tag pembuka <html> dan tag penutup </html>. Dua jenis tag ini hanya dibedakan dengan tanda garis miring.

Contoh

Sebagai contoh untuk element em (emphasis) terdiri dari semua code mulai dari tag pembuka <em> dan tag penutup </em>.

Berikut untuk contoh codenya:

<em>Contoh element.</em>

Untuk hasilnya akan terlihat seperti tulisan di bawah:

Contoh element.

Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 sampai h6 adalah ukuran terkecil.

Berikut adalah codenya:

<h1>Ini adalah h1</h1>
<h2>Ini adalah h2</h2>
<h3>Ini adalah h3</h3>
<h4>Ini adalah h4</h4>
<h5>Ini adalah h5</h5>
<h6>Ini adalah h6</h6>

Untuk tampilan di browser akan terlihat seperti gambar di bawah:

Menggunakan huruf besar atau huruf kecil?

Mungkin Anda memiliki pertanyaan mengenai penulisan tag, apakah harus menggunakan huruf besar atau huruf kecil. Meskipun browser tidak membedakan mengenai hal tersebut, untuk pembuatan tag pada umumnya menggunakan huruf kecil.

Itulah sedikit pengenalan mengenai element dan tag.

Attribute

Setelah Anda memahami element dan tag, Anda perlu memahami apa itu attribute. Seperti diketahui jika sebuah element berupa sturktur pada HTML yang berfungsi untuk memberitahu browser mengenai apa yang akan ditampilkan.

Aturan penulisan sebuah attribute:

Nama attribute diikuti oleh tanda sama dengan.
Nilai attribut diapit oleh dua tanda petik pembuka dan penutup.
Jika lebih dari satu attribut, diberi jarak dengan spasi.

4. Struktur HTML

Setelah Anda memehami elemet HTML, selanjutnya adalah menggabungkannya menjadi satu di dalam dokumen HTML.

Coba perhatikan code berikut ini:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Halaman pertamaku</title>
     </head>
     <body>
          <p>Ini adalah halaman pertamaku</p>
     </body>
</html>

Penjelasan:

<!DOCTYPE html> – Merupakan deklarasi dari type dokumen
<html></html> – Dikenal dengan element utama karena semua element berada di dalamnya.
<head></head> – Element ini berfungsi untuk memasukkan konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword, deskripsi, CSS, dll.
<meta charset=”utf-8″> – Berfungsi untuk memberitahu browser mengenai pengkodean karakter yang sesuai dengan ketentuan UTF-8, mengenai UTF-8 silakan baca artikel berikut.
<title></title> – Merupakan judul dari halaman website yang muncul pada bagian tab browser.
<body></body> – Berisi konten yang ditampilkan pada browser ketika pengunjung mengakes halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.

5. Buat Halaman Website Pertama Anda

Dengan HTML Anda dapat membuat website sendiri dengan memahami dasarnya, berbeda ketika Anda membuat website dengan WordPress. Meskipun website WordPress jauh lebih bagus, tapi Anda belum tentu memahami strukturnya seperti apa.

Pada bagian pertama, Anda sudah mengetahui hal yang dibutuhkan untuk membuat website dengan HTML, yaitu sebuah browser dan text editor seperti Notepad.

Text editor yang kami gunakan ialah Notepad.

1. Buka Notepad, kemudian buat halaman baru.

2. Copy code di atas ke dalam halaman baru.

3. Kemudian simpan dengan Save as type pilih html.

Untuk melihat hasilnya, silakan buka file index.html yang telah Anda buat melalui browser. Berikut adalah tampilannya:

6. Lengkapi Halaman Website Anda

Setelah Anda selesai membuat halaman website sederhana dan memahami strukturnya, selanjutnya adalah menambahkan beberapa elemen yang dibutuhkan pada sebuah halaman website pada umumnya.

Untuk sebuah halaman website biasanya terdari dari judul, subjudul, list, link, gambar, tabel, komentar untuk code, dan form.

7. Cara Membuat Table Produk dengan Menggunakan HTML

<!DOCTYPE html>

<html>

<head>

<title>Ade Trinaldi</title>

</head>

<body>

<table border=1 align=center width="600">

<tr>

<th colspan="3" bgcolor="red">Daftar produk</th>

</tr>

<tr>

<td rowspan="4">

<img src="Xiaomi_Redmi_4X.jpg" width="200" />

</td>

</tr>

<tr>

<td style="background-color: blue;">Nama produk</td>

<td style="background-color: green;">Xiaomi Redmi 4X</td>

</tr><tr>

<td style="background-color: blue;">Harga</td>

<td style="background-color: green;">Rp 1.500.000</td>

</tr><tr>

<td style="background-color: blue;">Fitur</td>

<td style="background-color: green;">

<ul>

<li>Smartphone dual SIM berlayar 5"</li>

<li>Kamera belakang 13 MP dan Kamera Depan 5MP</li>

<li>Memiliki RAM 3GB</li>

<li>Processor Qualcomm MSM8940 Snapdragon 435 Octa-core Cortex-A53</li>

<li>Battery Non-removable Li-Po 4100 mAh</li>

</ul>

</td>

</tr>

</table>

</body>

</html>

setelah selesai kalian bisa simpan notepad tersebut dengan nama yang anda inginkan dan tambahkan .html dibelakangnya (contoh: produkxiaomi.html)lalu buat folder baru dan letakan didalam folder tersebut. Jika ingin menambahkan gambar didalamnya kalian harus menaruh gambar di folder yg sama. Dan cara untuk melihatnya dengan menggunakan browser, lalu tulis localhost/nama folder/nama produk.html (contoh: localhost/XIAOMI/produkxiaomi.html). Berikut adalah contoh gambarnya:

Penjelasan:

<table>: Untuk membuat tabel kaya di MS.excel tapi cara membuat tabelnya menggunakan bahasa html dan di dalam script table terdiri 3 tag yaitu : th, td, dan tr.

<td>: Kepanjangan dari table data, digunakan untuk membuat isi dari th atau baris atau kalau di MS.excel seperti cell.

<tr>: Kepanjangan dari table row, digunakan untuk mendefiniskan baris pada tabel.

<th>: Kepanjangan dari table heading, digunakan untuk membuat judul sebuah table seperti No, dan nama. biasanya di tanda dengan hurufnya menjadi bold seperti contoh table di atas.

<ul>: Menunjukan sebuah unordered list atau daftar acak.

6.<li>: Menunjukan tingkatan daftar atau list yang bersarang.

Selesai sudah tutorial mengenai cara pembuatan tabel dengan menggunakaan script HTML, Semoga Bermanfaat. Good bye :)

Cari Blog Ini

Catatan Sistem Informasi