Belajar Menciptakan Tabel Html

Untuk dapat membuat tabel memakai instruksi HTML aku masukankan terlebih lampau untuk Mengenal Dasar-Dasar HTML.

Ada beberapa yang perlu Anda pahami yaitu berkaitan dengan cara penulisan / tag yang dipakai diantaranya menyerupai tag <table>, <th>, <tr> dan <td>.

<table> ,Perintah/kode pertama untuk memulai membuat tabel
<th> dipakai untuk memdiberi judul pada setiap kolom/header kolom,
<tr> dipakai untuk membuat baris pertama,
<td> dipakai untuk membuat kolom – kolom pada baris, setiap

Tag nantinya akan diakhiri dengan tanda epilog diikuti dengan nama tag pembukanya </namatag>, bekerjsama masih ada tag lainnya seperti

<tbody> Grup dalam isi body/tubuh tabel
<caption> Untuk memdiberi caption/judul pada tabel
<colgroup>, Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<col>, Menentukan sifat dari setiap kolom untuk setiap kolom dalam <colgroup>
<thead>, Untuk group dalam header tabel
<tbody>
dan <tfoot>, Grup untuk footer/catatn kaki dalam tabel

Namun ketika masih belajar, Saya menulis menggunkan tiga tag diatas, yaitu <table>, <th>, <tr> dan </td>

misal instruksi dasar tabel HTML

 <html> <head> <title>Table</title> </head> <body>  <table border="1" style="width:100%">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr> </table>  </body>

Nanti kalau instruksi diatas di sanksi oleh browser maka akan terlihat menyerupai diberikut

Untuk dapat membuat tabel memakai instruksi HTML saya Belajar Membuat Tabel HTML

Anda juga dapat melaksanakan variasi terhadap table dengan menambahkan CSS dan mendifinisikan gaya tabel yang diinginkan sehingga tak perlu lagi mendefiniskannya ketika menulis instruksi tabel, misal kalau Anda ingin membuat tabel dengan garis batas warna hitam 1px dan efek colapse pada tabel maka Anda dapat menulis properti/selektor css menyerupai diberikut

table, th, td {
border: 1px solid black; border-collapse: collapse;
}

misal

 <html> <head> <title>Table</title> <style type="text/css"> table, th, td {     border: 1px solid black;     border-collapse: collapse; } </style> </head> <body>  <table style="width:100%">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr> </table>  </body> </html>

Sehingga nanti tabel akan terlihat menyerupai diberikut

Bila ingin mengatur jarak antara goresan pena dengan tabel, Anda dapat menambahkan properti padding didalam <th> dan <td> menyerupai diberikut

th, td {
padding: 5px; text-align: left;
}

Memdiberikan Syle Khusus Untuk Satu Tabel

Anda dapat menerapkan gaya/style khusus spesialuntuk berlaku untuk satu tabel saja, dengan membuat dan mamanggil id melalui tabel, misalnya ialah dengan menarapkan instruksi diberikut kedalam

table#satu {
width: 100%;
background-color: #00CCCC;
}

misal

 <html> <head> <title>Table</title> <style type="text/css"> table, th, td {     border: 1px solid black;      border-collapse: collapse;  } th, td {     padding: 5px;     text-align: left; } table#satu {     width: 100%;         background-color: #00CCCC; } </style> </head> <body>  <table style="width:100%">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr> </table>  <br> <table id="satu">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr> </table>  </body> </html>

Bila instruksi diatas dieksekui oleh browser, maka akan tampil menyerupai diberikut

Gaya Tabel Lainnya

Anda juga dapat menambahkan style lainnya kedalam tabel, kalau Anda ingin membuat tabel menjadi warna warni, misal pada baris pertama berwarna biru dan baris kedua berwarna kuning maka Anda dapat membuat id diberikut

table#satu tr:nth-child(even) {
    background-color: #00FFFF;
}
table#satu tr:nth-child(odd) {
   background-color:#FFFF00;
}
table#satu th {
    background-color: black;
    color: white;
}

misal

 <html> <head> <title>Table</title> <style type="text/css"> table, th, td {     border: 1px solid black;      border-collapse: collapse;  } th, td {     padding: 5px;     text-align: left; } table#satu {     width: 100%;         background-color: #00CCCC; } table#satu tr:nth-child(even) {     background-color: #00FFFF; } table#satu tr:nth-child(odd) {    background-color:#FFFF00; } table#satu th {     background-color: black;     color: white; } </style> </head> <body>  <table style="width:100%">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr> </table>  <br> <table id="satu">   <tr>     <th>Nama Depan</th>     <th>Nama Belakang</th>     <th>Umur</th>   </tr>   <tr>     <td>Andi</td>     <td>Dadan</td>     <td>30</td>   </tr>   <tr>     <td>Dinda</td>     <td>Sonia</td>     <td>19</td>   </tr>    <tr>     <td>Ahmad</td>     <td>Salsa</td>     <td>25</td>   </tr> </table>  </body> </html>

Bila instruksi Tabel HTML diatas di sanksi oleh browser maka hasil akan terlihat menyerupai diberikut