cara membuat tabel pada HTML

CARA MEMBUAT TABEL PADA HTML

Mengenal Struktur Tabel HTML

Tabel dalam HTML ditandai dengan kode <tabel> dan diakhir dengan </tabel>. Untuk membuat baris di dalam tabel menggunakan kode <tr> (tr singkatan table row), dan pada setiap baris mesti memiliki kolom-kolom, untuk membuat kolom menggunakan kode <td> (td singkatan table data). Data yang ada pada kolom bisa berupa text, angka, gambar, link. Berikut struktur lengkap Tabel HTML:

<table>
<tr>
<td></td>
</tr>
</table>

Contoh Membuat Tabel

Masukkan kode berikut ke notepad :

<table border=”1″>
<tr>
<td>No</td>
<td>Nama Mahasiswa</td>
<td>Alamat</td>
<td>Semester</td>
</tr>
<tr>
<td>1</td>
<td>Bandi</td>
<td>Surabaya</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>Agung Firmansyah</td>
<td>Jakarta</td>
<td>8</td>
</tr>
</table>

Kemudian save dan beri nama tabel.html Save as Type-nya pilih All Files. Buka tabel.html menggunakan firefox/internet explorer/google chrome, akan tampil seperti di bawah ini:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5
1	Agung Firmansyah	Jakarta	8

Cara Membuat Tabel HTML memakai Atribut :

Untuk mendesain tabel supaya bisa terlihat lebih indah memerlukan atribut tambahan yang bekerja pada tag <table>. Berikut atribut tag tabel yang diperlukan:

• Tabel Header

Tabel header digunakan untuk membedakan data header dan data konten pada tabel. Tabel header menggunakan tag <th>, berikut contohnya:

<table border=”1″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• Tabel Caption

Table Caption berfungsi untuk memberikan penamaan pada tabel. Didefinisikan dengan tag <caption>. Contoh penggunaan, tambahan kode <caption>Tabel Mahasiswa</caption> di bawah tag <table>. Hasilnya menjadi:

Tabel Mahasiswa
No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• 
  
• Penggabungan Kolom dan Baris

Menggabungkan beberapa kolom menjadi satu kolom menggunakan atribut colspan , sedangkan untuk menggabungkan baris menggunakan atribut rowspan. Contoh penggunaan:

Penggunaan Atribut colspan:

<table border=”1″>
<tr>
<td colspan=”2″>Gabungan Kolom 1 dan 2 pada Baris 1</td>
</tr>
<tr>
<td style=”width:50%”>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Gabungan Kolom 1 dan 2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Penggunaan Atribut rowspan:

<table border=”1″>
<tr>
<td rowspan=”2″>Gabungan Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Gabungan Baris 1 dan 2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

• Pengaturan Jarak pada kolom

Pengaturan jarak antara text dengan kolom tabel menggunakan cellpadding dan cellspacing. celpadding berarti mengatur jarak dari sisi bagian dalam kolom, sedangkan cellspacing mengatur jarak dari sisi bagian luar kolom. Contoh penggunaan:

Atribut cellpadding:

<table border=”1″ celpadding=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

Atribut cellspacing:

<table border=”1″ cellspacing=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• Tabel Background

Untuk memperindah tampilan tabel salah satunya dengan mengatur warna dari tabel. Berikut contoh pengaturan warna pada tabel:

<table border=”1″ celpadding=”10″ style=”background:#eee;”>
<tr style=”background:red;”>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Agung Firmansyah </td>
<td>Jakarta </td>
<td>8</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Agung Firmansyah	Jakarta	8

Keterangan :

Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

1.   bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

2.  align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

 3. cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .

 4. border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan  kodenya : boeder="pixel" .

 5. cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .

6. height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .

7. valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

8. colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

9. rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Hardware dan Software

HARDWARE

       Pengertian Hardware atau Perangkat Keras adalah komponen pada komputer yang dapat terlihat dan disentuh secara fisik.

Contoh dari Hardware adalah sebagai berikut:

~ Perangkat Masukan (Input Device): Merupakan Hardware yang digunakan untuk memasukkan data, baik berupa teks, foto, maupun gambar ke dalam komputer.

   Contohnya adalah Keyboard, Mouse, Scanner, Joystick dan microphone.

1.         Keyboard

Keyboard merupakan alat untuk memasukkan data maupun perintah ke CPU, biasanya terdiri atas rangkaian huruf, angka, dan tombol fungsi lainnya.

 2.         Mouse

Mouse merupakan alat bantu untuk memberikan perintah dalam memproses data atau mengedit data.

3.     Scanner

Scanner merupakan alat Bantu untuk memasukkan data berupa gambar atau grafik dan mengubahnya ke dalam bentuk digital sehingga dapat diproses dan digabungkan dengan bentuk data yang berupa teks.

~ Perangkat Pemrosesan: Merupakan Hardware yang terdapat pada sebuah komputer untuk memproses masukkan/input dari pengguna.

   Contohnya : CPU, DVD Room dan prosesor pada sebuah komputer.

1.         CPU (Central Processing Unit)

Merupakan alat yang berfungsi sebagai pemroses data.CPU berisi rangkaian sirkuit yang menyimpan instruksi-instruksi pemrosesan dan penyimpanan data.

~ Perangkat Keluaran (Output Device): Merupakan Hardware yang digunakan untuk menghasilkan suatu proses (output) dari pengguna komputer (User).

   Contohnya adalah Monitor, Printer, Speaker dan Earphone

1.        Monitor

Merupakan alat yang mampu menampilkan teks maupun gambar dari data yang sedang diproses dalam CPU.

2.         Printer

Priter merupakan alat yang memproduksi keluaran data (output) berbentuk cetak, berupa teks maupun gambar/grafik.

~ Perangkat penyimpanan : Merupakan Hardware yang digunakan untuk menyimpan sebuah data.

   Contohnya adalah Disket(Floppy Disk),HardDisk,FlashDisk,CD dan RAM/ROM.

1.         Floppy Disk

Floppy disk merupakan alat tambahan untuk menyimpan atau menuliskan ke dalam disket maupun sebaliknya, ukuran yang umum digunakan adalah ukuran 3,5 inchi.

 2.         Harddisk

Harddisk merupakan alat tambahan untuk menyimpan data dalam kapasitas besar yang dilapisi secara magnetis, saat ini perkembangan harddisk sangat cepat dari daya tampung dan kecepatan membacadata.Perlu kalian ketahui saat ini harddisk memang mutlak ada dalam setiap computer atau laptop sebagai penyimpan sistem operasi yang permanen.

3.     Flasdiks

Flasdisk merupakan tempat penyimpanan data yang paling digemari karena kapasitasnya yang besar dan beragam selain itu ukurannya yang kecil memudahkan kita untuk membawanya kemana-mana, hadirnya flasdisk telah menggantikan floppy disk yang dulu sering digunakan untuk penyimpanan data yang portable, kapasitas minimum flashdis adalah 128mb sedangkan untuk kapasitas maksimumnya bisa mencapai 40 Gb, lebih kecil dibanding Hardisk                              External yang kapasitasnya bisa mencapai 1 tera bite (1000 Gb).

 SOFTWARE

     Pengertian Software atau Perangkat Lunak adalah data-data yang terdapat pada sebuah komputer yang diformat kemudian disimpan secara digital. Bisa dibilang bahwa Software merupakan komponen yang tidak terlihat secara fisik, tetapi terdapat dalam sebuah komputer. 

Contoh dari Software adalah sebagai berikut:

gambar: LibreOffice

1. Sistem Operasi: Merupakan Software yang digunakan untuk menghubungkan antara Hardware dengan Pengguna/User.
2. Software Aplikasi: Merupakan Software yang dapat diaplikasikan untuk memenuhi kebutuhan pengguna. Contohnya adalah Software paket aplikasi perkantoran seperti Libre Office dan Microsoft Office

Beberapa fungsi dari software  :

1. Untuk menghubungkan perangkat keras dengan brainware

2. Sebagai alat pembantu

3. Sebagai alat pemogram