Cara Membuat Tabel HTML di Notepad

Ditulis Oleh:

Cara membuat tabel html di notepad – Hallo Sahabat Programmer, kali ini saya akan berbagi tutorial dasar buat kalian yang sama sekali baru belajar HTML. Ketika saya dulu baru belajar tentang web aplikasi sederhana yang dikenalkan kepada saya adalah notepad, iya aplikasi notepad yang ada di windows.

Dengan aplikasi tersebut kita dapat membuat sebuah website. bahkan tidak mungkin kita juga dapat membuat website dengan skala besar yang bersifat dinamis dengan menggunakan aplikasi editor paling sederhana yang bernama notepad tersebut. Yah, walaupun saya yakin para programmer profesional tidak mungkin menggunakan editor tersebut, karena alasan penggunaan yang minim fasilitas kemudahan dan tidak tidak efisien. Tetapi walaupun demikian substansi dari editor tersebut tidak dapat di hilangkan.

Pengenalan Notepad

notepad

Notepad merupakan sebuah aplikasi default yang disertakan disemua versi sistem operasi yang ada di windows. Kegunaan utama dari aplikasi ini adalah untuk membuat file teks (editor text) yang dapat disimpan dengan ektensi .txt namun kita juga bia gunakan dengan extensi yang lain misalnya saat kita ingin membuat dokumen html menggunakan notepad maka kita perlu menyimpannya dengan extensi .html. bukan hanya html saja bahkan bahasa pemrograman seperti PHP, Java dan lainnya dapat kita melalui editor ini.

Tabel di html

didalam html kita dapat membuat tabel dengan format dasar

<table>
// Membuat Baris dan kolom disini
</table>

Tabel terdiri dari baris dan kolom. Untuk membuat baris dan kolom kita gunakan tag berikut:

  • <td> untuk menyatakan kolom
  • <tr> untuk menyatakan baris

Selain kedua tag diatas terdapat juga tag untuk membuat header tabel. Tag yang digunakan adalah

  • <th> untuk menyatakan heading tabel

Untuk membuat ilustrasi untuk menggambarkan struktur sebuah tabel. Coba perhatikan pada gambar dibawah Cell yang di beri no 1 sampai 5 merupakan baris sementara cell yang diberi huruf A sampai C merupakan tabel. Selain itu cell A sampai C juga bisa dikatakan sebagai heading (kepala) dari tabel tersebut.

contoh tabel

Jika kalian sudah memahami konsepnya. Mari langsung saja coba kita praktekan!

Membuat Tabel HTML di Notepad

Ikuti langkah-langkah berikut ini:

  • Klik Start dibagian kiri paling bawah
  • Ketikan pada search bar dengan kata kunci ‘notepad
  • Jika muncul Klik, maka aplikasi notepad akan terbuka
aplikasi notepad

Selanjutnya coba kalian copy sintak dibawah ini kedalam notepad tersebut

<!DOCTYPE html>
<html>
<body>

<h2>Belajar Tabel</h2>

<table border='1'>
  <tr>
    <th>No</th>
    <th>Nama</th> 
    <th>Jurusan</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Setiawan Dimas</td>
    <td>Teknik Informatika</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Wahyu Widya</td>
    <td>Teknik Sipil</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Erik Wasis</td>
    <td>Teknik Listrik</td>
  </tr>
</table>

</body>
</html>
  • Setelah itu pilih menu File, kemudian pilih Save As
simpan file extensi html
  • Silahkan, disimpan pada direktrori di komputer kalian (terserah), yang penting disini adalah pada bagian file name masukan nama file disini saya menggunakan nama tabel lalu kemudian diikuti dengan ekstensi .html
  • Kemudian pada bagian Save as type pilih All Files, Lalu kemudian di klik save
  • Selanjutnya buka file tabel.html yang telah kalian simpan
file tabel exntensi html
  • Ketika kalian mengklik file tersebut, maka file nya akan dibuka di aplikasi browser kalian. Karena exntensi filenya adalah .html makanya akan dibuka melalui browser
tabel tampil di browser

Pengaturan Tabel di HTML

Selanjutnya kita akan belajar pengaturan lanjutan untuk mengatur tabel di html, seperti pengaturan jarak cell pada tabel, penggabungan cell didalam tabel dan lainnya. Untuk tutorial tersebut sudah saya tulis pada artikel berikut:

Baca disini : Cara membuat tabel di html

Sekian pembahasan singkat untuk cara membuat tabel html di notepad. Untuk belajar tutorial html kalian bisa belajar di situs ini. Jika ada yang ingin ditanyakan langsung saja komentar dibawah postingan ini. Sampai jumpa pada artikel berikutnya, Terimakasih.