Tahap 10: Tabel ~ SERSAN

Tabel digunakan ketika Anda harus menunjukkan "data tabel" informasi yaitu yang secara logis disajikan dalam baris dan kolom.

Apakah sulit?

Membangun tabel dalam HTML mungkin pada awalnya tampak rumit tetapi jika Anda tetap tenang dan menonton langkah Anda, sebenarnya sangat logis - seperti segala sesuatu yang lain dalam HTML.
Contoh 1:

 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Akan terlihat seperti ini di browser:

Sel 1	Sel 2
Sel 3	Sel 4

Apa perbedaan antara `<tr>` dan `<td>` ?

Seperti yang akan Anda lihat dari contoh di atas, ini mungkin contoh HTML yang paling rumit yang diberikan kepada Anda sejauh ini. Mari kita jatuhkan itu dan menjelaskan berbagai tag:
3 elemen yang berbeda digunakan untuk memasukkan tabel:

Tag pembuka <table> dan tag penutup </table> dimulai dan berakhir Tabel. Logis.
<tr> singkatan dari "ow r t mampu" dan dimulai dan diakhiri baris horisontal. Masih logis.
<td> adalah singkatan dari "t d ata mampu". Tag ini dimulai dan diakhiri setiap sel dalam baris tabel Anda. Semua sederhana dan logis.

Berikut adalah apa yang terjadi dalam Contoh 1: Tabel dimulai dengan <table> , diikuti dengan <tr> , yang menunjukkan awal baris baru. Dua sel dimasukkan dalam baris ini: <td> your 1 </td> dan <td> your 2 </td> . Baris ini selanjutnya ditutup dengan </tr> dan baris baru <tr> dimulai segera setelah. Baris baru ini juga berisi dua sel. Tabel ini ditutup dengan </table> .
Hanya untuk membuatnya jelas: baris adalah garis horisontal sel dan kolom adalah garis vertikal sel:

Sel 1	Sel 2
Sel 3	Sel 4

Sel 1 dan 2 your membentuk berturut-turut. Sel 1 dan Cell 3 membentuk kolom.
Dalam contoh di atas, tabel memiliki dua baris dan dua kolom. Namun, sebuah tabel dapat memiliki jumlah yang tidak terbatas baris dan kolom.
Contoh 2:

 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>
 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>

Akan terlihat seperti ini di browser:

Sel 1	Sel 2	Sel 3	Sel 4
Your 5	Your 6	Your 7	Your 8
Your 9	Your 10	Your 11	Your 12

Apakah ada atribut?

Tentu saja ada atribut. Sebagai contoh, atribut perbatasan digunakan untuk menentukan ketebalan dari perbatasan sekitar tabel Anda:
Contoh 3:

 <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
 <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Akan terlihat seperti ini di browser:

Sel 1	Sel 2
Sel 3	Sel 4

Ketebalan perbatasan ditentukan dalam piksel ( Lihat Tahap 9 )
Seperti gambar, Anda juga dapat mengatur lebar tabel dalam pixel - atau alternatif dalam persentase dari layar:
Contoh 4:

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

Contoh ini akan ditampilkan dalam browser sebagai tabel dengan lebar 30% dari layar. Cobalah sendiri.

Atribut lebih?

Ada banyak atribut untuk tabel. Berikut adalah dua lebih:

align: menentukan keselarasan horisontal besar isi seluruh tabel, berturut-turut atau dalam satu sel. Misalnya, kiri, tengah atau kanan.
valign: menentukan alignment vertikal besar isi sel. Misalnya, atas, tengah atau bawah.

Contoh 5:

 <td align="right" valign="top">Cell 1</td>
 <td align="right" valign="top">Cell 1</td>

Apa yang dapat saya masukkan dalam tabel saya?

Secara teoritis, Anda dapat memasukkan apa pun di tabel: teks, link dan gambar ... TAPI tabel dimaksudkan untuk menyajikan data tabular (data yang dapat bermakna disajikan dalam kolom dan baris) sehingga menahan diri dari meletakkan sesuatu ke dalam tabel hanya karena Anda ingin mereka untuk ditempatkan di samping satu sama lain.
Di masa lalu di Internet - yaitu beberapa tahun yang lalu - tabel sering digunakan sebagai alat layout. Tetapi jika Anda ingin mengontrol penyajian teks dan gambar ada cara lebih dingin untuk melakukannya (petunjuk: CSS). Tapi lebih lanjut tentang itu nanti.
Sekarang, menempatkan apa yang baru saja belajar untuk berlatih dan merancang sejumlah tabel dalam berbagai ukuran, dengan atribut yang berbeda dan konten. Hal ini harus membuat Anda sibuk selama berjam-jam.

These icons link to social bookmarking sites where readers can share and discover new web pages.