Belajar Coding HTML Lengkap Tag TD

Belajar Coding HTML Lengkap Tag TD. Tag td dalam bahasa pemograman HTML merupakan salah satu kode elemen dalam pemograman bahasa HTML. Tag td digunakan dalam pembuatan tabel HTML dalam pembuatan kolom atau field pada satu baris tabel. Adapun format penulisan tag td adalah kode pembuka <td> dan penutup </td>.  Di antara kode pembuka dan penutup tersebut kita memasukkan data yang akan ditampilkan pada tabel

Untuk menjelaskan pernyataan di atas anda bisa melihat contoh code HTML yang saya buat secara sederhana di bawah ini.

Gambar 1 tag td html

Sesuai dengan gambar 1 tag td html di atas saya akan membuat coding html dari tag td tersebut. Dari gambar yang anda lihat di atas tabel di atas memiliki 1 baris (record) yang dibuat dengan 1 tag <tr></tr> dan 2 buat kolom (field) yang bisa dibuat dengan 2 tag <td></td>. Tabel ini terdiri dari 2 buah cell.

Berikut kodenya:

<table border=1>
<tr>
<td>Data Pertama</td>
<td>Data Kedua</td>
</tr>
</table>

Tampak dari kode di atas terdapat 2 tag td, yaitu tag dengan isi data "Data Pertama" dan tag kedua dengan isi data "Data Kedua". Maka tabel tersebut memiliki 2 kolom yang berisi data pertama dan data kedua
Hasil dari program di atas dapat anda lihat

Data Pertama

Data Kedua

Contoh kedua:

Jika kita ingin membuat dalam 1 baris terdapat 1 kolom maka perintah html untuk membuat tabel tersebut atau tabel 1 buah cell adalah:

<table border=1>
<tr>
<td>Tabel 1 kolom</td>
</tr>
</table>

Tampak dari kode di atas tag td yang digunakan 1 buah jangan lupa tag td diapit oleh tag tr. setiap tag yang dibuat juga harus ditutup oleh tag penutupnya seperti ag td <td> ditutup oleh tag td penutup </td>.
Berikut hasil dari coding HTML tersebut

Tabel 1 kolom

Setelah melihat hasil dari 2 contoh di atas saya berharap anda bisa mengerti bagaimana cara menggunakan perintah tag <td> dalam bahasa pemograman HTML.

Namun dalam penggunaan tag td tersebut terdapat properti tambahan yang bisa digunakan. Bagaimana cara menggunakan properti tambahan tersebut dan apa saja properti atau atribut tambahan pada tag td tersebut? Anda bisa melihatnya pada penjelasan berikut.

<td properti="nilai properti">Data atau tulisan yang akan ditampilkan</td>

Tabel Properti(atribut) dan Nilai Properti(atribut) dari tag td yang didukung oleh HTML 4 ke atas(support HTML 5)

Properti	Nilai Properti	Keterangan
colspan	angka	membagi satu kolom td menjadi lebih dari satu buah tergantung nilai properti. Penggunaan colspan ini biasanya dinamakan nested cell table
headers	header_id	membuat satu atau lebih kolom header kemudian menghubungkan kolom header tersebut contohnya bisa anda lihat <table>   <tr>     <th id="nama">Nama</th>     <th id="email">Alamat Email</th>     <th id="telepon">No Telepon</th>     <th id="alamat">Alamat Rumah</th>   </tr>   <tr>     <td headers="nama">M. Ihsan Fermana</td>     <td headers="email">m.ihsan@gmail.com</td>     <td headers="telepon">+6285263990011</td>     <td headers="alamat">Perum. NTR tahap 2 blok E.10</td>   </tr> </table> Dari contoh coding di atas tampak td dengan header nama dihubungkan dengan td dengan id nama Hasil dari penggunaan attribut (properti) headers ini tidak memberikan dampak secara visual atau tampilan
rowspan	angka	membagi satu kolom menjadi lebih dari satu baris (tergantung nilai properti atau atribut)

Tabel Properti (atribut) dan Nilai Properti (nilai atribut) dari tag td yang didukung hanya oleh HTML 4 ke bawah (tidak support HTML 5)

Properti (atribut)	Nilai Properti (nilai atribut)	Keterangan
abbr	text	Menyingkat isi dari sebuah kolom Hasil dari penggunaan atribut abbr ini tidak memberikan dampak secara visual atau tampilan
align	left right justify center char	Meratakan isi atau konten dari sebuah kolom rata kiri (left), rata kanan (right), rata kiri dan kanan (justify), ketengah (center). sedangkan align char berguna untuk meratakan content kolom mengikuti char yang dimasukkan pada nilai properti misalnya align="," pada bilangan desimal berkoma.
axis	category_name	mengkategorikan cell-cell yang terdapat pada tabel. Atribut axis ini tidak memberikan efek secara visual atau tampilan
bgcolor	rgb (x1,x2,x3) (x1 adalah nilai 0-255 x2 adalah nilai 0 -255 x3 adalah nilai 0 -255) atau bisa diisi dengan nilai #000000-#FFFFFF atau bisa diisi dengan nama warna misal Blue	memberi warna pada background atau latar pada cell tabel. Ada tiga cara memberi warna misal bgcolor=234,0,100 atau bisa dengan nilai bgcolor=#00FFFF atau bisa dengan nilai bgcolor=red
char	character	meratakan sebuah isi cell menurut karakter yang dimasukkan pada nilai atribut
charoff	angka	mengeset angka dari karakter dari isi yang akan diratakan
height	pixels  (px) %	mengeset ukuran tinggi dari tabel dalam bentuk pixels atau persen.
nowrap	nowrap	Isi konten tidak di wrap atau diratakan terhadap layar atau screen komputer
scope	col colgroup row rowgroup	Berguna untuk mengidentifikasi isi cell dalam col (kolom), colgroup (grup kolom), row (baris), rowgroup (grup baris). Hasil dari penggunaan atribut scope ini tidak memberikan efek secara visual atau tampilan
valign	top middle bottom baseline	meratakan isi cell atau td secara vertikal ke atas (top), middle (tengah), bottom (bawah), baseline (dasar).
width	pixels (px) %	membuat ukuran lebar dari cell tabel. Anda dapat membuat dengan pixels misalnya 100px atau bisa juga persen misal 20%

Anda bisa cobakan Kode Tabel HTML anda di sini
<table border=1> <caption>Tabel Satu Cell</caption> <tr> <td>satu cell</td> <tr> </table> <table border=1> <caption>Tabel Dua Cell</caption> <tr> <td>cell pertama</td> <td>cell kedua</td> <tr> </table>



Hasil program Tabel HTML

Klik tombol "Coba Coding Tabel HTML" untuk melihat hasilnya.

Belajar Coding HTML Lengkap Tag TD 2016-09-13T05:57:00+07:00 Rating: 4.5 Diposkan Oleh: Dedy Fermana