Tabel HTML

Tabel HTML
Apel 44%
Pisang 23%
Jeruk 13%
Lain-lain 10%

Tabel
Cara untuk membuat tabel dalam dokumen HTML.

Tabel perbatasan
Bagaimana menentukan batas tabel yang berbeda.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini).

Tabel HTML

Tabel didefinisikan dengan tag <table>.

Sebuah tabel dibagi menjadi baris (dengan tag tr), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari “data tabel”, dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll

Tabel Contoh

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Bagaimana kode HTML di atas terlihat dalam browser:
baris 1, sel 1 baris 1, sel 2
baris 2, baris 2 sel 1, sel 2

Tabel HTML dan Atribut Perbatasan

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

Untuk menampilkan tabel dengan perbatasan, menentukan atribut perbatasan :
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Header Tebel HTML

Informasi header dalam tabel didefinisikan dengan tag <th>.

Semua browser utama akan menampilkan teks dalam elemen <th> sebagai tebal dan terpusat.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Bagaimana kode HTML diatas terkihat pada browser anda ?

Header 1 header 2
baris 1, sel 1 baris 1, sel 2
baris 2, baris 2 sel 1, sel 2

Tables without borders
How to create tables without borders.

Table headers
How to create table headers.

Table with a caption
How to add a caption to a table.

Table cells that span more than one row/column
How to define table cells that span more than one row or one column.

Tags inside a table
How to display elements inside other elements.

Cell padding
How to use cellpadding to create more white space between the cell content and its borders.

Cell spacing
How to use cellspacing to increase the distance between the cells.

The frame attribute
How to use the “frame” attribute to control the borders around the table.

Tabel HTML Tag

<table> = mendefinisikan tabel

<th>  = mendefinisikan sebuah header tabel

<tr> = mendefinisikan baris tabel

<td> = mendefinisikan sel tabel

<caption> = mendefinisikan tabel keterangan

<colgroup> = mendefinisikan sekelompok kolom dalam sebuah tabel, untuk format

<col /> = Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel

<thead>  = Grup isi tubuh dalam sebuah tabel

<tbody> = Grup isi tubuh dalam sebuah tabel

<tfoot> = Kelompok footer konten dalam sebuah tabel

 

Leave a Reply

Your email address will not be published. Required fields are marked *