Syntax Pembuatan Tabel HTML

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>
Daftar Link Artikel Terkait :
html