TABLE HTML

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

HTML Table Contoh
Nomor Nama Depan Nama Belakang Poin
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

________________________________________
Mendefinisikan Tabel HTML
contoh
<span tabel = "width: 100%">
   <tr>
     <td> Jill </ td>
     <td> Smith </ td>
     <td> 50 </ td>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan tag <tr>.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
  Data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
________________________________________
Sebuah Tabel HTML dengan Atribut Border
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan menggunakan atribut border:
contoh
<table border = "1" style = "width: 100%">
   <tr>
     <td> Jill </ td>
     <td> Smith </ td>
     <td> 50 </ td>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
  Atribut border sedang dalam perjalanan dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti border CSS:
contoh
meja, th, td {
     border: 1px solid hitam;
}

Coba Sendiri »
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
________________________________________
Sebuah Tabel HTML dengan Borders Collapsed
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse:
contoh
meja, th, td {
     border: 1px solid hitam;
     border-collapse: collapse;
}

Coba Sendiri »

________________________________________
Sebuah Tabel HTML dengan Sel Padding
Sel bantalan menentukan ruang antara isi sel dan perbatasannya.
Jika Anda tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa bantalan.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
meja, th, td {
     border: 1px solid hitam;
     border-collapse: collapse;
}
th, td {
     padding: 15px;
}

Coba Sendiri »

________________________________________
HTML Table Pos
Tabel judul didefinisikan dengan <th> tag.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama depan </ th>
     <th> Nama belakang penumpang </ th>
     <th> Poin </ th>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Coba Sendiri »
Untuk kiri menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
     text-align: left;
}

Coba Sendiri »

________________________________________
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak Border menentukan ruang antara sel.
Untuk mengatur jarak perbatasan untuk tabel, menggunakan properti CSS border-spacing:
contoh
table {
     border-spacing: 5px;
}

Coba Sendiri »
  Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
________________________________________
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama </ th>
     <th colspan = "2"> Telepon </ th>
   </ tr>
   <tr>
     <td> Bill Gates </ td>
     <td> 555 77 854 </ td>
     <td> 555 77 855 </ td>
   </ tr>
</ table>

Coba Sendiri »

________________________________________
Tabel Sel yang berkaitan dengan berbagai Rows
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<span tabel = "width: 100%">
   <tr>
     <th> Nama Pertama: </ th>
     <td> Bill Gates </ td>
   </ tr>
   <tr>
     <th rowspan = "2"> Telepon: </ th>
     <td> 555 77 854 </ td>
   </ tr>
   <tr>
     <td> 555 77 855 </ td>
   </ tr>
</ table>

Coba Sendiri »

________________________________________
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke tabel, gunakan <caption> tag:
contoh
<span tabel = "width: 100%">
   <caption> tabungan bulanan </ caption>
   <tr>
     <th> Bulan </ th>
     <th> Tabungan </ th>
   </ tr>
   <tr>
     <td> Januari </ td>
     <td> $ 100 </ td>
   </ tr>
   <tr>
     <td> Februari </ td>
     <td> $ 50 </ td>
   </ tr>
</ table>

Coba Sendiri »
  The <caption> tag harus dimasukkan segera setelah <table> tag.
________________________________________
Gaya Berbeda untuk Tabel Berbeda
Sebagian contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar dari setiap meja.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya di <head>, bagaimanapun, menentukan gaya untuk semua tabel di halaman.
Untuk menentukan gaya khusus untuk meja khusus, menambahkan atribut id ke meja:
contoh
<table id = "T01">
   <tr>
     <th> Nama depan </ th>
     <th> Nama belakang penumpang </ th>
     <th> Poin </ th>
   </ tr>
   <tr>
     <td> Eve </ td>
     <td> Jackson </ td>
     <td> 94 </ td>
   </ tr>
</ table>

Sekarang Anda dapat menentukan gaya yang berbeda untuk tabel ini:
tabel # T01 {
     width: 100%;
     background-color: # f1f1c1;
}

Coba Sendiri »

Dan menambahkan lebih gaya:
tabel # T01 tr: nth-anak (bahkan) {
     background-color: #eee;
}
tabel # T01 tr: nth-anak (aneh) {
     background-color: # fff;
}
th tabel # T01 {
     warna: putih;
     background-color: hitam;
}

Coba Sendiri »

________________________________________
Bab Ringkasan
• Gunakan HTML <table> elemen untuk mendefinisikan tabel
• Gunakan HTML <tr> elemen untuk mendefinisikan baris tabel
• Gunakan HTML <td> elemen untuk menentukan data tabel
• Gunakan HTML <th> elemen untuk menentukan judul tabel
• Gunakan HTML <caption> elemen untuk menentukan judul tabel
• Gunakan properti perbatasan CSS untuk menentukan perbatasan
• Gunakan properti CSS border-collapse runtuh batas sel
• Gunakan properti CSS padding untuk menambahkan padding untuk sel
• Gunakan properti CSS text-align untuk menyelaraskan teks sel
• Gunakan properti CSS border-spacing untuk mengatur jarak antar sel
• Gunakan atribut colspan untuk membuat rentang sel banyak kolom
• Gunakan atribut rowspan untuk membuat rentang sel banyak baris
• Gunakan atribut id untuk secara unik mendefinisikan satu meja

GAMBAR HTML

Example

GIF Images

JPG Images

PNG Images

<! DOCTYPE html>
<html>

<body>
  <h2> Spectacular Mountains </ h2>
  <img src = "pic_mountain.jpg" alt = "Mountain View" style = "width: 304px; height: 228px">
</ body>

</ html>

Coba Sendiri »
  Selalu tentukan ukuran gambar. Jika ukuran tidak diketahui, halaman akan berkedip sedangkan beban gambar.
________________________________________
HTML Images Sintaks
Dalam HTML, gambar didefinisikan dengan tag <img>.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The src atribut mendefinisikan url (alamat web) dari gambar:
<img src = "url" alt = "some_text">

________________________________________
Alt Atribut
Atribut alt menentukan sebuah teks alternatif untuk gambar, jika tidak dapat ditampilkan.
Nilai atribut alt harus menjelaskan gambar dengan kata:
contoh
<img src = "html5.gif" alt = "The HTML5 Icon resmi">
Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
________________________________________
Layar Pembaca HTML
Layar pembaca adalah program perangkat lunak yang dapat membaca apa yang ditampilkan di layar.
Digunakan di web, pembaca layar dapat "mereproduksi" HTML sebagai teks-to-speech, ikon suara, atau output braille.
Layar pembaca digunakan oleh orang-orang yang buta, tunanetra, atau ketidakmampuan belajar.
  Layar pembaca dapat membaca atribut alt.
________________________________________
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (px digunakan setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">

Coba Sendiri »
Atau, Anda dapat menggunakan lebar dan tinggi atribut.
Nilai-nilai yang ditentukan dalam piksel (tanpa px setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">

Coba Sendiri »

________________________________________
Lebar dan Tinggi atau Style?
Baik lebar, tinggi, dan atribut gaya, berlaku dalam standar HTML5 terbaru.
Kami sarankan Anda menggunakan atribut style. Ini mencegah gaya lembar untuk mengubah ukuran default gambar:
contoh
<! DOCTYPE html>
<html>
<head>
<style>
   img {width: 100%; }
</ style>
</ head>

<body>

<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">

</ body>

</ html>

Coba Sendiri »
  Di W3Schools kami lebih suka menggunakan atribut style.
________________________________________
Gambar dalam Folder lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam folder yang sama dengan halaman web.
Namun, itu adalah umum di web, untuk menyimpan gambar dalam sub-folder, dan merujuk ke folder dalam nama gambar:
contoh
<img src = "/ images / html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">

Coba Sendiri »
Jika browser tidak dapat menemukan gambar, maka akan muncul icon broken link:
contoh
<img src = "wrongname.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">

Coba Sendiri »

________________________________________
Gambar di Server lain
Beberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda dapat mengakses gambar dari alamat web di seluruh dunia:
contoh
<img src = "http://www.w3schools.com/images/w3schools_green.jpg">

Coba Sendiri »

________________________________________
pindah Images
Standar GIF memungkinkan gambar bergerak:
contoh
<img src = "programming.gif" alt = "Man Computer" style = "width: 48px; height: 48px">

Coba Sendiri »
Perhatikan bahwa sintaks memasukkan gambar bergerak tidak berbeda dari gambar non-bergerak.
________________________________________
Menggunakan Image sebagai sebuah Link
Hal ini umum untuk menggunakan gambar sebagai link:
contoh
<a href="default.asp">
   <img src = "smiley.gif" alt = "HTML tutorial" style = "width: 42px; height: 42px; border: 0">
</a>

Coba Sendiri »
  Kami telah menambahkan border: 0 untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar.
________________________________________
gambar Maps
Untuk gambar, Anda dapat membuat peta gambar, dengan daerah yang dapat diklik:
contoh
<img src = "planets.gif" alt = "Planet" usemap = "# planetmap" style = "width: 145px; height: 126px">

<name peta = "planetmap">
   <daerah shape = "rect" coords = "0,0,82,126" alt = "Sun" href = "sun.htm">
   <daerah shape = "lingkaran" coords = "90,58,3" alt = "Mercury" href = "mercur.htm">
   <daerah shape = "lingkaran" coords = "124,58,8" alt = "Venus" href = "venus.htm">
</ peta>

Coba Sendiri »

________________________________________
gambar Mengambang
Anda dapat membiarkan mengambang gambar ke kiri atau kanan paragraf:
contoh
<p>
   <img src = "smiley.gif" alt = "wajah Smiley" style = "float: left; width: 42px; height: 42px">
   Sebuah paragraf dengan gambar. Gambar mengapung di sebelah kiri teks.
</ p>

Coba Sendiri »

________________________________________
Bab Ringkasan
• Gunakan HTML <img> untuk mendefinisikan gambar
• Gunakan atribut HTML src untuk menentukan nama file gambar
• Gunakan atribut alt HTML untuk menentukan teks alternatif
• Gunakan lebar HTML dan tinggi atribut untuk menentukan ukuran gambar
• Gunakan lebar CSS dan tinggi properti untuk menentukan ukuran gambar (alternatif)
• Gunakan properti CSS mengapung untuk mendefinisikan image mengambang
• Gunakan atribut CSS usemap untuk menunjuk ke peta gambar
• Gunakan HTML <peta> elemen untuk mendefinisikan peta gambar
• Gunakan HTML <daerah> elemen untuk mendefinisikan area peta gambar
  Memuat gambar membutuhkan waktu. Gambar besar dapat memperlambat halaman Anda. Gunakan gambar dengan hati-hati.