HTML Tables


«Previous Lanjut Bab »

HTML Tables

Apel 44%
Pisang 23%
Jeruk 13%
Lain 10%

Try it Yourself – Contoh

Tabel
Cara untuk mendefinisikan tabel dalam sebuah dokumen HTML.

Tabel perbatasan
Contoh ini menunjukkan batas meja yang berbeda.

Contoh-contoh di bagian bawah halaman.


Tabel

Tabel didefinisikan dengan tag <table>. Sebuah meja dibagi ke dalam baris (dengan tag <tr>), dan setiap baris data dibagi ke dalam sel (dengan tag <td>). Surat-surat td singkatan dari “data tabel”, yang merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll

<table border=”1″>
<tr>
<td> baris 1, sel 1 </ td>
<td> baris 1, sel 2 </ td>
</ tr>
<tr>
<td> baris 2, sel 1 </ td>
<td> baris 2, sel 2 </ td>
</ tr>
</ table>

Tampilannya dalam browser:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tabel dan Perbatasan Atribut

Jika Anda tidak menentukan atribut border tabel akan ditampilkan tanpa batas. Kadang-kadang hal ini dapat berguna, tetapi sebagian besar waktu, Anda ingin perbatasan untuk menunjukkan.

Untuk menampilkan tabel dengan batas-batas, Anda harus menggunakan atribut border:

<table border=”1″>
<tr>
<td> Row 1, sel 1 </ td>
<td> Row 1, sel 2 </ td>
</ tr>
</ table>

Judul dalam tabel

Judul dalam tabel didefinisikan dengan tag <th>.

<table border=”1″>
<tr>
<th> Pos </ th>
<th> Pos lain </ th>
</ tr>
<tr>
<td> baris 1, sel 1 </ td>
<td> baris 1, sel 2 </ td>
</ tr>
<tr>
<td> baris 2, sel 1 </ td>
<td> baris 2, sel 2 </ td>
</ tr>
</ table>

Tampilannya dalam browser:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Sel-sel kosong dalam tabel

Sel tabel tanpa konten tidak ditampilkan dengan sangat baik di kebanyakan browser.

< <table border=”1″>
<tr>
<td> baris 1, sel 1 </ td>
<td> baris 1, sel 2 </ td>
</ tr>
<tr>
<td> baris 2, sel 1 </ td>
<td> </ td>
</ tr>
</ table>

Tampilannya dalam browser:

baris 1, sel 1 baris 1, sel 2
baris 2, sel 1

Perhatikan bahwa batas-batas di sekitar sel tabel kosong yang hilang (NB! Mozilla Firefox menampilkan perbatasan).

Untuk menghindari hal ini, tambahkan non-breaking space () untuk sel data yang kosong, untuk membuat perbatasan terlihat:

<table border=”1″>
<tr>
<td> baris 1, sel 1 </ td>
<td> baris 1, sel 2 </ td>
</ tr>
<tr>
<td> baris 2, sel 1 </ td>
<td>&nbsp;</td>
</tr>
</ table>

Tampilannya dalam browser:

baris 1, sel 1 baris 1, sel 2
baris 2, sel 1

Catatan Dasar – Tips Berguna

The <thead>, <tbody> dan elemen <tfoot> jarang digunakan, karena dukungan browser buruk. Mengharapkan ini berubah di masa depan versi XHTML. Jika anda memiliki Internet Explorer 5.0 atau lebih baru, Anda dapat melihat contoh kerja dalam tutorial XML.


Lebih Contoh

Tabel tanpa border
Contoh ini menunjukkan sebuah tabel tanpa batas.

Judul dalam sebuah tabel
Contoh ini mendemonstrasikan bagaimana menampilkan header tabel.

Sel kosong
Contoh ini menunjukkan bagaimana menggunakan “&nbsp” untuk menangani sel-sel yang tidak mempunyai konten.

Meja dengan keterangan
Contoh ini menunjukkan sebuah meja dengan keterangan.

Sel tabel yang tersebar lebih dari satu baris / kolom
Contoh ini menunjukkan bagaimana untuk menentukan sel tabel yang tersebar lebih dari satu baris atau satu kolom.

Tags dalam tabel
Contoh ini menunjukkan bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.

Cell padding
Contoh ini menunjukkan bagaimana menggunakan cellpadding untuk menciptakan lebih banyak ruang putih antara isi sel dan perbatasannya.

Cell spacing
Contoh ini mendemonstrasikan bagaimana menggunakan cellspacing untuk meningkatkan jarak antara sel.

Tambahkan warna latar belakang atau gambar latar belakang untuk meja
Contoh ini menunjukkan bagaimana cara menambahkan latar belakang ke sebuah meja.

Tambahkan warna latar belakang atau gambar latar belakang sel tabel
Contoh ini menunjukkan bagaimana cara menambahkan latar belakang untuk satu atau lebih sel tabel.

Align konten dalam sel tabel
Contoh ini menunjukkan bagaimana menggunakan “align” atribut untuk menyelaraskan isi sel, untuk menciptakan sebuah “molek” meja.

Frame atribut
Contoh ini menunjukkan bagaimana menggunakan “frame” atribut untuk mengontrol perbatasan di sekitar meja.

Frame dan perbatasan atribut
Cara menggunakan “frame” dan “perbatasan” atribut untuk mengontrol perbatasan di sekitar meja.


Tabel Tags

Tag Description Deskripsi
<table> Mendefinisikan sebuah tabel
<th> Mendefinisikan header tabel
<tr> Mendefinisikan sebuah baris tabel
<td> Mendefinisikan sebuah sel tabel
<caption> Mendefinisikan tabel caption
<colgroup> Kelompok mendefinisikan kolom tabel
<col> Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel
<thead> Mendefinisikan kepala tabel
<tbody> Mendefinisikan sebuah badan tabel
<tfoot> Mendefinisikan footer tabel
«Previous Lanjut Bab »

  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: