›

Contoh penulisan Tag Tabel yang sangat penting di html

Written By Thursday, November 7, 2019 Edit

Berikut ini adalah bagaimana cara penulisan tag tabel beserta contoh dan hasil gambar nya. silahkan di simak artikelnya dan dibaca agar paham ya guys...
html

Tag tabel Tag ini sangat penting dalam html. Tag ini memiliki beberapa atribut seperti perbatasan, lebar, tinggi, kita akan melihatnya secara detail melalui berbagai contoh. Tag <tr> digunakan untuk mendefinisikan baris tabel. Itu harus menulis di dalam tag <table>. Sebuah tabel dapat memiliki lebih dari satu baris. <td> didefinisikan sebagai data tabel (sel), harus ditulis di dalam tag <tr>.

 Contoh:
<! DOCTYPE html>
<html>
  <head>
  <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">  <title> Tabel HTML </title>
</head>
  <body>
  <table border = "1" width = "100%">
  <tr>
  <th> Name </th>
 <th> Internal 1 </th>
   <th> Internal 2 </th>
  <th> Internal 3 </th>
 <th> Internal 4 </th>
  </tr>
 <tr>    <td> Rajesh </td>
    <td> 56 </td>
 <td> 69 </td>
  <td> 85 </td>
  <td> 91 </td>
  </tr>
   <tr>    <td> Franklin </td>
  <td> 88 </td>
   <td> 87 </td>
   <td> 95 </td>
   <td> 92 </td>
  </tr>
   <tr>    <td> Merbin </td>
   <td> 81 </td>
   <td> 88 </td>
   <td> 87 </td>
  <td> 89 </td>
  </tr>
  <tr>    <td> Deepa </td>
  <td> 88 </td>
  <td> 59 </td>
  <td> 62 </td>
  <td> 67 </td>
 </tr>
   <tr>    <td> Khan </td>
 <td> 57 </td>
 <td> 45 </td>
 <td> 44 </td>
  <td> 51 </td>
  </tr>
  <tr>    <td> Ramesh </td>
  <td> 40 </td>
  <td> 38 </td>
 <td> 49 </td>
 <td> 56 </td>
 </tr>
 </table>
 </body>
  </html>


Hasil:
html table

ruang sel Atribut cellspacing digunakan untuk memberi ruang di antara dua sel (tag <td>)

 Contoh:
<! DOCTYPE html>
<html>
<head>
  <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">  <title> Tabel HTML </title>
 </head>
  <body>
 <table border = "1" width = "100%" cellspacing = "20px">
 <tr>
   <th> Name </th>
  <th> Internal 1 </th>
   <th> Internal 2 </th>
    <th> Internal 3 </th>
 <th> Internal 4 </th>
</tr>
   <tr>
   <td> Rajesh </td>
  <td> 56 </td>
  <td> 69 </td>
   <td> 85 </td>
   <td> 91 </td>
</tr>
   <tr>
  <td> Franklin </td>
  <td> 88 </td>
  <td> 87 </td>
   <td> 95 </td>
   <td> 92 </td>
  </tr>
   <tr>
    <td> Merbin </td>
   <td> 81 </td>
  <td> 88 </td>
  <td> 87 </td>
  <td> 89 </td>
  </tr>
   <tr>
  <td> Deepa </td>
   <td> 88 </td>
   <td> 59 </td>
   <td> 62 </td>
   <td> 67 </td>
  </tr>
   <tr>
<td> Khan </td>
 <td> 57 </td>
 <td> 45 </td>
 <td> 44 </td>
   <td> 51 </td>
 </tr>
  <tr>
  <td> Ramesh </td>
   <td> 40 </td>
  <td> 38 </td>
 <td> 49 </td>
 <td> 56 </td>
   </tr>
  </table>
   </body>
  </html>


 Hasil:
html table


 cellpadding Atribut cellpadding digunakan untuk mengatur ruang di dalam sel dan konten yang ada di dalamnya, dengan melakukan hal itu ukuran sel dapat diubah.
Contoh:
<! DOCTYPE html>
 <html>
  <head>
 <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">  <title> Tabel HTML </title>
</head>
   <body>
    <table border = "1" width = "100%" cellpadding = "20px">
 <tr>
 <th> Name </th> 
<th> Internal 1 </th>
 <th> Internal 2 </th>
   <th> Internal 3 </th>
 <th> Internal 4 </th>
  </tr>
   <tr>
   <td> Rajesh </td>
   <td> 56 </td>
 <td> 69 </td>
   <td> 85 </td>
   <td> 91 </td>
  </tr>
    <tr>
  <td> Franklin </td>
  <td> 88 </td>
  <td> 87 </td>
  <td> 95 </td>
    <td> 92 </td>
   </tr>
    <tr>
<td> Merbin </td>
  <td> 81 </td>
  <td> 88 </td>
   <td> 87 </td>
  <td> 89 </td>
  </tr>
   <tr>
    <td> Deepa </td>
  <td> 88 </td>
 <td> 59 </td>
   <td> 62 </td>
    <td> 67 </td>
  </tr>
  <tr>
   <td> Khan </td>
  <td> 57 </td>
   <td> 45 </td>
  <td> 44 </td>
   <td> 51 </td>
  </tr>
   <tr>
  <td> Ramesh </td>
 <td> 40 </td>
 <td> 38 </td>
  <td> 49 </td>
   <td> 56 </td>
  </tr>
 </table>
  </body>
  </html>


 Hasil:
html table


 colspan Atribut colspan digunakan untuk menggabungkan dua kolom menjadi satu sel.

 Contoh:
<! DOCTYPE html>
 <html>
 <head>
<meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">  <title> Tabel HTML </title>
 </head>
   <body>
    <table border = "1" width = "100%" cellpadding = "20px">
 <tr>
  <th> Name </th>
 <th> Internal 1 </th>
   <th> Internal 2 </th>
 <th> Internal 3 </th>
   <th> Internal 4 </th>
  </tr>
   <tr>
  <td> Rajesh </td> 
<td colspan = "2"> 56 </td>
    <td> 85 </td>
   <td> 91 </td>
 </tr> 
 <tr>
    <td> Franklin </td>
   <td> 88 </td>
   <td colspan = "3"> 87 </td>
  </tr>
    <tr>
   <td> Merbin </td>
 <td colspan = "4"> 81 </td>
  </tr>
     <tr>
    <td> Deepa </td>
 <td> 88 </td>
   <td> 59 </td>
  <td> 62 </td>
   <td> 67 </td>
  </tr>
  <tr>
   <td> Khan </td>
   <td> 57 </td>
 <td> 45 </td>
   <td> 44 </td>
   <td> 51 </td>
 </tr>
    <tr> 
<td> Ramesh </td>
   <td> 40 </td>
  <td> 38 </td>
  <td colspan = "2"> 49 </td>
</tr>
 </table>
  </body>
  </html>

 Hasil:
html table

Tag Maju Tag <progres> digunakan untuk melihat progres penyelesaian suatu tugas. Meskipun gaya tampilan disetujui di browser, Biasanya disetujui sebagai bilah progres.

 Contoh:
<! DOCTYPE html>
 <html> 
 <head>
 <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">  <title> progress bar </title>
 </head> 
  <body>
   <progress>
</progress>
  </body> 
 </html>

Hasil:

Html table
KESIMPULAN:
Jadi untuk penjelasan kali ini cukup mudah bukan untuk Contoh penulisan Tag Tabel. Semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel