Syntax Tag Tabel HTML
| Tag |
Penjelasan Singkat |
| <table> - </table> |
Tag tersebut bertujuan untuk mendefinisikan sebuah tabel,
tag yang dibuka dengan <table> lalu ditutup dengan tag </table>,
maka akan dibaca merupakan sebuah tabel. |
| <caption> - </caption> |
kalimat yang berada diantara tag <caption> (tag pembuka)
dan tag </caption> (tag penutup) akan dianggap sebagai judul dari suatu tabel.
Penulisan tag <caption> - </caption> diantara
tag <table> dan tag </table>
|
| <tr> - </tr> |
tag pembuka <tr> dan tag penutupnya </tr>,
fungsi dari tag ini adalah untuk mendefinisikan baris dalam tabel.
Adapun penulisannya tag <tr> - </tr> berada diantara
tag <table> dan tag </table> |
| <td> - </td> |
tag pembuka <td> dan tag penutupnya </td>,
fungsi dari tag ini adalah untuk mendefinisikan sel dalam baris.
Adapun penulisannya tag <td> - </td> berada diantara
tag <tr> - </tr> |
| <th> - </th> |
tag pembuka <th> dan tag penutupnya </th>,
fungsi dari tag ini adalah untuk mendefinisikan baris judul dalam tabel.
Adapun penulisannya tag <th> - </th> berada diantara
tag <tr> - </tr> |
Atribut Syntax Tag Tabel HTML
| Tag |
Atribut |
| <table> |
- align="left"|"center"|"right"
Atribut align bertujuan untuk menerangkan posisi tabel pada dokumen.
nilai dari align bisa left, center atau right.
- bgcolor="kode hex warna"|"nama warna"
Atribut bgcolor bertujuan untuk menerangkan warna background pada tabel.
Dengan memberikan atribut bgcolor berarti kita memberikan warna pada
background (warna latar belakang) pada tabel.
- border="1"|"2"|"3"|"value"
Atribut border untuk menentukan ketebalan garis pada tabel,
jika atribut border tidak di sertakan maka secara
default tabel tidak memiliki garis (defaultnya=0).
- cellpadding="2"|"3"|"4"|"value"
atribut cellpadding menentukan lebar spasi antara border dan isi cell,
secara default bernilai 1, artinya jika atribut cellpadding tidak disertakan
maka secara otomatis lebar border dan isi cell berjarak 1 spasi (defaultnya=1).
- cellspacing="3"|"4"|"value"
Atribut cellspacing untuk menentukan lebar antar sel (dafaultnya=2).
- height="10px"|"300px"|"100%"|"value"
Atribut height untuk menentukan tinggi dari tabel.
- width="10px"|"300px"|"100%"|"value"
Atribut width untuk menentukan lebar dari tabel.
|
| <caption> |
- align="bottom"|"Top"
Untuk penjelasannya silakan lihat pada penjelasan tag <table> atribut align.
|
| <tr> |
- align="right"|"center"|"left"
atribut align pada tag <tr>
yaitu menentukan posisi baris secara
horizontal di dalam tabel.
- valign="baseline"|"bottom"|"middle"|"top"
atribut valign pada tag <tr>
yaitu menentukan posisi baris secara
vertikal di dalam tabel.
- bgcolor="nilai hex warna"|"nama warna"
tentang atribut ini telah
di jelasnya sebelumnya
|
| <td> |
- align="center"|"left"|"right"
- valign="baseline"|"bottom"|"middle"|"top"
- bgcolor="nilai hex warna"|"nama warna"
- height="10px"|"150px"|"100%"
- width="10px"|"150px"|"100%"
- colspan="1"|"2"|"3"|"angka"
menggabung cell a dan cell b dalam satu kolom,
nilai angka merupakan jumlah cell yang akan digabungkan.
Atribut colspan sama dengan perintah merge cell didalam
microsfot word atau microsoft excell.
- rowspan="1"|"2"|"3"|"angka"
menggabung sel a dan sel b dalam satu baris,
nilai angka merupakan jumlah cell yang akan digabungkan.
Atribut rowspan sama dengan perintah merge cell didalam
microsfot word atau microsoft excell.
- nowrap
Atribut nowrap menjelaskan bahwa teks
didalam sel hanya terdiri dari satu baris
|
| <th> |
- align="center"|"left"|"right"
- valign="baseline"|"bottom"|"middle"|"top"
- bgcolor="kode hex"|"nama warna"
- colspan="1"|"2"|"3"|"angka"
- rowspan="1"|"2"|"3"|"angka"
- height="10px"|"150px"|"100%"
- width="10px"|"150px"|"100%"
|
Contoh Penulisan Syntax Tag Tabel Beserta Atributnya
<table bgcolor="#C0C0C0" border="1" cellpadding="2">
<caption align="top">
Jumlah Cell Dalam Kolom
</caption>
<tr>
<th width="150px" bgcolor="black">Judul 1</th>
<th width="450px" bgcolor="red">Judul 2</th>
</tr>
<tr align="center" valign="top">
<td valign="top">cell 1</td>
<td valign="top">cell 2</td>
</tr>
</table>
Artikel Terkait :
html
tutorial
Tidak ada komentar:
Posting Komentar
Silakan Berikan Review Anda Tentang Jasa Digital Computer Pada Kolom Komentar, Terimakasih