Postingan HTML

Cara Membuat Tabel.

Untuk membuat table yang sederhana ada 3 menu utama yaitu table, tr dan td. Tag <table>adalah untuk membuat tabel kemudian diikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">    

        <tr>

               <td>Cell 1 - Baris 1 Kolom 1</td>

               <td>Cell 2 - Baris 1 Kolom 2</td>

        </tr>

        <tr>

               <td>Cell 3 - Baris 2 Kolom 1</td>

               <td>Cell 4 - Baris 2 Kolom 2</td>

        </tr>

        <tr>

               <td>Cell 5 - Baris 3 Kolom 1</td>

               <td>Cell 6 - Baris 3 Kolom 2</td>

        </tr>

</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur Lebar Dan Tinggi Tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width.Untuk lebar dan tinggi dari td kita gunakana tribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">

        <tr>

               <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>

               <td>Baris 1 Kolom 1</td>

        </tr>

        <tr>

               <td>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:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran width dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan Kolom Pada Tabel

Table Cell  atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">

        <tr>

               <td colspan="2">GabunganKolom 1&amp;2padaBaris 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:

GabunganKolom 1&2 padaBaris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">

        <tr>

               <td style="width:50%" rowspan="2">GabunganBaris 1&amp;2 padaKolom 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:

GabunganBaris 1&2 padaKolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur Jarak Kolom Pada Tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cell padding dan cell spacing.

Cell padding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">

        <tr>

               <td style="width:50%;">Baris 1 Kolom 1</td>

               <td>Baris 1 Kolom 2</td>

        </tr>

        <tr>

               <td>Baris 2 Kolom 1</td>

               <td>Baris 2 Kolom 2</td>

        </tr>

</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Nah berikut adalah kode 

Memasukan Gambar Atau Foto Dengan HTML :

<img style="

width: 100px; 

height: 120px;"src="URL GAMBAR ATAU FOTO">

Keterangan :
img style = kode untuk sebuah Gambar HTML
width           = Lebar dari Gambar yang akan sahabat masukan
height        = Tinggi dari Gambar yang akan sahabat masukan
src           = Pencarian lokasi Gambar atau foto yang akan dimasukan

Selanjutnya ganti tulisan URL GAMBAR ATAU FOTO dengan urlGambar yang akan sahabat masukan, sebagai contoh sundaboy akan memasukan sebuah Foto.

<img style="

width: 239px; 

height: 320px;"  

src="URL Gambar">

Posted in: