Customer Service

Fanpage

Women Clothes

Online Service

Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Atribut border dan cellpadding dalam tabel HTML

Label:
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel.
contoh penggunaan atribut border dalam tag table:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut border dalam Tabel</h3>
<table border="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="6">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>
Belajar HTML atribut border dalam Tabel
Dengan memberikan nilai ’0′ kepada atribut border, tabel seolah-olah tidak memiliki garis tepi.

Atribut cellpadding dalam tabel HTML

Atribut cellpadding digunakan untuk mengatur jarak dari tepi border sel tabel dengan text isi tabel.
contoh penggunaan atribut cellpadding dalam tag table:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding dalam Tabel</h3>
<table border="1" cellpadding="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="1" cellpadding="7">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>
Belajar HTML atribut cellpadding dalam Tabel

Atribut cellspacing dalam tabel HTML

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.
contoh penggunaan atribut cellspacing dalam tag table:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellspacing dalam Tabel</h3>
<table border="1" cellspacing="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="1" cellspacing="7">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>
Belajar HTML atribut cellspacing dalam Tabel
Menggabungkan ketiga atribut tersebut dalam sebuah tabel, maka kita dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita.

Menggunakan Gambar sebagai form

Label:
Dengan menggunakan gambar untuk tombol Form HTML seperti: submit, search, send dll memang akan kelihatan lebih menarik.
Bagaimana cara membuatnya? ikuti langkah-langkah berikut ini.
Untuk tombol pada Form HTML, kode untuk menuliskannya adalah:
<input type="submit" value="Tombol">
Maka hasilnya adalah seperti berikut:
Untuk menggunakan gambar kita cukup mengubah kodenya menjadi:
<input type="image" src="contoh.jpg">
Dimana src adalah lokasi dan nama dari gambar (image) yang akan kita gunakan.
Untuk membuat gambar, kita bisa menggunakan program grafik seperti Photoshop atau Corel Photopaint atau bisa juga mencarinya di Internet dengan kata kunci free button. BTW, Google search yang dibawah berfungsi lho, kenapa ngak sekalian dicoba?
Gambar tersebut harus berada tepat ditengah dengan dikelilingi oleh kekuatan warna yang sama pada setiap sisinya sehingga akan mudah nantinya untuk menyesuaikan dengan warna latar belakang website kita, berikut adalah contoh sebuah gambar tombol:
go
Kita akan menggunakan Google Search sebagai contoh dalam pelajaran ini.
Berikut adalah Google Search dengan menggunakan table dan masih menggunakan tombol standar, tulisan yang tebal adalah merupakan input untuk tombol pada form ini:
<form action="http://www.google.com/search" method="get">
<table border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type="submit" name="button"  value="Go">
</td>
</tr>
</table>
</form>
Hasil dari kode diatas adalah sebagai berikut:
Selanjutnya kita akan memasukkan gambar, agar sesuai dengan warna gambar tadi maka kita harus membuat warna yang sama pada latar belakang tabel atau halaman website, jadi kita harus mengetahui kode dari warna tersebut kemudian masukkan ke “bgcolor” seperti dibawah.
<form action="http://www.google.com/search" method="get">
<table bgcolor="#B0D8E2" border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type="image" name="button" src="go.jpg">
</td>
</tr>
</table>
</form>
Tulisan yang tebal merupakan kode yang ditambah dan diubah dari kode sebelummya.
Dan hasil dari Form diatas adalah sebagai berikut:
Jika anda tidak ingin menggunakan table, anda bisa menggunakan kode dibawah ini.
Code HTML:
<div id="google-search">
<form action="http://www.google.com/search" method="get">
<input type="text" class="s-text" maxlength="30" name="q" size="18" />
<input type="hidden" name="hl" value="en" />
<input type="image" class="s-images" name="button" alt="Search"  src="go.jpg" />
</form>
</div>
Code CSS:
#google-search {
width: 180px;
background: #B0D8E2;
height: 28px;
margin: 0;
padding: 2px;
}
#google-search .s-text {
float: left;
height: 18px;
margin: 4px;
padding: 0;
border: 1px solid #B0D8E2;
background: #fff;
}
#google-search .s-images {
float: right;
margin: 0;
padding: 0;
Berikut adalah hasilnya:

Tips untuk mengetahui Kode Warna dengan Ms FrontPage

Lebih lanjut mengenai kode warna, untuk mengetahui kode warna dari image, anda bisa menggunakan Ms ProntPage, yang saya pernah coba adalah Ms FrontPage XP Professional, caranya adalah buka Program tersebut kemudian kecilkan jendelanya sehingga anda bisa melihat gambar yang akan anda cari kode warnanya. Kemudian pada tombol untuk mengubah font color, klik More Color:
front_page1
Maka akan tampil jendela seperti berikut:
front_page2
Kemudian tekan tombol “Select” dengan alat ini tujukan ke warna gambar yang ingin anda ketahui kode warnanya, jadi tool ini bisa bekerja walaupun diluar dari jendela Ms ProntPage tersebut, asal jangan diluar layar monitor. :)
Setelah posisinya sudah tepat ke warna yang diinginkan kemudian klik, maka kode dari warna tersebut akan terlihat di “value” seperti contoh gambar diatas adalah: Hex={E8,E6,D7}maka sebagai hasil akhirnya kita cukup ambil angka dan huruf yang ada diantara kurung dan menghapus tanda koma kemudian menambahkan tanda “#” sehingga menjadi: #E8E6D7, dan tinggal memasukkannya ke kode html.
Kalau saya sendiri biasa mencari kode warna tersebut dengan menggunakan CSS editor seperti Top Style Lite, sangat cocok apalagi jika web kita menggunakan CSS.

Coding Tabel HTML

Label:
Sekilas tentang tabel. Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan. Cara membuat tabel. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag
adalah untuk membuat tabel kemudian di ikuti dengan tag (table rows) adalah untuk membuat baris pada tabel kemudian tag
(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.
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
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
. 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 gunakan atribut 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.
Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
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 widht 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.
Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Hasil: Gabungan Kolom 1&2 pada Baris 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.
Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Hasil: Gabungan Baris 1&2 pada Kolom 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 cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Hasil: Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Hasil: Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Membuat titel pada tabel. Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag
tepat setelah tag dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
Disini adalah titel tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Hasil: Disini adalah titel tabel ini Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Membuat background pada tabel Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Hasil: Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px. Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px. Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0. ...
Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Hasil: Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

Pembayaran

Produk Terlaris

  • Baju Hamil Kerja Rp.195.000.-
    Labels: Baju Hamil Setelan baju hamil All size 036A Rp 195.000 Setelan baju hamil All size 036B Rp 195.000 Setelan baju ham...
  • Gamis Modern 2 Rp.350.000,-
    Labels: Gamis Modern Harga: Rp.350.000 Gamis cantik modern berbahan katun polos dengan aplikasi bordir Size: S, M, L, XL K...
  • Actual basic 2 Rp.200.000,-
    Labels: Kaos Muslimah Harga: Rp.200.000 Bahan: 100% katun combed 20 S yang berkualitas dan nyaman dipakai sehari-hari. Ters...
  • Coding Tabel HTML
    Sekilas tentang tabel. Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya ...

WordPress Themes

Template by Toni Hart Praja | Tukang Buat Blog | Blogger.com